CSS常见的几种布局
Posted 筑梦前端
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS常见的几种布局相关的知识,希望对你有一定的参考价值。
▼
本文概要
本文将介绍如下几种CSS常见的布局:
▸单列布局
▸两列自适应布局
▸圣杯布局和双飞翼布局
▸粘连布局
1
单列布局
1.常见的单列布局有两种:
① header,content和footer等宽的单列布局;
② header与footer等宽,content略窄的单列布局。
2.如何实现?
对于第一种,先通过对header,content,footer统一设置width:1000px;或者max-width:1000px(这两者的区别是当屏幕小于1000px时,前者会出现滚动条,后者则不会,显示出实际宽度);然后设置margin:auto实现居中即可得到。
1<div class="header"></div>
2<div class="content"></div>
3<div class="footer"></div>
1.header{
2 margin:0 auto;
3 max-width: 960px;
4 height:100px;
5 background-color: blue;
6}
7.content{
8 margin: 0 auto;
9 max-width: 960px;
10 height: 400px;
11 background-color: aquamarine;
12}
13.footer{
14 margin: 0 auto;
15 max-width: 960px;
16 height: 100px;
17 background-color: aqua;
18}
对于第二种,header、footer的内容宽度不设置,块级元素充满整个屏幕,但header、content和footer的内容区设置同一个width,并通过margin:auto实现居中。
1<div class="header">
2 <div class="nav"></div>
3</div>
4<div class="content"></div>
5<div class="footer"></div>
1.header{
2 margin:0 auto;
3 max-width: 960px;
4 height:100px;
5 background-color: blue;
6}
7.nav{
8 margin: 0 auto;
9 max-width: 800px;
10 background-color: darkgray;
11 height: 50px;
12}
13.content{
14 margin: 0 auto;
15 max-width: 800px;
16 height: 400px;
17 background-color: aquamarine;
18}
19.footer{
20 margin: 0 auto;
21 max-width: 960px;
22 height: 100px;
23 background-color: aqua;
24}

2
两列自适应布局
两列自适应布局是指一列由内容撑开,另一列撑满剩余宽度的布局方式。
1.float+overflow:hidden
如果是普通的两列布局,浮动+普通元素的margin便可以实现,但如果是自适应的两列布局,利用float+overflow:hidden便可以实现,这种办法主要通过overflow触发BFC,而BFC不会重叠浮动元素。由于设置overflow:hidden并不会触发IE6-浏览器的haslayout属性,所以需要设置zoom:1来兼容IE6-浏览器。
具体代码如下:
1<div class="parent" style="background-color: lightgrey;">
2 <div class="left" style="background-color: lightblue;">
3 <p>left</p>
4 </div>
5 <div class="right" style="background-color: lightgreen;">
6 <p>right</p>
7 <p>right</p>
8 </div>
9</div>
1.parent {
2 overflow: hidden;
3 zoom: 1;
4}
5.left {
6 float: left;
7 margin-right: 20px;
8}
9.right {
10 overflow: hidden;
11 zoom: 1;
12}
注意点:如果侧边栏在右边时,注意渲染顺序。即在html中,先写侧边栏后写主内容。
2.Flex布局
Flex布局,也叫弹性盒子布局,区区简单几行代码就可以实现各种页面的的布局。
1//html部分同上
2.parent {
3 display:flex;
4}
5.right {
6 margin-left:20px;
7 flex:1;
8}
3.grid布局
Grid布局,是一个基于网格的二维布局系统,目的是用来优化用户界面设计。
1//html部分同上
2.parent {
3 display:grid;
4 grid-template-columns:auto 1fr;
5 grid-gap:20px
6}

