CSS基本功：页面布局
程序员文章站
2022-04-19 21:25:48
...
页面的布局应该是CSS的基础核心了，一列定宽，一列自适应；两列定宽、两列自适应、一列定宽一列自适应；三列定宽、三列自适应、左右定宽中间自适应等都测量着一个前端开发人员的基本功。
页面的布局总的来说，就是div是几列，是固定的宽度还是自适应的（随着屏幕的大小宽度发生改变）。
单列页面布局
<body>
<div class="one">hello</div>
</body>1.单列定宽居中：
//css部分
div.one{
width: 200px;
height: 300px;
border: 2px solid black;
background-color: red;
margin: 0 auto;//div水平居中显示
}运行结果如下：
2.单列自适应
div.one{
width: 20%;
height: 220px;
border: 2px solid black;
background-color: red;
}显示结果：
两列页面布局
<div class="left">我是左边</div>
<div class="right">我是右边</div>1.两列定宽
//CSS部分：
.left{
width: 200px;
height: 220px;
border: 2px solid black;
background-color: red;
float: left;
}
.right{
width: 200px;
height: 220px;
border: 2px solid black;
background-color: yellow;
float: left;
}运行结果显示：
*：上面这样的布局可能出现这样的情况，随着整个屏幕的缩小，left和right这两个的宽度是固定不会变化，但是可能会right会被挤到下面去。如果想避免这样的情况，就将left和right放到一个div里，并给这个外面这个div设置个最小的宽度（max-width）,这样右边的div就不会掉下去。
2.两列自适应
.left{
width: 30%;
height: 220px;
border: 2px solid black;
background-color: red;
float: left;
}
.right{
width: 50%;
height: 220px;
border: 2px solid black;
background-color: yellow;
float: left;
}运行后的效果：
3.一列定宽一列自适应
.left{
width: 100px;
height: 220px;
border: 2px solid black;
background-color: red;
float: left;
}
.right{
width: 50%;
height: 220px;
border: 2px solid black;
background-color: yellow;
float: left;
}运行后的效果：
三列页面布局
定宽和自适应都和单列和两列一样，这里展示左右定宽中间自适应的代码。
<div class="left">我是左边,我的宽度是定宽的</div>
<div class="middle">我是中间，我是自适应</div>
<div class="right">我是右边，我得宽度是固定的</div>
//CSS部分：
.left{
position: absolute;
width: 100px;
height: 220px;
border: 2px solid black;
background-color: red;
float: left;
left: 0;
}
.middle{
width: auto;
margin-left: 100px;
margin-right: 100px;
border: 2px solid black;
background-color: pink;
}
.right{
width: 100px;
height: 220px;
border: 2px solid black;
background-color: yellow;
position: absolute;
right: 0;
top: 0;
}运行结果显示：
*最后补充一下，如何让两列或多列等高？比如上面这个例子左右设置的高度一样，中间明显显得格格不如，那给中间也设置高度？NO？这里考虑下根据最高的那一列来定高度，我们就不把高度定死了。
利用负的大的外边距和正的内边距相抵消。
margin-bottom:-2000px;
padding-bottom:2000px;
<div class="content">
<div class="left">我是左边,我的宽度是定宽的<br/>我是最高的<br/>我要求中间和右边和我一样高</div>
<div class="middle">我是中间，我是自适应</div>
</div>
//CSS部分：
.left{
width: 100px;
border: 2px solid black;
background-color: red;
float: left;
padding-bottom:2000px;
margin-bottom:-2000px;
}
.middle{
width: auto;
margin-left: 100px;
margin-right: 100px;
border: 2px solid black;
background-color: pink;
padding-bottom:2000px;
margin-bottom:-2000px;
}
.content{
overflow: hidden;
width: 100%;
}.
这样不用设置高度，可以让两列的高度根据最高的一列来定。
上一篇： php对象输出有顺序吗？解决方法