前端布局是页面框架搭建最基础的一环，其布局知识繁杂，实现方式也是多种多样。所谓布局，就是将元素设置为我们想要的大小，放置到我们想要的位置。其中位置，尺寸是核心两要素。
一、单列布局
常见的单列布局有两种：
- header,content和footer等宽的单列布局
-
header与footer等宽,content略窄的单列布局
单列布局.png
实现方式：
第一种方式：对header,content,footer统一设置width：1000px;然后设置margin:auto实现居中即可得到
单列布局.png
第二种方式：header、footer的内容宽度不设置，块级元素充满整个屏幕，但header、content和footer的内容区设置同一个width，并通过margin:auto实现居中
单列布局2.png
二、两列布局
2.1float+overflow：hidden
.parent1 {
margin-bottom: 10px;
}
.left1 {
float: left;
height: 300px;
width: 200px;
background-color: limegreen
}
.right1 {
overflow: hidden;
height: 300px;
background-color: lightsalmon;
}
<div class="parent1">
<div class="left1">左</div>
<div class="right1">右</div>
</div>
两列布局.png
2.2Flex布局实现
<div class="parent2">
<div class="left2">左</div>
<div class="right2">右</div>
</div>
.parent2 {
display: flex;
height: 300px;
margin-bottom: 10px;
}
.left2 {
width: 200px;
background-color: lightseagreen;
}
.right2 {
flex: 1;
background-color: #ddd;
}
两列布局2.png
三、三栏布局
特征：中间列自适应，两侧固定
其中最常见的为圣杯布局和双飞翼布局
3.1圣杯布局
缺点：
①center部分的最小宽度不能小于left部分的宽度，否则会left部分掉到下一行
②如果其中一列内容高度拉长(如下图)，其他两列的背景并不会自动填充。
圣杯布局
实现步骤：
步骤一.png
②通过设置margin-left为负值让left和right部分和content同一行(关于负值margin参考本篇文章)
步骤二.png
③通过设置父容器的padding，让左右两边留出间隙
步骤三.png
④通过设置定位，让left和right移动到两边
步骤四.png
3.2圣杯布局
缺点：多加一层 dom 树节点，增加渲染树生成的计算量。
实现步骤：
-
center部分增加一个内层div，并设margin: 0 200px；
双飞翼布局.png
3.3双飞翼布局和圣杯布局的对比
相同点：
- 都是把主列放在文档流最前面，使主列优先加载。
- 在实现上也有相同之处，都是让三列浮动，然后通过负外边距形成三列布局。
不同点： - 不同之处在于如何处理中间主列的位置：
圣杯布局是利用父容器的左、右内边距+两个从列相对定位；
双飞翼布局是把主列嵌套在一个新的父级块中利用主列的左、右外边距进行布局调整
四、等高布局
定义：等高布局是指子元素在父元素中高度相等的布局方式
4.1padding+margin属性实现等高布局
实现方法：设置一个大数值的 padding-bottom，再设置相同数值的负的 margin-bottom，并在所有列外面加上一个容器，并设置 overflow:hidden 把溢出背景切掉。可以使用该方法完善圣杯布局的不足。
.parent1 {
overflow: hidden;
}
.left1,
.right1 {
width: 300px;
float: left;
padding-bottom: 9999px;
margin-bottom: -9999px;
}
.left1 {
background-color: #cccccc;
}
.right1 {
background-color: #c9394a;
}
<div class="parent1">
<div class="left1">left</div>
<div class="right1">等高布局，padding+margin属性实现等高布局</div>
</div>
等高布局.png
4.2通过display的属性table实现等高布局
兼容性不好，在ie6-7无法正常运行
.parent {
display: table;
}
.left,
.right {
width: 300px;
display: table-cell;
}
.left {
background-color: #c9394a;
}
.right {
background-color: #cccccc;
}
<div class="parent">
<div class="left">left</div>
<div class="right">通过display的属性table实现等高布局
通过display的属性table实现等高布局
通过display的属性table实现等高布局
通过display的属性table实现等高布局
</div>
</div>
等高布局1.png
五、粘连布局
定义:
- 有一块内容<main>，当<main>的高康足够长的时候，紧跟在<main>后面的元素<footer>会跟在<main>元素的后面。
-
当<main>元素比较短的时候(比如小于屏幕的高度),我们期望这个<footer>元素能够“粘连”在屏幕的底部
图.png
实现步骤：
①footer是一个独立的结构
②parent区域的高度通过min-height，变为视口高度
③footer要使用margin为负来确定自己的位置
④在main区域需要设置padding-bottom，防止负margin导致footer覆盖实际的内容
粘连布局.png
六、全屏布局
全屏布局就是上下定高满屏布局，常用于管理平台
全屏布局
网友评论