三、样式进阶和布局

内容概述

这一课深入讲解 CSS（Cascading Style Sheets），包括如何使用 CSS 来控制 HTML 元素的样式和布局，使网页更加美观。

教学目标

能够使用 CSS 为 HTML 元素添加样式。
掌握 CSS 布局技术，包括浮动和定位，能够创建基本的页面布局。
对 CSS3 的新特性有一定了解，并能简单应用。

具体内容

CSS 样式进阶
CSS 布局基础（正常流、浮动布局、定位布局、弹性盒布局、网格布局）
CSS3 新特性（过渡、动画、变形、阴影、渐变等）
CSS 框架简介（如 Bootstrap）

CSS 样式进阶

F12: 元素检查和样式调试

盒子模型可视化
查看和修改元素样式

再谈区块元素——元素的显示模式（block/inline/inline-block）

块级元素（block）

定义与特点：

块级元素通常会自动换行，并占据其父元素的整个可用宽度（除非指定了宽度）。
块级元素可以设置宽度（width）、高度（height）、内边距（padding）和外边距（margin）。
常见的块级元素包括div、h1-h6、p、ul、ol、li等。

特性总结：

默认独立成行，垂直布局。
内部可以容纳其他块级元素或内联元素。
默认宽度：撑满父元素
默认高度：由内容撑开
可以设置宽高、内边距和外边距。

块级元素的默认宽度

默认宽度（100%）并不是绝对的，因为它可以通过 CSS 样式进行改变。比如，你可以通过使用margin和padding属性来影响块级元素实际占据的空间大小，但这些改变并不会改变块级元素“默认占据全部可用宽度”的基本特性，除非明确指定了一个不同的宽度值。

水平居中技巧：margin: 0 auto;

行内元素（内联元素 inline）

定义与特点：

行内元素通常不会自动换行，而是显示在同一行上，其宽度由其内容决定。
行内元素不能设置宽度和高度，但可以设置内边距（padding）和外边距（margin），但垂直方向上的边距不会产生边距效果。
常见的行内元素包括span、a、strong、em、i等。

特性总结：

默认横向显示，水平布局。
相邻的行内元素会在同一行显示，直到一行排不下，才会换行。
宽度和高度默认由内容撑开。
不能设置宽高，只能设置左右的边距，不能设置上下的边距。
只能容纳文本或者其他行内元素（不要在行内元素中嵌套块级和行内块元素）。

行内块元素(inline-block)

定义与特点：

行内块元素结合了行内元素和块级元素的特性。
它们可以像行内元素一样在同一行上显示，同时又可以像块级元素一样设置宽度、高度、内边距（padding）和外边距（margin）。
常见的行内块元素包括img、input、td等。

特性总结：

默认横向显示，水平布局。
宽度和高度默认由内容撑开。
可以设置宽高、内边距和外边距。
相邻的行内块元素会在同一行显示，直到一行排不下，才会换行。

修改元素的显示模式

CSS 允许通过display属性来改变元素的显示模式，从而实现元素之间的模式转换。例如，可以通过设置display: inline;将块级元素转换为行内元素，或者通过display: block;将行内元素转换为块级元素，以及通过display: inline-block;将元素转换为行内块元素。

元素的默认样式

元素的默认 margin，如 <body>, <p>, <ul>
元素的默认 padding，如 <ul>
重置默认样式

css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

margin 的注意事项

margin 合并现象（也叫 margin 塌陷、margin 折叠）

定义

margin 塌陷（也称为 margin collapsing）是指当两个或多个垂直方向上的相邻元素（兄弟元素或父子元素）的外边距相遇时，它们不会叠加，而是会合并成一个外边距，其大小取决于这些外边距中的最大值。

发生条件

必须是处于常规文档流（非 float 和绝对定位）的块级盒子。必须是垂直方向上的相邻外边距。相邻元素之间没有 padding 或 border 将它们分隔开。

示例

同级元素：两个相邻的同级元素，一个设置了 margin-bottom，另一个设置了 margin-top，这两个外边距会塌陷成一个，其大小为两个边距中的最大值（或如果它们相等，则仅为其中一个）。

父子元素：父元素没有设置高度，子元素设置了 margin-top，此时父元素会随子元素一起向下移动，仿佛父元素的 margin-top 与子元素的 margin-top 合并了。

解决方法

避免设置相邻元素的垂直外边距：只给一个元素设置垂直外边距。
父子元素 margin 塌陷时，给父元素加入边框或内边距来分隔它们的外边距。
父子元素 margin 塌陷时，可以给父元素设置 overflow: hidden 属性。

