css页面布局制作
CSS 页面布局方法
浮动布局（Float）
浮动是早期常用的布局方式，通过设置 float: left/right 让元素脱离文档流。需配合 clearfix 清除浮动以避免父容器高度塌陷。
.container::after {
content: "";
display: table;
clear: both;
}
.column {
float: left;
width: 33.33%;
}Flexbox 弹性布局
Flexbox 适合一维布局（行或列），通过 display: flex 开启容器，子项自动成为弹性项目。
.container {
display: flex;
justify-content: space-between;
}
.item {
flex: 1; /* 等分剩余空间 */
}Grid 网格布局
Grid 适合二维布局，通过 display: grid 定义网格容器，配合 grid-template-columns 划分列。
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr; /* 三列比例1:2:1 */
gap: 10px; /* 间距 */
}定位布局（Position）
绝对定位（position: absolute）或固定定位（position: fixed）可将元素精确放置在特定位置，需注意父容器需设为 position: relative。
.parent {
position: relative;
}
.child {
position: absolute;
top: 20px;
left: 0;
}响应式设计技巧
媒体查询（Media Queries） 根据屏幕尺寸调整布局，常用断点如 768px（平板）和 480px（手机）。
@media (max-width: 768px) {
.column {
width: 100%; /* 小屏幕时堆叠 */
}
}视口单位（vw/vh）
使用 vw（视口宽度百分比）和 vh（视口高度百分比）实现动态尺寸。
.header {
height: 10vh; /* 高度占视口10% */
}实用工具推荐
- CSS 预处理器：Sass/Less 支持嵌套、变量和混合宏。
- 框架辅助：Bootstrap 的栅格系统或 Tailwind CSS 的工具类可加速开发。
