视频教程： 117_CSS_盒子模型的组成部分

1. 盒子模型的组成

在CSS中，盒子模型是理解布局的关键概念，它描述了如何计算一个元素的总宽度和高度。一个盒子的组成部分包括：

1. 内容（Content）：
   • 这是盒子模型的中心部分，包括元素的内容，如文本、图片等
   • width 和 height 属性设置内容区域的宽度和高度
2. 内边距（Padding）：
   • 内边距是内容周围的空白区域，位于内容和边框之间
   • 可以使用 padding 属性来设置，该属性可以接受一到四个值（上、右、下、左）
   • 也可以单独设置 padding-top、padding-right、padding-bottom、padding-left
3. 边框（Border）：
   • 边框位于内边距的外围，它包裹着内边距和内容
   • 可以使用 border 属性来设置边框的宽度、样式和颜色
   • 也可以单独设置 border-width、border-style、border-color，或者更具体地设置 border-top、border-right、border-bottom、border-left
4. 外边距（Margin）：
   • 外边距是盒子与其他元素之间的空白区域
   • 可以使用 margin 属性来设置，与内边距类似，可以接受一到四个值
   • 也可以单独设置 margin-top、margin-right、margin-bottom、margin-left

1.1 内容区

在CSS盒子模型中，内容区（Content Area）是指盒子模型的核心部分，它包含了元素的实际内容，例如文本、图像或视频。以下是关于内容区的几个关键点：

1. 尺寸：
   • 内容区的宽度（Width）和高度（Height）可以通过CSS的 width 和 height 属性来设置
   • 如果没有显式设置这些属性，内容区的大小将根据其内容的自然大小来决定
2. 定位：
   • 内容区位于内边距（Padding）内部，如果有设置的话
   • 它被内边距、边框（Border）和外边距（Margin）所包围
3. 背景：
   • 内容区的背景可以通过 background-color、background-image、background-repeat、background-position 和 background-size 等属性来设置
   • 默认情况下，背景延伸到内容区，但可以通过 background-clip 属性来改变这一行为
4. 溢出：
   • 如果内容超出了内容区所设定的尺寸，可以使用 overflow 属性来控制如何处理溢出的内容。可用的值包括 visible（默认值，内容不会被裁剪，呈现在盒子外）、hidden（溢出的内容会被裁剪，不显示）、scroll（提供滚动条以便查看所有内容）和 auto（根据需要提供滚动条）
5. 盒子大小：
   • 在标准盒模型中，width 和 height 属性只定义内容区的尺寸，不包括内边距、边框或外边距
   • 使用 box-sizing 属性可以改变这种行为。例如，box-sizing: border-box; 会使得 width 和 height 属性包括了内容区、内边距和边框的尺寸

1.2 默认宽度

• 默认宽度指的是不设置 width 属性时，元素所呈现出来的宽度
• 总宽度 = 父元素的 content - 自身的左右 margin
• 内容区的宽度 = 父元素的 content - 自身的左右margin - 自身的左右 border - 自身的左右 padding

在CSS中，大多数元素的默认宽度并不是固定的，而是由其内容的大小决定的。这意味着如果没有显式设置宽度（width）属性，元素的宽度将根据以下因素自动调整：

1. 内容的宽度：元素的宽度会扩展到足以容纳其所有内容。如果内容是一行文本，那么元素的宽度将至少与这行文本一样宽
2. 内边距（Padding）：如果设置了内边距，元素的宽度将包括内容的宽度加上左右内边距
3. 边框（Border）：如果设置了边框，元素的宽度还将包括边框的宽度
4. 外边距（Margin）：外边距不计算在元素的宽度内，但它会影响元素在页面上的布局

对于块级元素（如<div>、<p>、<h1>-<h6>等），如果没有设置宽度，它们通常会扩展到填满其父元素的宽度（减去任何内边距、边框和外边距）。这就是为什么块级元素默认会占据整个可用水平空间，除非它们被设置了宽度或者被浮动、定位等

1.3 内边距

在CSS盒子模型中，内边距（Padding）是指盒子内容区与盒子边框之间的空间。内边距用于增加内容与边框之间的距离，从而提高内容的可读性和美观性。以下是关于内边距的一些关键点：

1.3.1 内边距属性

• padding-top
• padding-right
• padding-bottom
• padding-left

1.3.2 复合属性