内容溢出和滚动条

内容溢出

内容溢出（Overflow）指的是子元素的内容超出了其父元素（容器）的指定区域或可视范围。在 CSS 中，当子元素的大小（包括宽度、高度、内边距、边框等）超过了父元素的可用空间时，就会发生内容溢出。

溢出处理方式

CSS 提供了overflow属性来控制内容溢出的处理方式，其主要值包括：

visible：默认值。内容不会被修剪，会呈现在元素框之外，这可能会导致布局混乱。
hidden：内容会被修剪，并且超出容器部分的内容将不可见。
scroll：内容会被修剪，但是浏览器会显示滚动条以便用户可以滚动查看其余的内容。这个选项无论内容是否会溢出，都会添加水平和垂直双方向的滚动条。
auto：如果内容被修剪，则浏览器会自动显示滚动条以便用户可以滚动查看其余的内容。这个选项会根据需要自动添加滚动条，当水平需要时则添加水平滚动条，当垂直需要时则添加垂直滚动条，当不需要时则不添加。
inherit：规定应该从父元素继承overflow属性的值。

滚动条

滚动条是浏览器用于查看超出容器可视区域内容的一种机制。当容器中的内容发生溢出，并且overflow属性被设置为scroll或auto（且内容确实溢出）时，浏览器会自动显示滚动条。

行内元素之间的空白问题

移除或压缩 HTML 源代码中的空白

最直接的方法是避免在 HTML 源代码中相邻的行内元素之间加入不必要的空格、制表符或换行符。你可以通过以下方式来实现：

将元素写在一行：将相关的行内元素尽可能写在一行上，这样可以避免换行符被浏览器解释为空白。
使用 HTML 注释：在某些情况下，你可能需要保留源代码的换行以提高可读性。此时，可以在元素之间插入 HTML 注释来“吃掉”换行符，但这种方法通常不推荐，因为它会引入不必要的复杂性。

使用 CSS 的font-size技巧

虽然这种方法有些取巧，但有时候通过设置父元素的font-size: 0;，然后在子元素上重新设置font-size，可以消除行内元素之间的空白。但请注意，这种方法会影响文字大小，并且可能不是所有情况下都适用（特别是当子元素中包含其他需要正常字体大小的元素时）。

行内块的幽灵空白问题

产生的原因

基线对齐：行内块元素垂直方向默认与基线（baseline）对齐，这意味着它们的底部可能与同一行中其他元素的基线对齐，而不是与容器的底部对齐。这可能导致看起来像是底部有空白。

解决办法

修改垂直对齐方式：将行内块元素的vertical-align属性设置为top、middle、bottom或baseline以外的值（如top或bottom），以控制元素在垂直方向上的对齐方式。
给元素设置 display: block(注意副作用)
给父元素设置 font-size:0(注意副作用)

背景区域

CSS 中的背景区域指的是元素内容、内边距（padding）和边框（border）下层的区域，通过 CSS 的背景属性可以对该区域进行样式设置。

隐藏元素的两种方式

使用display属性

display属性用于控制元素如何显示。要隐藏一个元素，你可以将display属性的值设置为none。当元素的display被设置为none时，它不仅会从页面上消失，而且也不会占据任何布局空间。换句话说，元素就好像完全不存在一样。

css

.element-hidden {
  display: none;
}

使用display: none;的一个主要缺点是，如果你需要重新显示该元素，并且希望它保持原来的布局位置，那么你可能需要重新计算或指定其大小和其他布局属性，因为当它隐藏时，浏览器会从其布局中移除它。

使用visibility属性

与display属性不同，visibility属性不会从布局中移除元素。相反，它会保持元素占据的空间，但使元素不可见。visibility属性有两个主要值：visible（默认值，元素可见）和hidden（元素不可见）。

css

.element-invisible {
  visibility: hidden;
}

使用visibility: hidden;的一个优点是，如果你稍后想要重新显示该元素，并且希望它保留原来的大小和位置，那么你可以简单地将visibility属性的值改回visible，而无需重新计算或调整其布局属性。

选择哪种方法？

如果你希望元素完全从页面布局中消失，就像它从未存在过一样，那么应该使用display: none;。
如果你希望元素保持其位置和大小，但只是暂时不可见，那么应该使用visibility: hidden;。

