css页面布局制作
CSS 页面布局制作方法
浮动布局
利用 float 属性实现元素横向排列，需配合 clearfix 清除浮动。
示例代码：
.container {
overflow: auto; /* 清除浮动 */
}
.box {
float: left;
width: 30%;
margin: 10px;
}Flexbox 弹性布局
通过 display: flex 创建弹性容器，子元素自动适应空间分布。
示例代码：
.container {
display: flex;
justify-content: space-between;
}
.item {
flex: 1;
min-width: 100px;
}Grid 网格布局
使用 display: grid 定义行列结构，实现复杂二维布局。
示例代码：
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}定位布局
通过 position: absolute/relative/fixed 控制元素精确位置。
示例代码：
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}响应式设计
使用媒体查询适配不同屏幕尺寸。
示例代码：
@media (max-width: 768px) {
.container {
grid-template-columns: 1fr;
}
}多栏布局
通过 column-count 实现文本分栏显示。
示例代码：
.text-content {
column-count: 2;
column-gap: 40px;
}注意事项
- 优先选择 Flexbox 或 Grid 等现代布局方案
- 避免过度嵌套浮动或定位导致维护困难
- 使用
box-sizing: border-box统一盒模型计算
