CSS布局技巧：汇总CSS布局技巧，如浮动、定位、弹性盒子布局等，以及写出它们的应用场景和实操实践。 以下是一些实用的CSS布局技巧：
- 盒模型理解
- CSS中每个元素都被视为一个盒子。盒模型包括内容（content）、内边距（padding）、边框（border）和外边距（margin）。理解盒模型能精准控制元素大小和间距。比如设置 box-sizing: border-box; ，可以让元素的宽度和高度包含内边距和边框，使布局计算更方便。
- 浮动布局（float）
- 可以使元素向左或向右浮动，让文本和内联元素环绕它。通常用于创建多列布局。不过要注意清除浮动，否则可能会导致父元素高度塌陷。可以使用 clear: both; 在浮动元素后添加一个空元素并设置此属性来解决，或者使用伪元素 :after 来清除浮动。
- 弹性盒子布局（flexbox）
- 这是一种一维布局模型，用于在容器中排列子元素。通过设置 display: flex; 开启弹性布局。
- 可以使用 justify-content 属性来控制子元素在主轴（默认是水平方向）上的对齐方式，如 center （居中）、 space-between （两端对齐，中间间隔相等）等。
- align-items 属性用于控制子元素在交叉轴（垂直方向）上的对齐方式。
- 网格布局（grid）
- 是一个二维布局系统。通过 display: grid; 创建网格容器。
- 可以使用 grid-template-columns 和 grid-template-rows 定义网格的列和行，比如 grid-template-columns: 1fr 1fr 1fr; 可以创建一个三列等宽的网格。
- grid-gap 属性用于设置网格间隙。
- 相对定位（relative）和绝对定位（absolute）
- 相对定位使元素相对于它原来的位置移动，而绝对定位的元素会相对于最近的已定位祖先元素进行定位。如果没有已定位的祖先元素，会相对于文档根元素定位。
- 合理使用这两种定位方式可以创建复杂的布局，如弹出框、下拉菜单等。
- 响应式布局
- 使用媒体查询（media queries），根据不同的设备屏幕宽度来应用不同的CSS样式。例如：@media screen and (max-width: 768px) { /* 当屏幕宽度小于等于768px时应用的样式 */ }
- 也可以使用百分比宽度、 vw （视口宽度的百分比）和 vh （视口高度的百分比）单位来创建自适应布局。