这两种方法各有用途，你可以根据具体的布局需求和用户体验来选择合适的隐藏方式。

样式的继承

样式的继承在 CSS（层叠样式表）中是一个非常重要的概念，它允许子元素从父元素继承某些样式属性。这种机制有助于减少代码冗余，提高样式表的可维护性和复用性。以下是对 CSS 样式继承的详细展开说明：

样式继承的基本概念

CSS 样式继承指的是子元素能够自动获取并应用其父元素的某些样式属性值，而无需在子元素中显式地设置这些值。这种继承关系类似于家族中的血缘关系，父元素就像是祖先，而子元素则是其后代，后代会继承祖先的某些特征。

可以继承的样式属性

在 CSS 中，不是所有的样式属性都会被继承。以下是一些常见的可以继承的样式属性：

字体属性（font）：包括font-family（字体系列）、font-size（字体大小）、font-weight（字体粗细）、font-style（字体样式，如斜体）等。
文本属性（text）：如color（文本颜色）、text-align（文本对齐方式）、text-decoration（文本装饰，如下划线）等。
列表属性（list）：如list-style-type（列表项标记类型）、list-style-position（列表项标记的位置）等。
表格布局属性（table-layout）：这个属性虽然不常用于文本或块级元素的样式继承，但在表格布局中，它可以影响表格的渲染方式。
元素可见性属性（visibility）：如果父元素设置为hidden，则子元素也会变得不可见。

不能继承的样式属性

除了上述可以继承的属性外，还有许多样式属性是不会被子元素继承的。这些属性通常与元素的布局、定位、大小、背景等相关，如：

边框属性（border）：包括边框的宽度、样式和颜色。
内边距属性（padding）：元素内容与边框之间的空间。
外边距属性（margin）：元素与其他元素之间的空间。
定位属性（position）：如position、top、right、bottom、left等，用于控制元素的定位方式。
大小属性（width、height）：元素的宽度和高度。
背景属性（background）：包括背景颜色、背景图像等。

样式继承的优先级和覆盖

虽然子元素会继承父元素的样式属性，但如果子元素自身也设置了相同的属性，则子元素会使用自身的属性值，而不是继承父元素的属性值。继承的样式级别很低，甚至可以被默认样式覆盖，如 a 链接的颜色。

注意事项

样式继承可以减少代码的冗余，但也可能导致意外的样式效果。因此，在设计样式表时，需要仔细考虑哪些属性应该被继承，哪些属性应该被显式设置。
有些属性虽然可以继承，但子元素仍可以通过显式设置自己的值来覆盖继承的值。此外，还可以使用inherit关键字来强制子元素继承父元素的某个属性值。
样式继承的优先级和覆盖规则是 CSS 中非常重要的一部分，需要深入理解并熟练掌握。

综上所述，CSS 样式继承是一种非常实用的特性，它有助于减少代码冗余，提高样式表的可维护性和复用性。但同时也需要注意样式继承的优先级和覆盖规则，以避免出现意外的样式效果。

鼠标的样式

在 CSS 中，设置鼠标样式是一个简单但有效的方式，用于增强网页的交互性和用户体验。主要通过cursor属性来实现，该属性可以接受多种预定义的值来定义不同的鼠标样式。以下是一些常用的cursor属性值及其对应的鼠标样式：

default（或 auto）：默认值，浏览器会根据当前上下文自动选择鼠标样式，通常是箭头。
pointer：鼠标指针会变成一个手形，通常用于链接或按钮，表示可以点击。
text：鼠标指针会变成一个文本插入符号（I 型光标），表示可以输入文本，通常用于输入框等。
move：鼠标指针会变成一个带有四个箭头的十字形状，表示可以移动元素，常用于拖拽操作。
wait：鼠标指针会变成一个旋转的圆圈，表示正在等待某个操作完成，如加载过程中。
help：鼠标指针会变成一个问号或箭头加问号的形状，表示需要帮助或提供额外的信息。
crosshair：鼠标指针会变成一个十字形状，通常用于绘图或选择区域。
not-allowed：鼠标指针会变成一个圆圈加斜杠的形状，表示不允许进行某个操作。

使用方法

要在 CSS 中设置鼠标样式，可以在 CSS 文件中直接为特定元素指定cursor属性，例如：

css

.clickable-element {
  cursor: pointer;
}

.text-input {
  cursor: text;
}

.draggable-item {
  cursor: move;
}

