本文介绍几种常见的CSS布局技巧，及它们的应用场景和实际应用示例。
01 浮动（Float）布局
float 属性定义元素在哪个方向浮动，任何元素都可以浮动。
原理
- 浮动使元素脱离了文档流
脱离文档流之后，元素相当于在页面上面增加一个浮层来放置内容。
此时可以理解为有两层页面，一层是底层的原页面，一层是脱离文档流的上层页面，所以会出现折叠现象。
- 浮动只有左右浮动，没有上下浮动
| 值 | 描述 |
|---|---|
| left | 元素向左浮动 |
| right | 元素向右浮动 |
应用场景
用于创建多列布局，例如经典的左侧导航栏+右侧内容的布局。
实操实践
.left-column {
float: left;
width: 200px;
}
.right-column {
float: left;
width: calc(100% - 200px);
}
注意
-
当所有元素同时浮动的时候，会变成水平摆放，向左或者向右；
-
当容器不足以横向摆放内容时候，会在下一行摆放。
02 定位（Position）布局
position 属性指定了元素的定位类型。
原理
| 值 | 描述 |
|---|---|
| relative | 相对定位 |
| absolute | 绝对定位 |
| fixed | 固定定位 |
其中，绝对定位和固定定位会脱离文档流。
设置定位之后：可以使用四个方向值进行调整位置： left、top、right、bottom。
应用场景
用于实现元素的精确定位，例如悬浮菜单或对话框。
实操实践
.menu {
position: absolute;
top: 20px;
right: 20px;
}
.dialog {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
03 弹性盒子（Flexbox）布局
弹性盒子是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
目的：提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
原理
弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
弹性容器通过设置 display 属性的值为 flex 将其定义为弹性容器。
弹性容器内包含了一个或多个弹性子元素。
display 属性
| 值 | 描述 |
|---|---|
| flex | 开启弹性盒子。 |
flex-direction属性：指定了弹性子元素在父容器中的位置。
| 值 | 描述 |
|---|---|
| row | 横向从左到右排列（左对齐），默认的排列方式。 |
| row-reverse | 反转横向排列（右对齐），从后往前排，最后一项排在最前面。 |
| column | 纵向排列。 |
| column-reverse | 反转纵向排列，从后往前排，最后一项排在最上面。 |
justify-content 属性：内容对齐，应用在弹性容器上。
| 值 | 描述 |
|---|---|
| flex-start | 弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放。 |
| flex-end | 弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放。 |
| center | 弹性项目居中紧挨着填充。如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出。 |
align-items 属性：设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。
| 值 | 描述 |
|---|---|
| flex-start | 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。 |
| flex-end | 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。 |
| center | 弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度） |
flex：根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间，默认为0。
按扩展因子转化的百分比对其分配剩余空间。
0.1即10%，1即100%。
应用场景
用于创建灵活的、自适应的布局，尤其适用于响应式设计。
实操实践
.container {
display: flex;
justify-content: space-between;
align-items: center;
}
.item {
flex: 1;
}
注意
默认弹性盒里内容横向摆放。
04 网格（Grid）布局
应用场景
用于创建复杂的网格布局，例如多列等分布局。
实操实践
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
}
.item {
grid-column: span 1;
grid-row: span 2;
}
05 多列/分栏（Multi-column）布局
应用场景
用于创建报纸或杂志样式的多列布局。
实操实践
.container {
column-count: 3;
column-gap: 20px;
}
06 盒子模型（Box Model）布局
应用场景
用于控制元素的内外边距、边框和尺寸。
实操实践
.box {
padding: 20px;
margin: 10px;
border: 1px solid #000;
width: 200px;
height: 200px;
}
07 总结
这些布局技巧是常见的CSS布局方法，每种方法有其特定的应用场景和实际运用。根据具体需求，选择合适的布局技巧，能够更好地实现预期的页面布局和设计效果。
