一、块级布局（Block Layout）
1. display
- 作用：定义元素的显示方式。
- 常用值：
block：块级元素，默认独占一行。inline：行内元素，与其他内容在同一行显示。inline-block：兼具块级和行内特性。flex：启用弹性布局。grid：启用网格布局。none：隐藏元素。
- 示例： css
深色版本
div {display: flex; }
二、弹性布局（Flexbox）
2. flex-direction
- 作用：定义主轴方向（即子项排列的方向）。
- 常用值：
row（默认）：水平排列。column：垂直排列。row-reverse：水平反向排列。column-reverse：垂直反向排列。
3. justify-content
- 作用：控制主轴上的对齐方式。
- 常用值：
flex-start：靠主轴起点对齐。flex-end：靠主轴终点对齐。center：居中对齐。space-between：两端对齐，剩余空间均匀分布。space-around：每个项目两侧的间距相等。space-evenly：所有项目的间距相等。
4. align-items
- 作用：控制交叉轴上的对齐方式。
- 常用值：
stretch（默认）：子项拉伸以填满容器高度。flex-start：靠交叉轴起点对齐。flex-end：靠交叉轴终点对齐。center：居中对齐。baseline：基线对齐。
5. align-self
- 作用：为单个子项覆盖
align-items的设置。 - 常用值：与
align-items相同。
6. flex-wrap
- 作用：控制子项是否换行。
- 常用值：
nowrap（默认）：不换行。wrap：换行。wrap-reverse：反向换行。
三、网格布局（Grid）
7. grid-template-columns 和 grid-template-rows
- 作用：定义网格的列和行的大小及数量。
- 示例： css
深色版本
.grid-container {grid-template-columns: 1fr 2fr 1fr; /* 定义三列 */grid-template-rows: 100px auto; /* 定义两行 */ }
8. grid-gap / gap
- 作用：设置网格行和列之间的间距。
- 示例： css
深色版本
.grid-container {gap: 20px; /* 行和列之间的间距均为 20px */ }
9. justify-items 和 align-items
- 作用：分别控制单元格在主轴和交叉轴上的对齐方式。
- 常用值：与 Flexbox 的
justify-content和align-items类似。
10. grid-auto-flow
- 作用：控制自动放置子项的方式。
- 常用值：
row（默认）：按行填充。column：按列填充。dense：尝试填补空白区域。
四、定位布局（Positioning）
11. position
- 作用：定义元素的定位方式。
- 常用值：
static（默认）：普通文档流中的静态定位。relative：相对定位，相对于元素自身的位置偏移。absolute：绝对定位，相对于最近的已定位祖先元素。fixed：固定定位，相对于视口。sticky：粘性定位，根据滚动位置动态切换行为。
12. top, right, bottom, left
- 作用：设置元素相对于其定位上下文的偏移量。
- 示例： css
深色版本
.element {position: absolute;top: 10px;left: 20px; }
13. z-index
- 作用：控制重叠元素的堆叠顺序。
- 示例： css
深色版本
.element {z-index: 10; /* 数值越大越靠上 */ }
五、浮动布局（Floats）
14. float
- 作用：使元素浮动到左侧或右侧。
- 常用值：
left：左浮动。right：右浮动。none（默认）：不浮动。
- 示例： css
深色版本
img {float: left; }
15. clear
- 作用：清除浮动的影响。
- 常用值：
left：清除左浮动。right：清除右浮动。both：清除左右浮动。
- 示例： css
深色版本
.clearfix {clear: both; }
六、其他布局属性
16. width 和 height
- 作用：设置元素的宽度和高度。
- 示例： css
深色版本
.box {width: 200px;height: 100px; }
17. margin 和 padding
- 作用：
margin：控制元素外部的间距。padding：控制元素内部的间距。
- 示例： css
深色版本
.box {margin: 10px;padding: 20px; }
18. box-sizing
- 作用：控制元素的盒模型计算方式。
- 常用值：
content-box（默认）：宽度和高度仅包括内容区域。border-box：宽度和高度包括内容、内边距和边框。
- 示例： css
深色版本
.box {box-sizing: border-box; }
19. overflow
- 作用：控制内容溢出容器时的行为。
- 常用值：
visible（默认）：内容溢出可见。hidden：隐藏溢出内容。scroll：添加滚动条。auto：根据需要添加滚动条。
- 示例： css
深色版本
.container {overflow: auto; }
总结
CSS 布局属性提供了多种强大的工具，用于控制网页中元素的排列和定位。以下是一些常用的布局模型及其适用场景：
- 块级布局：适用于简单的页面结构。
- 弹性布局（Flexbox）：适合一维布局（行或列），如导航栏、卡片布局。
- 网格布局（Grid）：适合二维布局（行和列），如复杂网页布局。
- 定位布局：适合需要精确控制位置的元素。
- 浮动布局：传统布局方法，现在逐渐被 Flexbox 和 Grid 取代。