此外，CSS 还允许使用自定义图片作为鼠标光标。这通过cursor属性的url()函数来实现，后面跟上图片的路径（通常是.cur或.png格式的透明背景图片），并可以指定备选的光标样式（以防自定义光标不显示）：

css

.custom-cursor {
  cursor: url("my-cursor.cur"), auto;
}

注意，使用自定义图片作为光标时，应确保图片尺寸适中（一般建议不超过 32x32 像素），以避免在屏幕上显示过大或过小。

示例

假设有一个按钮，当用户将鼠标悬停在其上时，希望鼠标指针变为手形，可以这样设置：

css

.button {
  cursor: pointer;
}

在 HTML 中，这个按钮可能如下所示：

html

<button class="button">点击我</button>

通过这种方式，可以轻松地根据需要对网页中的鼠标样式进行自定义和设置。

CSS 布局

标准流布局

CSS 标准流布局，又称为文档流或正常流，是浏览器在渲染显示网页内容时默认采用的一套排版规则。这套规则规定了应该以何种方式排列元素，是网页布局的基础。以下是对 CSS 标准流布局的详细展开：

基本概念

标准流：指 HTML 文档中的元素按照其在文档中出现的顺序进行排列和显示的过程。默认情况下，文档中的元素会按照标准流进行布局。
块级元素：如<div>、<p>、<h1>等，它们会独占一行，从上到下顺序排列。块级元素的宽度默认为其父元素的 100%，除非设置了其他宽度值。
行内元素：如<span>、<a>、<img>等，它们会在同一行内从左到右顺序排列，直到遇到父元素的边缘则自动换行。行内元素的高度和宽度一般与内容一致，无法直接设置其宽度和高度（除非改变其 display 属性）。

排版规则

块级元素：
- 垂直布局，从上到下顺序排列。
- 每个块级元素都会在其前面和后面生成“断行”（break），即每个块级元素都会独占一行。
- 宽度默认为父元素的 100%，除非设置了其他宽度值。
行内元素：
- 水平布局，从左到右顺序排列。
- 如果一行内空间不足，则会自动换行到下一行继续排列。
- 高度和宽度一般与内容一致，无法直接设置（除非改变其 display 属性为inline-block或block）。

外边距合并（Margin Collapsing）

在垂直方向上，两个相邻元素的外边距（margin）可能会合并为一个外边距，这种现象称为外边距合并。需要注意的是，浮动元素和绝对定位元素之间不会发生外边距合并。

布局特点

自动布局：标准流布局是自动的，不需要额外的 CSS 代码来控制元素的排列方式。
简单直观：对于简单的网页布局，标准流布局足够使用，且易于理解和实现。
限制：然而，标准流布局也有其局限性，例如无法精确地控制元素的位置和大小，对于复杂的网页布局可能需要使用浮动、定位等其他布局方式。

应用场景

标准流布局适用于大多数简单的网页布局场景，如文本内容的排列、简单的图片展示等。然而，对于需要精确控制元素位置和大小的复杂布局，可能需要结合浮动、定位等其他布局方式来实现。

综上所述，CSS 标准流布局是网页布局的基础，它规定了元素在文档中的排列方式。通过理解和运用标准流布局的规则和特点，可以高效地实现简单的网页布局。

浮动布局

浮动，顾名思义，元素像是漂浮起来一样，让出了原本属于自己的空间，可以让后面的元素遵循标准流排版规则自动“顶替”那块空间，我们把浮动元素的这种不再占据原本自身空间的现象称为“脱离文档流”。

使用float：left 或 float:right属性可以让元素实现向左或向右浮动。

MDN 在线示例

浮动最初设计用途是为了解决文字环绕图片的问题。在早期的 Web 开发中，浮动（Float）被用来让文字能够自然地环绕在图片或其他块级元素的周围，从而实现图文混排的效果，类似于报纸或杂志中的图文布局。这种设计初衷确保了浮动元素（如图片）在页面中不会遮挡住周围的文字，而是让文字能够按照一定的规则（如左对齐或右对齐）环绕在浮动元素周围。

随着 Web 开发的演进，浮动的使用范围逐渐扩大，不再仅仅局限于图文混排。开发人员发现，通过给元素设置浮动属性，可以实现更复杂的页面布局效果，比如让多个块级元素并排排列，从而创建出导航栏、图片画廊等水平排列的布局。然而，尽管浮动在布局中具有一定的灵活性和实用性，但它也带来了一些复杂性和限制，比如父元素高度塌陷问题等。

