Published on

CSS盒模型

Authors
  • avatar
    Name
    青雲
    Twitter

CSS盒模型是CSS中一个基本概念，设CSS设计和布局的基础。每个HTML元素可以看作是盒子，并且每个盒子具有特定的属性，这些属性定义了元素的布局和尺寸，以及元素之间的间距与排列方式。

基本概念

在讨论CSS盒模型之前，我们需要了解CSS中的几个基本概念：内容（Content）、内边距（Padding）、外边距（Margin）和边框（Border）。

  1. 内容（Content）：
    • 这是盒模型的中心，表示元素的实际内容区域，可以包含文本、图像或其他内容。
    • 内容区域的尺寸可以通过设置width和height属性来控制。
  2. 内边距（Padding）：
    • 内边距位于内容区域的周围，是内容与边框之间的空间。
    • 内边距可以通过padding-top、padding-right、padding-bottom、padding-left来分别设置，或者通过padding属性一次性设置所有四个方向的内边距。
  3. 边框（Border）：
    • 边框环绕在内边距的外侧，是将元素与外界分隔开来的实线、虚线或其他样式的线条。
    • 边框的宽度、样式和颜色可以分别通过border-width、border-style、border-color设置，或者通过border属性简写设置。还可以对单个边框（如border-top）进行单独的设置。
  4. 外边距（Margin）：
    • 外边距是最外层的空间，代表元素与其他元素之间的空间。
    • 外边距可以通过margin-top、margin-right、margin-bottom、margin-left来分别设置，或者通过margin属性一次性设置所有四个方向的外边距。

image.png

标准盒模型和IE盒模型

盒模型有两种模式：标准盒模型和IE盒模型（也被称为怪异盒模型或替代盒模型）。

  • 标准盒模型（W3C盒模型）：
    • 在标准盒模型中，元素的宽度和高度只包括内容区域。内边距、边框和外边距不包括在内，它们会额外添加到内容区域的尺寸上。
  • IE盒模型（怪异盒模型）：
    • 在IE盒模型中，元素设置的宽度和高度包括内容、内边距和边框，但不包括外边距。这意味着，元素的实际宽度是宽度值加上左右内边距和边框的宽度。

image.png

可以使用 box-sizing CSS 属性来控制哪种盒模型被用于元素的布局计算：

  • box-sizing: content-box 指定使用标准盒模型。
  • box-sizing: border-box 指定使用IE盒模型。

边距叠加

边距叠加是CSS中的一个特性，它指的是在垂直方向（顶部和底部边距）上，两个或多个相邻盒子（通常是块级元素）的外边距会合并成一个外边距。这种行为会影响元素的最终布局。 边距叠加通常发生在以下情况：

  1. 相邻兄弟元素：当两个元素都是块级元素，并且在HTML结构中彼此相邻时，它们垂直方向上的外边距会叠加。例如，两个相邻的段落之间的空间通常由它们各自的外边距的较大值决定，而不是两者相加。
  2. 没有内容将其分开的父子元素：当一个块级元素的上外边距与其第一个块级子元素的上外边距相遇，或者块级元素的下外边距与其最后一个块级子元素的下外边距相遇时，这两者之间也会发生外边距叠加。
  3. 空块级元素：当一个块级元素没有上边框、下边框、垂直内边距、内联内容、清除浮动和创建了BFC（块级格式化上下文）的情况下，它的上外边距和下外边距也可能合并。

边距叠加的计算规则如下：

  • 相同符号的外边距：相邻外边距的符号相同时，叠加后的外边距大小为其中的较大者。
  • 不同符号的外边距：相邻外边距的符号不同时，叠加后的外边距大小为两者绝对值之和，符号为值较大的那个外边距。

边距最终叠加为20

BFC

BFC（Block Formatting Context，块级格式化上下文）是Web页面CSS 视觉渲染的一部分，是一个独立的布局环境，其中块级盒子按照一定的规则布局，并且与外部环境互不影响。

在BFC中，盒子垂直排列，并且盒子的垂直距离由 margin 决定。在BFC中，相邻的块级盒子之间的竖直外边距会发生叠加。但是，值得注意的是，在同一个BFC中的横向盒子不会重叠，而来自不同BFC的盒子其外边距则不会叠加。