内边距属性可以单独设置，也可以使用复合属性 padding 一次性设置所有四个方向的内边距

padding 可以接受以下几种值：

• 一个值：同时设置上、右、下、左四个方向的内边距
• 两个值：第一个值设置上下内边距，第二个值设置左右内边距
• 三个值：第一个值设置上内边距，第二个值设置左右内边距，第三个值设置下内边距
• 四个值：按照顺时针顺序分别设置上、右、下、左四个方向的内边距

1.3.3 单位

内边距可以使用多种长度单位来设置，如像素（px）、百分比（%）、em、rem 等

1.3.4 注意事项

• 内边距是透明的，并且会显示元素的背景颜色或背景图像
• 内边距会影响元素的总宽度和高度。在标准盒模型中，元素的 width 和 height 属性只包括内容区，不包括内边距和边框。但在 box-sizing: border-box; 模式下，width 和 height 属性包括了内容区、内边距和边框
• 内边距不能为负值

1.4 边框

在CSS盒子模型中，边框（Border）是围绕在元素内容和内边距外围的线条。边框可以用来分隔不同的元素，增加视觉效果，或者强调某个元素。以下是关于边框的一些关键点：

1.4.1 边框属性

• border-width：设置边框的宽度
• border-style：设置边框的样式（如实线、虚线、点线等）
• border-color：设置边框的颜色

1.4.2 复合属性

边框属性可以单独设置，也可以使用简写属性 border 一次性设置所有四个边框的宽度、样式和颜色

border 可以接受以下几种值：

• 一个值：同时设置所有四个边框的样式和颜色，宽度默认为中等（medium）
• 两个值：第一个值设置宽度，第二个值设置样式和颜色
• 三个值：第一个值设置宽度，第二个值设置样式，第三个值设置颜色

1.4.3 单方向边框

也可以单独设置每个方向的边框：

• border-top
• border-right
• border-bottom
• border-left

这些属性同样可以接受一个、两个或三个值

1.4.4 边框样式

边框样式可以设置为以下几种值：

• none：无边框
• hidden：与 none 相同，但在表格中可能有所不同
• dotted：点线边框
• dashed：虚线边框
• solid：实线边框
• double：双线边框

1.4.5 注意事项

• 边框的宽度会影响元素的总宽度和高度。在标准盒模型中，边框宽度加上元素的 width 和 height 以及内边距和外边距，共同决定了元素在页面上的实际大小
• 边框的颜色默认与元素文本颜色相同，除非另外指定
• 边框样式不能继承，必须显式设置

1.5 外边距

在CSS盒子模型中，外边距（Margin）是围绕在元素边框边缘的空白区域。外边距用于控制元素之间的空间，以及元素与包含块（如父元素或页面边缘）之间的空间。以下是关于外边距的一些关键点：

1.5.1 外边距属性

• margin-top：设置元素顶部的外边距
• margin-right：设置元素右侧的外边距
• margin-bottom：设置元素底部的外边距
• margin-left：设置元素左侧的外边距

1.5.2 复合属性

外边距属性可以单独设置，也可以使用复合属性 margin 一次性设置所有四个方向的外边距

margin 可以接受以下几种值：

• 一个值：同时设置所有四个方向的外边距。
• 两个值：第一个值设置顶部和底部的外边距，第二个值设置右侧和左侧的外边距
• 三个值：第一个值设置顶部的外边距，第二个值设置左右两侧的外边距，第三个值设置底部的外边距
• 四个值：按照顺时针顺序分别设置顶部、右侧、底部和左侧的外边距

1.5.3 注意事项