现代 CSS 提供了更先进的布局方法，如 Flexbox 和 Grid 布局，这些方法在解决复杂布局问题方面更加高效和灵活。

定位布局

定位布局在 CSS 中是一个重要的概念，它允许开发者对元素的位置进行精确控制，使其脱离正常的文档流并按照特定的规则进行排列。以下是对定位布局的详细展开：

定位属性（position）

定位属性position是 CSS 中用于设置元素定位方式的属性，其取值主要有以下几种：

static（静态定位）：
- 默认值，元素按照正常的文档流进行排列。
- top、right、bottom、left和z-index属性对 static 定位的元素无效。
relative（相对定位）：
- 元素首先按照正常文档流进行排列，然后根据top、right、bottom、left属性进行偏移。
- 偏移是相对于元素自身的原始位置进行的。
- 偏移后的元素仍然占据原来的空间，即不会脱离文档流。
absolute（绝对定位）：
- 元素完全脱离文档流，不再占据空间。
- 元素的位置是相对于其最近的已定位（即非 static 定位）的祖先元素进行定位。如果没有这样的祖先元素，则相对于初始包含块（通常是<html>元素）进行定位。
- 可以通过top、right、bottom、left属性来指定元素的具体位置。
fixed（固定定位）：
- 元素脱离文档流，并且相对于浏览器窗口进行定位。
- 即使页面滚动，元素也会保持在固定位置不动。
- 可以通过top、right、bottom、left属性来指定元素的具体位置。
sticky（粘性定位）：
- 粘性定位是一种特殊的定位方式，它是基于用户的滚动位置来生效的。它允许元素在特定条件下表现出类似于固定定位（fixed）和相对定位（relative）的混合效果。Sticky 布局的核心在于，它允许元素在页面滚动时，在达到某个特定位置（通常是视口边缘）之前表现为相对定位，而在达到或超过这个位置后则转变为固定定位。这种布局方式在实现一些需要元素在滚动时保持可见性但又不想完全脱离文档流的场景时非常有用。
- 元素在滚动过程中，会根据设置的阈值（如top属性）在相对定位和固定定位之间切换。
- 兼容性相对较好，但在一些老旧浏览器中可能不被支持。

定位布局的特点

精确控制：定位布局允许开发者对元素的位置进行精确控制，无论是水平方向还是垂直方向。
脱离文档流：绝对定位和固定定位的元素会脱离文档流，不再占据原来的空间。这可能导致父元素的高度塌陷等问题，需要特别注意。
相对参照：相对定位和绝对定位的元素在定位时都会有一个参照物。相对定位是相对于元素自身的原始位置进行偏移；而绝对定位则是相对于其最近的已定位祖先元素或初始包含块进行定位。
堆叠顺序：当多个元素发生重叠时，可以通过z-index属性来指定它们的堆叠顺序。z-index值越大，元素越靠上。

定位布局的应用场景

固定导航栏：使用固定定位可以实现导航栏在页面滚动时始终保持在屏幕顶部的效果。
弹窗和提示框：通过绝对定位或固定定位，可以将弹窗和提示框放置在页面上的任意位置，并确保它们不会遮挡住页面上的重要内容。
图文混排：虽然定位布局不是图文混排的首选方式（图文混排通常使用浮动或 Flexbox 等布局方式），但在某些特殊情况下，定位布局也可以用来实现图文混排的效果。
复杂布局：对于一些复杂的页面布局，如多栏布局、网格布局等，定位布局可以作为辅助手段来实现更精细的布局控制。

总之，定位布局是 CSS 中非常重要的一个概念，它允许开发者对元素的位置进行精确控制，并通过不同的定位方式来实现不同的布局效果。在实际开发中，需要根据具体需求和场景来选择合适的定位方式。

弹性盒布局（Flex）

Flex 布局，全称为“Flexible Box Layout”，意为“弹性盒布局”，是 CSS3 新增的一种布局方式。这种布局方式旨在提供一种更加有效的方式来对容器中的子元素进行排列、对齐和分配空白空间，即使它们的大小未知或动态变化。以下是对 Flex 布局的详细展开：

Flex 布局的基本概念

Flex 容器（Flex Container）：采用 Flex 布局的元素被称为 Flex 容器，简称“容器”。容器的所有子元素自动成为容器成员，称为 Flex 项目（Flex Item），简称“项目”。
主轴（Main Axis）与交叉轴（Cross Axis）：容器默认存在两根轴，水平方向为主轴，垂直方向为交叉轴。项目默认沿主轴排列，但可以通过设置flex-direction属性来改变主轴的方向。

