[Web自动化] CSS布局与定位

4.3 CSS布局与定位

4.3.1 布局

布局是CSS中用于构建网页结构的关键部分。理解布局的基础概念对于设计响应式和适应性强的网页至关重要。
盒子模型（Box Model）：

CSS中的每个元素都可以看作是一个盒子，包括：

外边距（margin）
边框（border）
内边距（padding）
内容（content）

四个部分。这些属性的组合决定了元素的总尺寸和与其他元素之间的空间关系。

例子：

css 复制代码

.box {
width: 200px;
padding: 10px;
border: 5px solid black;
margin: 20px;
background-color: lightblue;
}

html 复制代码

<div class="box">内容</div>

在这个例子中，.box的总宽度将是200px（内容宽度）+ 20px（左内边距）+ 20px（右内边距）+ 10px（左边框）+ 10px（右边框），但由于外边距（margin）不计算在内，它只影响元素与其他元素之间的距离。
浮动（Floats）：

浮动元素会脱离其正常的文档流，向左或向右移动，直到它的外边缘碰到包含框或另一个浮动元素的边缘。浮动主要用于创建文本环绕图片的效果或实现简单的布局。

css 复制代码

.float-left {
float: left;
margin-right: 20px;
}

html 复制代码

<div class="float-left"><></div>
<p>这是一段文本，它将环绕在浮动图片的右侧。</p>

清除浮动：

由于浮动元素不再占据原来的空间，可能会导致父容器高度塌陷。为了解决这个问题，可以使用清除浮动的方法，如设置父容器的overflow: auto;（但这种方法有局限性），或使用伪元素清除浮动。

伪元素清除浮动：

css 复制代码

.clearfix::after {
content: "";
display: table;
clear: both;
}

html 复制代码

<div class="clearfix">
<div class="float-left">第一个浮动元素</div>
<div class="float-left">第二个浮动元素</div>
</div>

4.3.2 定位

定位是CSS中用于控制元素在页面上精确位置的重要机制。通过定位，我们可以将元素放置在页面的任何位置，并控制其与其他元素的重叠方式。
静态定位（Static Positioning）：

元素的默认定位方式，按照正常的文档流进行布局。静态定位的元素不能通过top、right、bottom、left属性进行偏移。
相对定位（Relative Positioning）：

元素首先放置在文档流中的默认位置，然后相对于其正常位置进行偏移。相对定位的元素仍然占据原来的空间。

css 复制代码

.relative-pos {
position: relative;
top: 20px;
left: 30px;
}

绝对定位（Absolute Positioning）：

元素脱离文档流，相对于其最近的已定位（即非static）祖先元素进行定位。如果没有这样的元素，则相对于<html>元素（即初始包含块）定位。绝对定位的元素不占据原来的空间。

css 复制代码

.absolute-pos {
position: absolute;
top: 50px;
right: 20px;
}

注意：为了让绝对定位生效，通常需要将父元素设置为相对定位（或其他非静态定位方式）。
固定定位（Fixed Positioning）：

元素脱离文档流，相对于浏览器窗口进行定位。即使页面滚动，元素也会保持在相同的位置。

css 复制代码

.fixed-pos {
position: fixed;
bottom: 20px;
right: 20px;
}

粘性定位（Sticky Positioning）：

一种特殊的定位方式，它基于用户的滚动位置在relative和fixed定位之间切换。
堆叠上下文（Stacking Contexts）：

当元素在Z轴上重叠时，哪个元素应该位于顶部，哪个位于底部，这是由堆叠上下文决定的。每个堆叠上下文都包含了一个堆叠顺序的列表，列表中的元素按照特定的规则进行堆叠。

默认情况下，文档本身就是一个堆叠上下文，但任何设置了position属性为relative、absolute、fixed或sticky（且z-index值不为auto）的元素都可以创建新的堆叠上下文。

css 复制代码

.parent {
position: relative;
z-index: 1;
}

.child {
position: absolute;
top: 10px;
left: 10px;
z-index: 2; /* 在父元素的堆叠上下文中，这个z-index是有效的 */
}

在这个例子中，.child元素会相对于.parent元素定位，并且由于.parent创建了一个新的堆叠上下文，.child的z-index值只会影响该上下文内的元素。
z-index属性：

z-index属性用于控制定位元素在堆叠上下文中的堆叠顺序。只有定位元素（即position属性不是static的元素）的z-index属性才有效。z-index的值可以是正整数、负整数或auto。值越大，元素越位于顶部；值越小，元素越位于底部。

注意：z-index仅在同一堆叠上下文中有效。如果你想要一个元素在另一个堆叠上下文之上，你需要调整它们共同的祖先元素的z-index，或者改变它们的DOM结构，使它们属于同一个堆叠上下文。
定位与文档流：

绝对定位的元素脱离文档流，不占据空间，且不会影响其他元素的布局。

固定定位的元素也脱离文档流，但它相对于浏览器窗口定位，即使页面滚动，它也会保持在相同的位置。

相对定位的元素保留在文档流中，占据空间，但它可以通过top、right、bottom、left属性相对于其正常位置进行偏移。

粘性定位的元素在达到特定条件（如滚动到一定位置）之前，表现得像相对定位；一旦满足条件，它就表现得像固定定位。
定位元素的尺寸：

当元素被定位（除了静态定位）时，其尺寸（宽度和高度）可能会受到其position属性和其他属性（如overflow）的影响。特别是，绝对定位的元素可能会脱离其正常流中的父元素，因此其尺寸可能不再受父元素尺寸的限制。然而，如果设置了width和height属性（或这些属性的计算值不是auto），则这些值将决定元素的尺寸。

通过理解和应用这些定位原则和技巧，你可以创建出更加复杂和灵活的网页布局。希望这些解释和例子能够帮助你更深入地理解CSS中的定位机制。