CSS 知识点：脱开文档流与标准盒子

前端

2023-10-09 13:10:05

CSS 布局基础：脱离文档流和标准盒子

在 CSS 布局中，理解元素与文档流的关系至关重要。文档流是你网页中元素的自然排列方式，从左到右、从上到下。当元素脱离文档流时，它们不再受此顺序的约束，从而可以实现更灵活的布局选项。

脱离文档流

脱离文档流的元素悬浮在其他元素上方，不再占用文档流中的空间。这可以通过以下三种方式实现：

浮动 (float) ：将元素浮动到左侧或右侧，使其紧贴前面的元素，但不会推开后面的元素。这对于创建并排布局非常有用。
绝对定位 (absolute) ：将元素从文档流中移除，并相对于其父元素进行定位。这可以让你在页面上的任何位置精确放置元素。
固定定位 (fixed) ：与绝对定位类似，但元素相对于视口（整个网页可见区域）进行定位，而不是父元素。这适用于创建粘性导航栏等固定在屏幕上的元素。

标准盒子

标准盒子模型为元素的布局提供了可预测的框架。它将每个元素视为具有以下四个部分的矩形：

内容宽度 (contentWidth) ：元素中内容的宽度。
填充 (padding) ：内容周围的空白区域。
边框 (border) ：内容周围的线。
外边距 (margin) ：元素与其他元素之间的空白区域。

通过调整这些值，你可以精确地控制元素的大小、位置和外观。

示例

为了更好地理解脱离文档流和标准盒子，我们来看一个简单的示例：

<div class="container">
  <div class="left-float">悬浮元素</div>
  <div class="absolute-position">绝对定位元素</div>
  <div class="standard-box">标准盒子元素</div>
</div>

.left-float {
  float: left;
  width: 100px;
  height: 100px;
  background-color: red;
}

.absolute-position {
  position: absolute;
  left: 10px;
  top: 10px;
  width: 100px;
  height: 100px;
  background-color: blue;
}

.standard-box {
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 1px solid black;
  margin: 10px;
  background-color: green;
}