Flex 布局的主要属性

容器属性

flex-direction：决定主轴的方向（即项目的排列方向）。可选值有row（水平向右，默认值）、row-reverse（水平向左）、column（垂直向下）、column-reverse（垂直向上）。
flex-wrap：定义换行情况。可选值有nowrap（不换行，默认值）、wrap（换行，第一行在上方）、wrap-reverse（换行，第一行在下方）。
flex-flow：flex-direction和flex-wrap的简写属性，默认值为row nowrap。
justify-content：定义项目在主轴上的对齐方式。可选值有flex-start（起点对齐）、flex-end（终点对齐）、center（居中对齐）、space-between（两端对齐，子元素间隔相等）、space-around（每个子元素两侧的间隔相等，所以，项目之间的间隔比项目与边框的间隔大一倍。）。
align-items：定义在交叉轴上的对齐方式。可选值有flex-start（起点对齐）、flex-end（终点对齐）、center（中点对齐）、baseline（基线对齐）、stretch（默认值，如果子元素未设置高度或设为 auto，将占满整个容器）。
align-content：定义多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。可选值有flex-start、flex-end、center、space-between、space-around、stretch（默认值）。

项目属性

order：定义项目的排列顺序。数值越小，排列越靠前，默认为 0。
flex-grow：定义项目的放大比例，默认为 0，即如果存在剩余空间，也不放大。
flex-shrink：定义了项目的缩小比例，默认为 1，即如果空间不足，该项目将缩小。
flex-basis：定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
flex：flex-grow、flex-shrink和flex-basis的简写，默认值为0 1 auto。后两个属性可选。
align-self：允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

Flex 布局的优点

灵活性：Flex 布局允许项目在容器中灵活地扩展和收缩，以填充可用空间或调整大小以适应内容。
对齐方式多样：Flex 布局提供了丰富的对齐选项，可以轻松地实现水平和垂直对齐。
简化布局：Flex 布局使得复杂的布局变得简单，减少了传统布局方式中需要使用的浮动、定位等技巧。
响应式布局：Flex 布局能够很好地适应不同屏幕尺寸和分辨率，实现响应式布局。

Flex 布局的缺点

浏览器兼容性：虽然现代浏览器普遍支持 Flex 布局，但在一些老旧浏览器中可能存在兼容性问题。特别是对于 IE9 及以下的浏览器，需要特别注意。

总的来说，Flex 布局是一种强大且灵活的布局方式，能够应对各种复杂的布局需求。在开发过程中，合理使用 Flex 布局可以大大提高开发效率和页面性能。

Flex 布局教程：语法篇

网格布局（Grid）

网格（Grid）布局是 CSS 中的一个强大布局系统，它允许你通过创建一个由行和列组成的网格来在页面上组织和定位元素。与传统的布局方法（如浮动、定位或 Flexbox）相比，Grid 布局提供了一种更加直观和灵活的方式来设计复杂的网页布局。

网格布局的基本概念

容器（Grid Container）：任何设置了display: grid或display: inline-grid的元素都会成为一个网格容器，其子元素则自动成为网格项（Grid Items）。
网格项（Grid Items）：网格容器的直接子元素自动成为网格项。它们可以通过网格线（Grid Lines）被放置在网格的特定位置。
网格线（Grid Lines）：网格线定义了网格的边界和结构。它们沿着网格的轴（水平和垂直）创建，用于分隔网格的行和列。
网格区域（Grid Areas）：由四条网格线围绕的网格空间称为网格区域。你可以通过命名网格区域来更容易地引用和布局网格项。
单元格（Grid Cells）、行（Grid Rows）和列（Grid Columns）：网格由一系列的行和列组成，每个行和列的交叉点形成一个单元格。网格项可以跨越多个单元格。

网格布局的属性

网格布局通过一系列 CSS 属性来控制，这些属性可以应用于网格容器和网格项。

网格容器属性

display: grid | inline-grid：声明一个元素为网格容器。
grid-template-columns 和 grid-template-rows：定义网格的列和行的尺寸。
grid-template-areas：通过命名区域来定义网格的模板。
grid-gap（现已被row-gap和column-gap替代）和gap：设置网格项之间的间隙。
justify-items、align-items：控制网格项在单元格内的对齐方式。
justify-content、align-content：控制网格在容器内的对齐方式，特别是当网格的总大小小于容器的大小时。

网格项属性

