css 布局的⼏种⽅式
前⾔
CSS 的布局应该是 CSS 体系中的重中之重了，主要的布局⽅式有 table 表格布局（早期），float 浮动布局和 flex 布局，还有针对于移动端的响应式布局，不论是⼯作还是⾯试都是⾮常重要的知识。
1 table 布局
table 布局是最简单的布局⽅式了，下⾯我们来看⼀个简单的例⼦<!DOCTYPE html><html lang ="en"><head > <meta chart ="UTF-8"> <title >CSS 布局</title ></head ><style >.container { height:200px ; width: 200px ;}.left { background-color: red }.right { background-color: green }</style ><body > <table class =container > <tbody > <tr > <td class =left > 左 </td > <td class =right > 右 </td > </tr > </tbody > </table ></body ></html >
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
效果如下
table 的特性决定了它⾮常适合⽤来做布局，并且表格中的内容可以⾃动居中，这是之前⽤的特别多的⼀种布局⽅式⽽且也加⼊了 display ：table;dispaly:table-cell 来⽀持 teble 布局。⽤法如下
但是它也有⾃⾝的局限性，⽐如 table ⽐其它 html 标记占更多的字节（造成下载时间延迟，占⽤服务器更多流量资源），table 会阻挡浏览器渲染引擎的渲染顺序。(会延迟页⾯的⽣成速度，让⽤户等待更久的时间)，但是某些情况下，当采⽤其他⽅式不能很好的达到⾃⼰的效果时，采⽤ table 布局能适应当前场景。
2 flex 布局
2.1 盒模型
在介绍 flex 布局之前，我们先了解⼀下盒模型的概念，这个是 css 最基础的概念，⾸先，我们引⽤⼀张图来解释
这是百度百科⾥⾯盒模型的⼀张图。⾸先最中间的是 content 区域，即我们常说的内容区。我们通常设置的 height 和 width 就是设置的这部分的长度。内容区外部是 padding 区域，这部分指的是内容区到边框的区域，即我们常说的内边距。然后就是 border 区，border 区本⾝也是占据空间的。边框外⾯是 margin 区，这部分指的是当前元素与其他元素的距离，即常说的外边距。<style >.table { displ
ay: table }.left { display: table-cell ;}.right { display: table-cell }</style ><div class =table > <div class =left ></div > <div class =right ></div ></div >
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
⾸先要明⽩我们平常说的宽度和⾼度指的是内容区的宽度和⾼度。
然后计算⼀个盒⼦占⽤的空间是 content + padding + border + margin
2.2 display / poistion
这⾥还要介绍两个属性，display 和 poistion
display 有如下⼏个值
block（元素表现为块级元素，有固定宽⾼，独占⼀⾏）
inline（元素表现为⾏内元素，不能设置宽⾼）
inline-block （对外表现为⾏内元素，对内表现为块级元素）3
position 有如下⼏个值
static（默认情况，存在⽂档流当中）
relative（根据元素本⾝原来所应该处的位置偏移，不会改变布局的计算）
absolute（绝对定位，脱离⽂档流，不会对别的元素造成影响，相对的是⽗级最近的 relative 或者 absolute 定位元素）
fixed（绝对定位，脱离⽂档流，相对于的是屏幕，就是那些浮动的⼴告那样，怎么拉都固定在同⼀个位置，⽽ absolute 元素离开屏幕就看不见了）
position 的层叠是按顺序层叠的，不过可以通过设置 z-index 来改变层叠顺序，只有 relative，absolute，fixed 可以设置 z-index。2.3 flexbox 布局
flexbox 布局即弹性盒⼦布局，它的特点是盒⼦本来就是并列的，只需要指定宽度，来看⼀个经典的三栏布局的例⼦
效果如下
有时我们可能需要两边定宽，中间⾃适应，那么可以这样写<!DOCTYPE html><html lang ="en"><head > <meta chart ="UTF-8"> <title >CSS 布局</title ></head ><style >.container { height:200px ; width: 200px ; display: flex }.left { background-color: red ; flex: 1;}.middle { background-color: yellow ; flex: 1; }.right { background-color: green ; flex: 1;}</style ><body > <div class =container > <div class =left ></div > <div class =middle ></div > <div class =right ></div > </div ></body ></html >
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
效果如下
如果想深⼊了解可以看阮⼀峰⽼师的⽂章
但是 flexbox 布局⽅式浏览器的⽀持不是太好，有⼀些兼容性的问题，但是是未来布局的趋势。
3 float 布局
float 布局应该是⽬前各⼤⽹站⽤的最多的⼀种布局⽅式了，但是也特别复杂，这⾥详细讲⼀下
⾸先，什么是浮动？
浮动元素是脱离⽂档流的，但不脱离⽂本流，这是什么意思呢，⽤过 word 的应该知道有⼀种图⽚环绕的⽅式是⽂字环绕吧，就是这种效果。
那么它有什么特点呢.left{ background-color: red ; width: 20px ;}.middle{ background-color: yellow ; flex: 1; }.right{ background-color: green ; width: 20px ;}
1
2
3
4
5
6
7
8
9
10
11
12