3
三栏布局
特征:中间列自适应宽度,旁边两侧固定宽度,实现三栏布局有多种方式(可以猛戳实现三栏布局的几种方法),本文着重介绍圣杯布局和双飞翼布局。
1.圣杯布局
① 特点
比较特殊的三栏布局,同样也是两边固定宽度,中间自适应,唯一区别是dom结构必须是先写中间列部分,这样实现中间列可以优先加载。
1 .container {
2 padding-left: 220px;//为左右栏腾出空间
3 padding-right: 220px;
4 }
5 .left {
6 float: left;
7 width: 200px;
8 height: 400px;
9 background: red;
10 margin-left: -100%;
11 position: relative;
12 left: -220px;
13 }
14 .center {
15 float: left;
16 width: 100%;
17 height: 500px;
18 background: yellow;
19 }
20 .right {
21 float: left;
22 width: 200px;
23 height: 400px;
24 background: blue;
25 margin-left: -200px;
26 position: relative;
27 right: -220px;
28 }
1 <article class="container">
2 <div class="center">
3 <h2>圣杯布局</h2>
4 </div>
5 <div class="left"></div>
6 <div class="right"></div>
7 </article>
② 实现步骤
三个部分都设定为左浮动,否则左右两边内容上不去,就不可能与中间列同一行。然后设置center的宽度为100%(实现中间列内容自适应),此时,left和right部分会跳到下一行。
通过设置margin-left为负值让left和right部分回到与center部分同一行。
通过设置父容器的padding-left和padding-right,让左右两边留出间隙。
通过设置相对定位,让left和right部分移动到两边。
③ 缺点
● center部分的最小宽度不能小于left部分的宽度,否则会left部分掉到下一行;
● 如果其中一列内容高度拉长(如下图),其他两列的背景并不会自动填充。(借助伪等高布局可解决)
④ 伪等高布局
等高布局是指子元素在父元素中高度相等的布局方式。等高布局的实现包括伪等高和真等高,伪等高只是看上去等高而已,真等高是实实在在的等高。
此处我们通过伪等布局便可解决圣杯布局的第二点缺点,因为背景是在padding区域显示的,设置一个大数值的padding-bottom,再设置相同数值的负的margin-bottom,并在所有列外面加上一个容器,并设置overflow:hidden把溢出背景切掉。这种可能实现多列等高布局,并且也能实现列与列之间分隔线效果,结构简单,兼容所有浏览器。新增代码如下:
1 .center,
2 .left,
3 .right {
4 padding-bottom: 10000px;
5 margin-bottom: -10000px;
6 }
7 .container {
8 padding-left: 220px;
9 padding-right: 220px;
10 overflow: hidden;//把溢出背景切掉
11 }
2.双飞翼布局
① 特点
同样也是三栏布局,在圣杯布局基础上进一步优化,解决了圣杯布局错乱问题,实现了内容与布局的分离。而且任何一栏都可以是最高栏,不会出问题。
1 .container {
2 min-width: 600px;//确保中间内容可以显示出来,两倍left宽+right宽
3 }
4 .left {
5 float: left;
6 width: 200px;
7 height: 400px;
8 background: red;
9 margin-left: -100%;
10 }
11 .center {
12 float: left;
13 width: 100%;
14 height: 500px;
15 background: yellow;
16 }
17 .center .inner {
18 margin: 0 200px; //新增部分
19 }
20 .right {
21 float: left;
22 width: 200px;
23 height: 400px;
24 background: blue;
25 margin-left: -200px;
26 }
1 <article class="container">
2 <div class="center">
3 <div class="inner">双飞翼布局</div>
4 </div>
5 <div class="left"></div>
6 <div class="right"></div>
7 </article>
② 实现步骤(前两步与圣杯布局一样)
● 三个部分都设定为左浮动,然后设置center的宽度为100%,此时,left和right部分会跳到下一行;
● 通过设置margin-left为负值让left和right部分回到与center部分同一行;
● center部分增加一个内层div,并设margin: 0 200px。
③ 缺点
多加一层 dom 树节点,增加渲染树生成的计算量。
3.两种布局实现方式对比:
● 两种布局方式都是把主列放在文档流最前面,使主列优先加载。
● 两种布局方式在实现上也有相同之处,都是让三列浮动,然后通过负外边距形成三列布局。
● 两种布局方式的不同之处在于如何处理中间主列的位置:
圣杯布局是利用父容器的左、右内边距+两个从列相对定位;
双飞翼布局是把主列嵌套在一个新的父级块中利用主列的左、右外边距进行布局调整

4
粘连布局
1.特点
● 有一块内容<main>,当<main>的高康足够长的时候,紧跟在<main>后面的元素<footer>会跟在<main>元素的后面。
● 当<main>元素比较短的时候(比如小于屏幕的高度),我们期望这个<footer>元素能够“粘连”在屏幕的底部
当main足够长时:
当main比较短时:
具体代码如下:
1 <div id="wrap">
2 <div class="main">
3 main <br />
4 main <br />
5 main <br />
6 </div>
7 </div>
8 <div id="footer">footer</div>
1 <div id="wrap">
2 * {
3 margin: 0;
4 padding: 0;
5 }
6 html,
7 body {
8 height: 100%;//高度一层层继承下来
9 }
10 #wrap {
11 min-height: 100%;
12 background: pink;
13 text-align: center;
14 overflow: hidden;
15 }
16 #wrap .main {
17 padding-bottom: 50px;
18 }
19 #footer {
20 height: 50px;
21 line-height: 50px;
22 background: deeppink;
23 text-align: center;
24 margin-top: -50px;
25 }
2.实现步骤
① footer必须是一个独立的结构,与wrap没有任何嵌套关系;
② wrap区域的高度通过设置min-height,变为视口高度;
③ footer要使用margin为负来确定自己的位置;
④ 在main区域需要设置 padding-bottom。这也是为了防止负 margin 导致 footer 覆盖任何实际内容。
筑梦前端
各类前端教学新鲜资讯
尽在潭州教育前端学院
以上是关于CSS常见的几种布局的主要内容,如果未能解决你的问题,请参考以下文章