grid-column-start、grid-column-end、grid-row-start、grid-row-end：指定网格项在网格中的位置。
grid-column 和 grid-row：是grid-column-start/grid-column-end和grid-row-start/grid-row-end的简写。
grid-area：指定网格项的名称或位置，如果是一个名称，则网格项会放置到对应的命名网格区域。
justify-self、align-self：控制单个网格项在其单元格内的对齐方式。

网格布局的优势

二维布局：Grid 布局同时处理行和列，非常适合复杂的二维布局。
灵活性：可以轻松地重新排列网格项，改变它们的大小，甚至跨越多个行或列。
响应式设计：通过媒体查询和 Grid 的重复功能，可以轻松创建响应式布局。
减少复杂性：与传统的布局方法相比，Grid 布局通常可以使代码更简洁、更易于理解。

总之，Grid 布局是现代 Web 开发中不可或缺的工具，它提供了一种高效、灵活且强大的方式来设计和实现复杂的网页布局。

CSS3 新特性

边框圆角（Border-radius）

功能：实现元素的圆角效果，可以单独设置每个角的圆角半径。
示例：.div { border: solid 5px blue; border-radius: 20px; background-color: skyblue; }
兼容性：现代浏览器广泛支持，早期浏览器可能需要添加特定前缀（如-moz-、-o-、-webkit-）。

阴影（Box-shadow & Text-shadow）

功能：box-shadow为元素添加阴影效果，text-shadow为文字添加阴影效果。
示例：
- Box-shadow: .box { box-shadow: 10px 10px 5px grey; }
Text-shadow: .text { text-shadow: 2px 2px 2px grey; }
特性：可以设定阴影的模糊半径、扩展半径和颜色，以及是否内阴影。

渐变（Gradient）