创建BFC的条件可能包括：

  • 根元素 (<html>)
  • 浮动元素 (float 不是 none)
  • 绝对定位元素 (position 为 absolute 或 fixed)
  • 内联块 (display 为 inline-block)
  • 表格单元格 (display 为 table-cell，HTML 表格单元格默认值)
  • 表格标题 (display 为 table-caption，HTML 表格标题默认值)
  • 匿名表格单元格元素 (display 为 table、table-row、table-row-group、table-header-group、table-footer-group 或 inline-table)
  • overflow 值不为 visible 的盒子
  • flex 或 grid 容器的直接子元素
  • contain 属性值为 layout、content 或 paint 的盒子

BFC的特性包括以下几点：

  • 内部的块级盒子会在垂直方向上一个接一个地放置。
  • 盒子垂直方向的距离由 margin 决定，属于同一个BFC的相邻盒子的外边距会发生叠加。
  • 每个元素的左外边距与包含块的左边界相接触（对于从右向左的格式，右外边距会与包含块的右边界相接触）。
  • BFC的区域不会与浮动盒子重叠。
  • 计算BFC的高度时，浮动子元素也参与计算。
  • BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。

举个例子：

<style>
  .container {
    width: 100%;
    background-color: lightgray;
  }
  .float-box {
    float: left;
    width: 50%;
    height: 100px;
    background-color: coral;
  }
  .normal-box {
    height: 150px;
    background-color: lightblue;
    overflow: hidden; /* 触发BFC */
  }
</style>

<body>
  <div class="container">
    <div class="float-box"></div>
    <div class="normal-box"></div>
  </div>
</body>

image.png 在.normal-box上设置overflow: hidden;将针对.normal-box本身创建一个BFC，.normal-box内的内容会被限制在其自身的BFC内部，而不会演示到.float-box的元素内。

面试实战

Q1 : 盒模型是什么，请解释标准盒模型与怪异盒模型的区别？ 答案: CSS盒模型是CSS布局的基础，它包括了元素内容(content)、内边距(padding)、边框(border)，和外边距(margin)这四个部分。

  • 标准盒模型 （也称为W3C盒模型）中，元素的宽度和高度只包括内容区域，不包括内边距、边框和外边距。
  • 怪异盒模型 （也称为IE盒模型）中，元素的宽度和高度包括内容区域、内边距和边框，但不包括外边距。

可以通过CSS的 box-sizing 属性来切换这两种模式，box-sizing: content-box; 代表标准模式，而 box-sizing: border-box; 代表怪异模式。

Q2：当设置margin: auto;在一个块级元素上，会发生什么？ 答案： 当在块级元素上设置margin: auto;时，元素水平居中于其包含元素内部。这是由于自动外边距的计算使得左右margin相等，居中元素。这个技术通常用于水平居中定宽块级元素。

Q3：如何避免外边距（margin）合并（collapse）？提供至少两种方法。 答案：可以通过以下方法避免外边距合并：

  • 使用边框（border）或内边距（padding）：这会阻止相邻元素的外边距合并。
  • 创建块级格式化上下文（BFC）：可以通过设置元素的overflow为非visible值，或其他方式触发BFC，来防止子元素与外部元素的外边距合并。

Q4：什么是BFC？如何创建？有什么用途？ 答案：BFC是块级格式化上下文，是Web页面中盒模型布局的一种CSS渲染模式。元素会创建BFC是为了让其内部的布局不受外部环境的影响，同时它的内部布局也不会影响外部元素。一个元素的BFC会包含其内部所有子元素的布局，但不包括创建新BFC的浮动子元素。在BFC内部，垂直方向的盒子会发生边距折叠。

BFC可以通过以下方法创建：

  • 应用float属性而不是none。
  • 被绝对定位，即position属性为absolute或fixed。
  • 是一个块级容器，如inline-block, table-cells, 和flex项。
  • 是overflow的值不是visible的块元素。

BFC的主要用途包括：

  • 隔离浮动元素，防止外部的元素受到浮动元素影响。
  • 防止相邻的块级元素的外边距折叠。
  • 创建自清除（clearfix）来清除浮动。
  • 在多栏布局中，让每一列成为一个BFC，以确保它们之间的边界和布局不会相互影响。

总之，了解CSS盒模型对于页面布局和元素间的空间控制至关重要，是深入学习CSS和前端开发的基础知识之一。

Discuss on Twitter • View on GitHub