一、display（显示模式）
概念：
常用值：
display 是布局的核心属性，决定元素的显示方式。常用值：
block — 块级元素，独占一行inline — 行内元素，不能设置宽高inline-block — 行内块，既能设置宽高又不独占一行flex — 弹性布局grid — 网格布局none — 隐藏元素
👇 display 不同值对比
block 块级元素（独占一行）
inline 行内元素
inline 行内元素
inline-block 行内块
inline-block 行内块
1/* 块级元素 */
2div { display: block; }
3
4/* 行内元素 */
5span { display: inline; }
6
7/* 行内块 */
8a { display: inline-block; width: 100px; }
9
10/* 隐藏元素 */
11.hidden { display: none; }
二、position（定位方式）
概念：
position 配合 top/right/bottom/left 使用：static（默认）— 正常文档流relative — 相对定位，相对于自身原位置absolute — 绝对定位，相对于最近的已定位祖先fixed — 固定定位，相对于浏览器窗口sticky — 粘性定位，滚动时"粘"在某个位置
👇 relative 定位演示
正常位置
relative 定位（top:10px, left:20px）
正常位置
1/* 相对定位 */
2.box {
3 position: relative;
4 top: 10px;
5 left: 20px;
6}
7
8/* 绝对定位 */
9.box {
10 position: absolute;
11 top: 0;
12 right: 0;
13}
14
15/* 固定定位（导航栏常用） */
16.nav {
17 position: fixed;
18 top: 0;
19 left: 0;
20 width: 100%;
21}
三、z-index（层叠顺序）
概念：
前提：只有
z-index 控制定位元素的堆叠顺序，值越大越靠前。前提：只有
position 不为 static 时才生效。
👇 z-index 对比
z-index: 1
z-index: 2
z-index: 3
1/* z-index 必须配合 position 使用 */
2.box1 {
3 position: absolute;
4 z-index: 1; /* 最底层 */
5}
6
7.box2 {
8 position: absolute;
9 z-index: 2; /* 中间层 */
10}
11
12.box3 {
13 position: absolute;
14 z-index: 3; /* 最顶层 */
15}
四、visibility（可见性）
概念：
对比：
visibility 控制元素是否可见，但保留占据的空间。对比：
display: none 隐藏后不占位，visibility: hidden 隐藏后仍占位。
👇 visibility vs display:none
正常显示
正常显示
1/* 隐藏但占位 */
2.box {
3 visibility: hidden;
4}
5
6/* 完全隐藏不占位 */
7.box {
8 display: none;
9}
五、float（浮动）
概念：
现状：现在多用 Flex/Grid 替代，但了解它有助于理解历史布局。
注意：浮动元素父容器需要清除浮动，否则高度塌陷。
float 让元素脱离文档流，向左或向右浮动。现状：现在多用 Flex/Grid 替代，但了解它有助于理解历史布局。
注意：浮动元素父容器需要清除浮动，否则高度塌陷。
👇 float 演示
1/* 左浮动 */
2.box { float: left; }
3
4/* 右浮动 */
5.box { float: right; }
6
7/* 清除浮动（推荐） */
8.parent::after {
9 content: "";
10 display: block;
11 clear: both;
12}
13
14/* 或者父容器设置 overflow */
15.parent { overflow: hidden; }