功能：实现背景或边框的渐变效果，包括线性渐变（linear-gradient）和径向渐变（radial-gradient）。
示例：.grad { background: linear-gradient(to bottom, #000000, #ffffff); }
兼容性：现代浏览器支持标准语法，早期浏览器可能需要特定前缀。

变换（Transform）

功能：实现元素的旋转、缩放、位移、倾斜等变换效果。
示例：.transform-example { transform: rotate(45deg) scale(1.5); }
用途：增强用户体验，实现复杂的视觉效果。

过渡（Transition）

功能：实现元素在不同状态间平滑过渡的效果。
示例：.transition-example { transition: background-color 1s ease; }
用途：常用于悬停效果、点击效果等。

动画（Animation）

功能：通过@keyframes规则定义动画序列，使用animation属性将动画应用到元素上。

示例：

css

@keyframes myanimation {
  from {
    background-color: red;
  }
  to {
    background-color: yellow;
  }
}
.animation-example {
  animation: myanimation 2s ease infinite;
}

用途：创建复杂的动态效果，提升页面的吸引力和互动性。

媒体查询（@media）

功能：允许根据不同的媒体类型和条件应用不同的样式规则。
示例：@media screen and (max-width: 768px) { /* 样式 */ }
用途：实现响应式网页设计，确保网页在不同设备上的良好显示。

CSS 框架简介

CSS 框架是一种预先设计好的样式库，旨在简化和加速网页开发过程。具体来说，CSS 框架提供了一组已经定义好的 CSS 样式和布局，开发者可以直接使用这些样式来构建网页，而无需从头开始编写 CSS 代码。以下是关于 CSS 框架的详细解释：

定义

CSS 框架是一系列 CSS 文件的集合体，包含了基本的元素重置、页面排版、网格布局、表单样式、通用规则等代码块，用于简化 web 前端开发的工作，提高工作效率。这些框架通过抽象出常用的 CSS 样式，提高了代码的再可用性和移植性，并且大多数框架都具备高兼容性，可以兼容流行的浏览器。

特征

抽象出常用的 CSS 样式：CSS 框架将常用的样式抽象成模块，开发者可以直接引用这些模块，避免了重复编写相同的代码。
高兼容性：大多数 CSS 框架都经过优化和测试，以确保在不同的浏览器和设备上都能正常显示。
包含布局模板：CSS 框架通常包含一系列布局模板，如栅格系统和响应式设计，方便开发者快速搭建页面布局。
丰富的组件库：除了基本的布局和样式外，一些 CSS 框架还提供了丰富的组件库，如按钮、导航栏、表格等，这些组件可以直接使用或进行定制。
文档和社区支持：大多数 CSS 框架都提供了详尽的文档和社区支持，方便开发者学习和解决问题。

优点

提高开发效率：通过使用 CSS 框架，开发者可以快速搭建出符合要求的网页，大大提高了开发效率。
减少出错概率：CSS 框架中的样式和布局都经过测试和验证，使用它们可以减少因样式错误或布局问题导致的错误。
统一风格：CSS 框架提供了一致的样式和布局规范，有助于保持网站或应用的整体风格一致性。
易于维护和扩展：由于 CSS 框架具有高度的模块化和可定制性，因此易于维护和扩展。

缺点

学习成本：对于初学者来说，需要花费一定的时间来学习和掌握 CSS 框架的使用方法和规范。
框架依赖：过度依赖 CSS 框架可能会限制开发者的创造力和灵活性，同时也可能带来一些不必要的代码冗余。
性能问题：在一些情况下，使用 CSS 框架可能会增加网页的加载时间和文件大小，从而影响网页的性能。

流行框架举例

Bootstrap：由 Twitter 推出的一个用于前端开发的开源工具包，以其简洁、直观和强悍的特点而广受欢迎。
Tailwind CSS：Tailwind CSS 是一个实用程序优先的 CSS 框架，由 Adam Wathan 和 Steve Schoger 开发，于 2017 年发布。它提供了一组原子化的 CSS 类，允许开发者通过组合这些类来创建自定义的 UI。
Foundation：注重自定义性和可扩展性，适合需要更灵活布局和设计的项目。
Bulma：基于 Flexbox 的开源、响应式 CSS 框架，以其卓越的内置功能和模块化设计方法而闻名。

总之，CSS 框架是一种强大的工具，能够显著提高网页开发的效率和质量。然而，开发者在使用时也需要注意其潜在的缺点，并根据项目需求和个人喜好选择合适的框架。

综合练习题

目标：检验学生对 CSS 样式、盒模型、布局技术的理解和使用。

要求：完成以下文章列表页面的排版显示效果：

主体水平居中显示
文章标题必须是可以点击跳转的链接
页面背景颜色#f4f4f4
主体背景颜色#ffffff,
文章标题字体颜色#333333
文章简介字体颜色#666666
文章封面图片大小150x80
发布日期字体颜色#aaaaaa
文章数量足够多时，页面产生滚动条

3.文章列表排版.png

三、样式进阶和布局 ​

内容概述 ​

教学目标 ​

具体内容 ​

CSS 样式进阶 ​

F12: 元素检查和样式调试 ​

再谈区块元素——元素的显示模式（block/inline/inline-block） ​

块级元素（block） ​

行内元素（内联元素 inline） ​

行内块元素(inline-block) ​

修改元素的显示模式 ​

元素的默认样式 ​

margin 的注意事项 ​

内容溢出和滚动条 ​

行内元素之间的空白问题 ​

行内块的幽灵空白问题 ​

背景区域 ​

隐藏元素的两种方式 ​

样式的继承 ​

鼠标的样式 ​

CSS 布局 ​

标准流布局 ​

浮动布局 ​

定位布局 ​

弹性盒布局（Flex） ​

网格布局（Grid） ​

CSS3 新特性 ​

边框圆角（Border-radius） ​

阴影（Box-shadow & Text-shadow） ​

渐变（Gradient） ​

变换（Transform） ​

过渡（Transition） ​

动画（Animation） ​

媒体查询（@media） ​

CSS 框架简介 ​

定义 ​

特征 ​

优点 ​

缺点 ​

流行框架举例 ​

综合练习题 ​

三、样式进阶和布局

内容概述

教学目标

具体内容

CSS 样式进阶

F12: 元素检查和样式调试

再谈区块元素——元素的显示模式（block/inline/inline-block）

块级元素（block）

行内元素（内联元素 inline）

行内块元素(inline-block)

修改元素的显示模式

元素的默认样式

margin 的注意事项

内容溢出和滚动条

行内元素之间的空白问题

行内块的幽灵空白问题

背景区域

隐藏元素的两种方式

样式的继承

鼠标的样式

CSS 布局

标准流布局

浮动布局

定位布局

弹性盒布局（Flex）

网格布局（Grid）

CSS3 新特性

边框圆角（Border-radius）

阴影（Box-shadow & Text-shadow）

渐变（Gradient）

变换（Transform）

过渡（Transition）

动画（Animation）

媒体查询（@media）

CSS 框架简介

定义

特征

优点

缺点

流行框架举例

综合练习题