开篇先交代通用css非核心代码,如下所示:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-size: 32px;
list-style-type: none;
border:none;
}
.plan {
width: 100vw;
}
.plan + h1 {
margin-top: 100px;
}
.head,
.foot,
.left,
.middle,
.right {
text-align: center;
font-weight: bold;
}
.head, .foot {
background: #3461a4;
}
.main{
overflow: hidden; /* bfc清浮动 */
margin: 5px 0;
}
.middle {
background: #3495a4;
}
.plan-a .left, .plan-a .right, .plan-a .middle,
.plan-b .left, .plan-b .right, .plan-b .middle,
.plan-c .left, .plan-c .right, .plan-c .middle {
height: 500px;
line-height: 500px;
}
.plan-a .left,.plan-a .right,
.plan-b .left,.plan-b .right,
.plan-c .left,.plan-c .right {
width: 200px;
}
.left, .right {
background: red;
}
.plan-a .head, .plan-a .foot,
.plan-b .head, .plan-b .foot,
.plan-c .head, .plan-c .foot {
height: 100px;
line-height: 100px;
}
1. calc+浮动
左右定宽200px 核心:main区域左中两块左浮动 右侧右浮动。 bfc区域清除浮动,撑开父元素的塌陷高度。
<div class="plan-a plan">
<div class="head">Header</div>
<div class="main">
<div class="left">Left</div>
<div class="middle">Middle</div>
<div class="right">Right</div>
</div>
<div class="foot">Footer</div>
</div>
.plan-a .middle {
width: calc(100vw - 420px); // 计算中间区域宽度 扣除左右两侧20px间隔
margin-left: 10px;
float: left;
}
.plan-a .right {
float: right;
}
.plan-a .left {
float: left;
}
2. h5结构+浮动+marginLeft
左右定宽200px 核心:利用结构的改变 影响dom树的构建与渲染。main区域左右两侧先浮动,中间区域使用marginLeft定位。
<div class="plan-b plan">
<div class="head">Header</div>
<div class="main">
<div class="left">Left</div>
<div class="right">Right</div>
<div class="middle">Middle</div>
</div>
<div class="foot">Footer</div>
</div>
.plan-b .middle{
margin-left: 210px;
margin-right: 210px;
}
.plan-b .left {
float: left;
}
.plan-b .right{
float: right;
}
3. flex布局
2009年,W3C 提出了一种新的方案----Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。阮一峰 – Flex弹性布局教程
左右定宽200px 核心:calc计算中间区域 利用space-between完成
<div class="plan-c plan">
<div class="head">Header</div>
<div class="main">
<div class="left">Left</div>
<div class="middle">Middle</div>
<div class="right">Right</div>
</div>
<div class="foot">Footer</div>
</div>
.plan-c .main {
display: flex;
justify-content: space-between;
}
.plan-c .middle {
width: calc(100vw - 420px);
}
4. grid布局
Grid 布局与 Flex 布局有一定的相似性,都可以指定容器内部多个项目的位置。但是,它们也存在重大区别。Flex 布局是轴线布局,只能指定"项目"针对轴线的位置,可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列",产生单元格,然后指定"项目所在"的单元格,可以看作是二维布局。Grid 布局远比 Flex 布局强大。阮一峰 – Grid网格布局教程
左右定宽200px 核心:强大的属性帮助我们快速构建页面布局,基本不依赖通用代码
<div class="plan-d plan">
<div class="head">Header</div>
<div class="left">Left</div>
<div class="middle">Middle</div>
<div class="right">Right</div>
<div class="foot">Footer</div>
</div>
.plan-d {
display: grid;
grid-template-columns: 200px auto 200px;
grid-template-rows: 100px 500px 100px;
grid-row-gap: 5px;
grid-column-gap: 10px;
}
.plan-d .head, .plan-d .foot {
grid-column: 1/4; /*网格线1-4所包含的网格123*/
}
.plan-d .head,
.plan-d .foot,
.plan-d .left,
.plan-d .middle,
.plan-d .right {
display: grid;
place-content: center; /*垂直居中+左右居中*/
}