CSS 布局技巧笔记
一、浮动（float）
- 原理：使元素脱离文档流，向左或向右浮动，直到碰到父元素边界或另一个浮动元素。
- 应用场景：常用于实现多列布局，如导航栏横向排列、图文混排等。例如，多个图片并列展示时，可对图片设置浮动，使其在一行排列。
- 实操示例：
css
.float-left { float: left; width: 200px; height: 100px; background-color: #ccc; margin-right: 10px; }
在 HTML 中使用
，可创建向左浮动的元素。需注意，使用浮动后，父元素可能因高度塌陷问题，需用 clearfix 技巧（如添加 .clearfix:after {content: ""; display: table; clear: both;} 并在父元素添加 clearfix 类）来解决。二、定位（position）
- 类型及原理：
- 相对定位（relative）：元素相对其自身原本位置进行偏移，仍占据原空间。常用于微调元素位置。
- 绝对定位（absolute）：相对于最近的已定位祖先元素（若没有则相对于 body）进行定位，脱离文档流。常用于创建模态框、固定在某个位置的提示信息等。
- 固定定位（fixed）：相对于浏览器视口固定位置，不随页面滚动而移动。常用于导航栏固定在顶部或底部。
- 应用场景与实操：
- 相对定位示例：
css
.relative { position: relative; top: 10px; left: 20px; }
- 绝对定位示例：
css
.parent { position: relative; width: 300px; height: 200px; } .absolute { position: absolute; bottom: 0; right: 0; width: 100px; height: 50px; background-color: #999; }
- 固定定位示例：
css
.fixed-nav { position: fixed; top: 0; width: 100%; height: 50px; background-color: #333; color: #fff; }
三、弹性盒子布局（Flexbox）
- 原理：通过为容器指定 display: flex ，使子元素能在容器内灵活布局，自动调整尺寸和位置。
- 应用场景：适用于各种复杂的一维布局，如列表项均匀分布、自适应导航栏、元素垂直水平居中。
- 实操示例：
css
.flex-container { display: flex; justify-content: space-between; // 子元素两端对齐 align-items: center; // 子元素垂直居中 } .flex-item { flex: 1; // 子元素平均分配剩余空间 }
使用弹性盒子布局能更高效地处理布局问题，减少浮动和定位带来的一些麻烦，提高页面布局的响应性和可维护性。