• 外边距可以是负值，这会导致元素重叠
• 外边距的单位可以是像素（px）、百分比（%）或其他CSS长度单位
• 上下方向的外边距对于行内元素（inline elements）不起作用，除非将其设置为 display: inline-block; 或 `display: block;
• 外边距不会影响元素的内部空间，只影响元素与其他元素之间的空间
• 在某些情况下使用 margin: auto; 可以实现水平居中布局

1.6 外边距塌陷问题

在CSS中，外边距塌陷（Margin Collapse）是指相邻的垂直外边距（margin）会合并为一个外边距，这个合并后的外边距等于两个相邻外边距中的较大者。这种现象只会发生在垂直方向上，即 margin-top 与 margin-bottom 之间。以下是关于外边距塌陷的一些详细说明：

1.6.1 发生外边距塌陷的条件

1. 常规流中的块级盒子：只有处于常规文档流中的块级盒子（不包括浮动和绝对定位的元素）才会发生外边距塌陷
2. 相邻元素：垂直方向上相邻的元素之间会发生外边距塌陷。这里的“相邻”可以是兄弟元素之间，也可以是父子元素之间
3. 没有内容分隔：如果两个元素之间没有内容、边框或内边距分隔，它们的外边距会塌陷

1.6.2 外边距塌陷的规则

1. 正边距：如果两个相邻的外边距都是正数，那么塌陷后的外边距等于两个外边距中的较大者
2. 一正一负：如果两个相邻的外边距一正一负，塌陷后的外边距是两个外边距的和
3. 都是负边距：如果两个相邻的外边距都是负数，塌陷后的外边距等于两个外边距中的较小者（绝对值较大者）

1.6.3 如何避免外边距塌陷

1. 使用边框或内边距：在元素之间添加边框（border）或内边距（padding）可以阻止外边距塌陷
2. 创建BFC：通过创建块级格式化上下文（BFC），可以阻止外边距塌陷。例如，设置元素的 overflow 属性为非 visible 值（如 hidden、scroll 或 auto）可以创建一个新的BFC
3. 浮动和定位：浮动元素（float）和绝对定位元素（position: absolute 或 position: fixed）不会与其他元素发生外边距塌陷

2. 内容溢出

在CSS中，内容溢出（Content Overflow）是指当元素的内容超出了为其分配的尺寸（宽度或高度）时发生的情况。以下是一些关于内容溢出的关键点以及如何处理它：

2.1 内容溢出的情景

1. 宽度溢出：当元素的宽度不足以容纳其所有内容时，内容会从元素的右侧溢出
2. 高度溢出：当元素的高度不足以容纳其所有内容时，内容会从元素的底部溢出

2.2 处理内容溢出的CSS属性

2.2.1 overflow

overflow 属性定义了如果内容溢出元素框时应该发生的事情，有以下几个值：

• visible：默认值，内容会溢出元素框，不剪切也不添加滚动条
• hidden：内容会被剪切，并且不会显示溢出的部分
• scroll：内容会被剪切，但浏览器会添加滚动条以便查看溢出的内容
• auto：如果内容溢出，浏览器会添加滚动条；如果没有溢出，则不添加滚动条

2.2.2 overflow-x和overflow-y

overflow-x 和 overflow-y 属性分别控制元素在水平方向和垂直方向上的内容溢出行为

2.3 与内容溢出相关的其它属性

2.3.1 text-overflow

当文本溢出包含元素时，这个属性可以指定如何显示省略符号（…）。通常与 white-space: nowrap; 和 overflow: hidden; 一起使用

.element {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

2.3.2 resize

resize 属性允许用户通过拖动来调整元素的尺寸，但仅在 overflow 属性不为 visible 时有效

.element {
  overflow: auto;
  resize: both; /* 或者 horizontal, vertical */
}

3. 隐藏元素的方式

在CSS中，有多种方法可以用来隐藏元素，每种方法都有其特定的用途和效果。以下是一些常用的方法：

3.1 display: none;

元素会被完全从文档流中移除，不占据任何空间，也不会响应任何事件

.hidden {
  display: none;
}

3.2 visibility: hidden;

元素会保持其空间，但不会显示，也不会响应任何事件

.hidden {
  visibility: hidden;
}

3.3 opacity: 0;

元素会变得完全透明，但仍然占据空间，并且可以响应事件

.hidden {
  opacity: 0;
}

3.4 height: 0; width: 0; overflow: hidden;

将元素的高度和宽度设置为0，并隐藏溢出的内容

.hidden {
  height: 0;
  width: 0;
  overflow: hidden;
}

4. 样式的继承

能继承的属性一般都是不影响布局的，也就是和盒子模型无关的属性

在CSS中，样式继承是指某些CSS属性值可以从父元素传递到子元素。继承是CSS的一个基本特性，它允许开发者避免重复编写相同的样式规则

4.1 继承的属性

不是所有的CSS属性都是可继承的。以下是一些常见的可继承属性：

• 字体相关的属性：font-family, font-size, font-style, font-variant, font-weight, font, line-height
• 文本相关的属性：color, text-align, text-indent, text-transform, white-space, word-spacing
• 列表相关的属性：list-style, list-style-type, list-style-position, list-style-image
• 表格相关的属性：border-collapse, border-spacing
• 其他属性：visibility, cursor

4.2 继承的规则

• 直接继承：子元素直接继承父元素的样式
• 无继承的属性：有些属性默认是不可继承的，例如border, margin, padding, background等
• 继承的覆盖：如果子元素有自己的样式规则，它会覆盖继承来的样式

4.3 控制继承

inherit：可以将不可继承的属性设置为继承自父元素

.child {
  color: inherit; /* 强制继承父元素的color属性 */
}

initial：可以将属性设置为它的初始值，忽略继承

.child {
  color: initial; /* 使用color属性的默认值 */
}

unset：如果属性是可继承的，则unset等同于inherit；如果属性是不可继承的，则unset等同于initial

.child {
  color: unset; /* 如果color可继承，则继承父元素；否则使用默认值 */
}

revert：将属性重置为浏览器的默认样式，而不是CSS规范定义的默认值

5. 扩展：浏览器控制台中Elements栏目中各个区域的含义

视频教程：128_CSS_样式的继承

---

打开浏览器的控制台时，在 Elements 栏目中可以看到几个区域，各个区域的含义如下：

• element.style：元素的内联样式，也就是直接在元素上写的样式，例如<div style="background-color: white"></div>
• #d3-index.css：通过外部 CSS 文件引入的样式
• #d3-html：在源 HTML 文件中书写的样式
• user agent stylesheet：浏览器为元素赋予的默认样式
• inherited from div#2：从祖先元素继承下来的样式

6. 元素的默认样式

• 优先级：元素的默认样式 > 继承的样式
• 如果要重置元素的默认样式，选择器需要直接选择器到该元素

浏览器为不同的HTML标签提供了一套基础的样式规则，例如：

• body 标签通常会有一定的外边距（margin），这使得页面内容不会紧贴浏览器窗口的边缘
• p 标签（段落）通常会有一些上下外边距（margin-top 和 margin-bottom），以便段落之间有一定的间距
• 列表项（如 ul, ol）会有项目符号或编号，并且列表项本身也会有内边距（padding）和外边距（margin）
• 表格元素（如 table, th, td）会有一定的边框、填充以及可能的间距设置
• h1 到 h6 标题标签会有较大的字体大小以及额外的外边距

7. 布局技巧

视频教程：130_CSS_布局小技巧

---

7.1 行内元素、行内块元素可以被父元素当作文本处理

可以像处理文本对齐一样，去处理行内元素、行内块在父元素中的对齐

例如 text-align、line-height、text-indent 等

7.2 如何让子元素在父元素中水平居中

• 若子元素为块元素，给子元素加上：margin:0 auto;
• 若子元素为行内元素、行内块元素，给父元素加上：text-align:center

7.3 如何让子元素在父元素中垂直居中

• 若子元素为块元素，给子元素加上: margin-top，具体的值为：(父元素 content - 子元素盒子总高）/ 2
• 若子元素为行内元素、行内块元素
  • 让父元素的 height = line-height，每个子元素都加上：vertical-align:middle;
  • 若想绝对垂直居中，设置父元素的 font-size 属性为 0

8. 元素之间的空白问题

在HTML和CSS中，元素之间的空白问题通常指的是元素之间出现的额外空间，这可能是由于HTML源代码中的空白字符（如空格、制表符、换行符）造成的。以下是一些关于CSS元素之间空白问题的常见情况和解决方案：

8.1 空白产生的原因

在 HTML 中将几个行内元素（如<span>、<a>、<img>）写在一起，并在它们之间或周围放置空格或换行时，浏览器会在这些元素之间渲染出空白间隙

8.2 解决方案

将父元素的font-size设置为0，然后在子元素中重新设置字体大小。这会消除内联元素之间的空白，因为空白字符的宽度会变成0

9. 行内块元素的幽灵空白问题

视频教程：132_CSS_行内块的幽灵空白问题

9.1 问题呈现

图片底部和容器底部之间有空白

9.2 问题产生的原因

行内块元素与文本的基线对齐，而文本的基线与文本最底端之间有一定距离

9.3 解决方案

1. 给行内块元素设置 vertical-align ，值不为 baseline 即可，设置为 middle、bottom、top 均可
2. 若父元素中只有一张图片，设置图片为 display:block
3. 给父元素设置 font-size:0，如果该行内块内部还有文本，需要针对文本设置 font-size 属性