CSS 布局核心：盒子模型、浮动与定位

前言：为什么 CSS 布局是新手的“噩梦”？

很多初学者觉得 CSS 难，是因为它不像 JS 那样报错，它只会默默地让你写的页面“毁容”。 css布局核心其实只有一句话：理解元素是如何在标准流中排队的，以及如何通过盒子模型、浮动和定位来“打破”这种排队。

一、 盒子模型：不仅仅是四个参数

CSS 中规定每个盒⼦分别由：

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

实际占用宽度 =
width（内容宽度） + 左（padding） + 右（padding） + 左（border）+ 右（border）

二、 浮动（Float）：从垂直走向水平

在默认的“标准流”中，块级元素是垂直排列的。如果想实现左右排列，就需要用到浮动。

1. 浮动的特点

• 脱标（脱离标准流）：浮动的元素不再占据标准流的位置，它像“漂浮”了起来。

• 覆盖性：因为脱离了标准流，浮动元素会覆盖掉后面的标准流元素。

• 相邻排列：多个浮动元素会紧贴在一起横向排列。

• 可设宽高：即便是行内元素，浮动后也可以直接设置 width 和 height。

2. 清除浮动：解决“父元素塌陷”

• 方法 1：直接定死高度。给父元素设置固定的 height。

#box{
			/* 方法一：给父级元素添加高度
			height: 600px;
		}

• 方法 2：溢出隐藏。给父元素设置 overflow: hidden。

#box{
			/* 方法二：溢出处理 */
			overflow: hidden; 
		}

• 方法 3：伪元素清除法。在父元素末尾加一个看不见的块，强制撑开高度。

/* 方法三：添加伪类元素 */
		#box:after{
			/* 清空内容 */
			content: '';
			display: block;
			clear: both;
		}

三、定位（Position）：打破规则的“任意门”

如果说浮动是“排队”，那么定位就是“坐标瞬移”。

核心公式：子绝父相
这是网页布局中最常用的组合：
父元素设置相对定位（占坑）
子元素设置绝对定位（在坑里自由移动）
这样既能保证页面结构不乱，又能实现灵活的重叠效果。

四、 层级关系（z-index）

1、当你使用定位让多个元素重叠时，谁在上、谁在下？

z-index 属性决定了元素的层叠顺序。

取值规则：数字越大，层级越高，越靠近用户的眼睛。

以下代码是部分代码，并非完整代码！！！

<style>
        .container {
            position: relative; /* 定位父元素 */
            height: 300px;
            padding: 20px;
            background-color: #f9f9f9;
            border: 2px dashed #ccc;
        }

        .box {
            width: 150px;
            height: 150px;
            position: absolute; /* 开启定位，z-index 才有效 */
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            font-weight: bold;
            color: white;
            border: 2px solid rgba(0,0,0,0.1);
            transition: 0.3s;
        }

        /* 红色盒子：底层 */
        .box-1 {
			color: #000000;
            background-color: #ff0000;
            top: 50px;
            left: 50px;
            z-index: 10; /* 数字最小，在最下面 */
        }

        /* 绿色盒子：中层 */
        .box-2 {
			color: #000000;
            background-color: #4caf50;
            top: 100px;
            left: 100px;
            z-index: 20; 
        }

        /* 黄色盒子：顶层 */
        .box-3 {
			color: #000000;
            background-color: #ffff00;
            top: 150px;
            left: 150px;
            z-index: 30; /* 数字最大，在最上面 */
        }
<div class="container">
        <div class="box box-1">z-index: 10</div>
        <div class="box box-2">z-index: 20</div>
        <div class="box box-3">z-index: 30</div>
    </div>

2、z-index 的“潜规则”

• 前提条件： z-index 属性只对设置了定位（position）的元素有效。如果你发现设置了 z-index 没反应，先检查有没有写 position: relative 或 absolute。

• 默认层级： 如果大家都没有 z-index，或者 z-index 相等，那么后来居上——在 HTML 代码里写在后面的元素会盖住前面的元素。

• 拼爹时代（层叠上下文）： 如果父元素 A 的 z-index 比父元素 B 低，那么即便 A 的子元素 z-index 设置到一万，也永远盖不住 B 的子元素。

本章小结

CSS 布局就像是在玩乐高。盒子模型决定了每一块零件的大小；浮动决定了零件如何横向拼接；而定位则赋予了你在三维空间里堆叠零件的能力。

想让盒子变大变小？ 调 padding 和 margin。

想让盒子并排？ 用 float: left。

想让盒子叠在一起？ 用 position: absolute 并配合 z-index。