CSS布局

技术 评论

github

单栏布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!--公共样式-->
<style>
*{
  margin:0;
  padding:0;
}
.header,.banner,.footer{
  min-height: 50px;
  border-bottom: 1px solid #003300;
  background: #c6ffdd; /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #c6ffdd, #fbd786, #f7797d); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #c6ffdd, #fbd786, #f7797d); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.parent{
  margin-bottom: 30px;
}
</style>

margin

代码实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!-- margin -->
  <div class='parent layout1'>
    <style>
      /* 
        margin + max-width
        1.子元素 设定 margin: 0 auto; 指定宽度
        或者 父元素设定 margin: 0 auto; 指定最大宽度 子元素宽度百分百
        实用性：兼容性好，需指定宽度
      */
      .layout1 .header,.layout1 .banner,.layout1 .footer{
        margin: 0 auto;
        max-width: 960px;
      }
      /* 或者父元素直接  margin: 0 auto; max-width: 960px; 子元素宽度百分百*/
    </style>
    <div class='header'>header</div>
    <div class='banner'> 
      <p>margin + max-width</p>
      <p>1.子元素 设定 margin: 0 auto; 指定宽度</p>
      <p>或者 父元素设定 margin: 0 auto; 指定最大宽度 子元素宽度百分百</p>
      <p>实用性：兼容性好，需指定宽度</p>
    </div>
    <div class='footer'>footer</div>
  </div>

效果

inline-block + text-align

代码实现

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
<!-- inline-block text-align -->
  <div class='parent layout2'>
    <style>
      /* 
        inline-block text-align width max-width
        1.设置 子元素 display:inline-block 最大宽度 和 宽度百分
        2.父元素 text-align: center
        实用性：兼容性好，需要设定父元素，且子元素需指定宽度
      */
      .layout2.parent{
        text-align: center;
      }
      .layout2 .header,.layout2 .banner,.layout2 .footer{
        max-width: 960px;
        width: 100%;
        display: inline-block;
      }
    </style>
    <div class='header'>header</div>
    <div class='banner'> 
      <p>inline-block text-align width max-width 兼容性好，需要设定父元素，且子元素需要指定宽度 </p>
      <p>1.设置 子元素 display:inline-block 最大宽度 和 宽度百分百</p>
      <p>2.父元素 text-align: center </p>
      <p>实用性：兼容性好，需要设定父元素，且子元素需指定宽度 </p>
    </div>
    <div class='footer'>footer</div>
  </div>

效果

flexbox

代码实现

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
<!-- flexbox -->
  <div class='parent layout3'>
    <style>
      /* 
        flexbox
        1.父元素display:flex; 
        2.父元素 设定 子元素 排列方向 flex-direction: column;
        3.父元素 设定 子元素 根据交叉轴的对齐方式 align-items: center;
        4.子元素 设定宽度，最大宽度
        实用性：PC端ie9+ 移动端常用，写起来简洁明了
      */
      .layout3.parent{
        display:flex; 
        align-items: center;
        flex-direction: column;
      }
      .layout3 .header,.layout3 .banner,.layout3 .footer{
        max-width: 960px;
        width: 100%;
      }
    </style>
    <div class='header'>header</div>
    <div class='banner'> 
      <p>flexbox</p>
      <p>1.父元素display:flex; </p>
      <p>2.父元素 设定 子元素 排列方向 flex-direction: column;</p>
      <p>3.父元素 设定 子元素 根据交叉轴的对齐方式 align-items: center;</p>
      <p>4.子元素 设定宽度，最大宽度</p>
      <p>实用性：PC端ie9+ 移动端常用，写起来简洁明了</p>
    </div>
    <div class='footer'>footer</div>
  </div>

效果

双栏布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!--公共样式-->
<style>
    *{
      margin:0;
      padding:0;
    }
    .left{
      background-color: rgba(0, 0, 0, 0.1);
      width: 200px;
    }
    .right{
      background-color: rgba(0, 0, 0, 0.2);
    }
    .parent{
      margin-bottom: 30px;
      background: #c6ffdd; /* fallback for old browsers */
      background: -webkit-linear-gradient(to right, #c6ffdd, #fbd786, #f7797d); /* Chrome 10-25, Safari 5.1-6 */
      background: linear-gradient(to right, #c6ffdd, #fbd786, #f7797d); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    }
</style>

margin + float

代码实现

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
<!-- 浮动+边距 -->
<div class='parent layout1'>
  <style>
    /* 
      float + margin
      1.浮动左列
      2.右列自适应，且设置margin-left
      实用性：兼容性好，但是浮动后超出无法顶开父容器高度
    */
    .layout1 .left{
      float:left;
    }
    .layout1 .right{
      margin-left: 200px;
    }
  </style>
  <div class="left">
    <p>left</p>
  </div>
  <div class="right">
    <p>float + margin</p>
    <p>1.浮动左列</p>
    <p>2.右列自适应，且设置margin-left</p>
    <p>实用性：兼容性好，但是浮动后超出无法顶开父容器高度</p>
  </div>
</div>

效果

float

代码实现

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
34
35
36
37
38
<!-- 全浮动 -->
<div class='parent layout2'>
  <style>
    /* 
      float + margin
      1.浮动左列 
      2.右列自适应, 右列负margin-left
      3.右列子元素正margin-left
      实用性：兼容性虽好，但是相当麻烦的方案，从布局角度看 右列 部分超到了 左列 部分，还额外需要一个子元素，父元素由于两个子元素都浮动，高度彻底塌陷，还额外需要清除浮动
    */
    .layout2 .left{
      float:left;
    }
    .layout2 .right{
      width: 100%;
      float: right;
      margin-left: -200px;
    }
    .layout2 .right-box{
      margin-left: 200px;
    }
    .layout2{
      height: 120px;
    }
  </style>
  <div class="left">
    <p>left</p>
  </div>
  <div class="right">
    <div class="right-box">
      <p>float + margin</p>
      <p>1.浮动左列 </p>
      <p>2.右列自适应, 右列负margin-left</p>
      <p>3.右列子元素正margin-left</p>
      <p>实用性：兼容性虽好，但是相当麻烦的方案，从布局角度看 右列 部分超到了 左列 部分，还额外需要一个子元素，父元素由于两个子元素都浮动，高度彻底塌陷，还额外需要清除浮动</p>
    </div>
  </div>
</div>

效果

float + overflow

代码实现

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
34
35
36
<!-- 浮动 overflow 触发BFC -->
<div class='parent layout3'>
  <style>
    /* 
      float + overflow
      1.浮动左列，左列指定宽度
      2.右列overflow: hidden, 触发右列 BFC 模式
      3.父元素 overflow 之后，触发 BFC 模式，浮动后仍然可以撑开父容器高度
      实用性：兼容性好，较为常用的实现方式，基本没什么后遗症
    */
    .layout3{
      overflow: hidden;
    }
    .layout3 .left{
      float:left;
    }
    .layout3 .right{
      overflow: hidden;
    }
  </style>
  <div class="left">
    <p>left</p>
    <p>left</p>
    <p>left</p>
    <p>left</p>
    <p>left</p>
    <p>left</p>
  </div>
  <div class="right">
    <p>float + overflow</p>
    <p>1.浮动左列，左列指定宽度</p>
    <p>2.右列overflow: hidden, 触发右列 BFC 模式</p>
    <p>3.父元素 overflow 之后，触发 BFC 模式，浮动后仍然可以撑开父容器高度</p>
    <p>实用性：兼容性好，较为常用的实现方式，基本没什么后遗症</p>
  </div>
</div>

效果

表格布局

代码实现

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
<!-- 表格 -->
<div class='parent layout4'>
  <style>
    /* 
      表格布局
      1.父元素设置 display:table; table-layout:fixed; 设置宽度
      2.子元素设置 table-cell
      3.左列设置宽度
      实用性，不需要用到浮动，高度不会塌陷，且可以实现双边等高布局，但是也只会是等高布局，无法设置左右列边距
    */
    .layout4 .parent{
      display: table;
      table-layout: fixed;
      width: 100%;
    }
    .layout4 .right,.layout4 .left{
      display: table-cell;
    }
  </style>
  <div class="left">
    <p>left</p>
  </div>
  <div class="right">
    <p>表格布局</p>
    <p>1.父元素设置 display:table; table-layout:fixed; 设置宽度</p>
    <p>2.子元素设置 table-cell</p>
    <p>3.左列设置宽度</p>
    <p>实用性：不需要用到浮动，高度不会塌陷，且可以实现双边等高布局，但是也只会是等高布局，无法设置左右列边距</p>
  </div>
</div>

效果

flexbox布局

代码实现

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
<!-- flexbox -->
<div class='parent layout5'>
  <style>
    /* 
      flexbox
      1.父元素 display:flex
      2.左列设置宽度，右列flex:1
      3.右列flex:1
      4.align-items: start; 设置为 start 就不撑满
      实用性：PC端IE9+，简洁明了的布局方式，可以通过控制 align-items 实现等高或者不等高。
    */
    .layout5.parent{
      display: flex;
    }
    .layout5 .right{
      flex:1;
    }
  </style>
  <div class="left">
    <p>left</p>
  </div>
  <div class="right">
    <p>flexbox</p>
    <p>1.父元素 display:flex</p>
    <p>2.左列设置宽度，右列flex:1</p>
    <p>3.右列flex:1</p>
    <p>4.align-items: start; 设置为 start 就不撑满</p>
    <p>实用性：PC端IE9+，简洁明了的布局方式，可以通过控制 align-items 实现等高或者不等高。</p>
  </div>
</div>

效果

网格布局

代码实现

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
<!-- 网格布局 -->
<div class='parent layout6'>
  <style>
    /* 
      网格布局
      1.父元素 设置 display:grid 
      2.父元素 设置 grid-template-columns: 200px 1fr; 实现 左列100px 右列自适应
      3.align-items: start; 设置为 start 就不撑满
      实用性：更加简洁，高效的二维布局方式，但是兼容性 ie11+ 还是相对蛋疼
    */
    .parent.layout6{
      display: grid;
      grid-template-columns: 200px 1fr;
    }
  </style>
  <div class="left">
    <p>left</p>
  </div>
  <div class="right">
    <p>网格布局</p>
    <p>1.父元素 设置 display:grid </p>
    <p>2.父元素 设置 grid-template-columns: 200px 1fr; 实现 左列100px 右列自适应</p>
    <p>3.align-items: start; 设置为 start 就不撑满</p>
    <p>实用性：更加简洁，高效的二维布局方式，但是兼容性 ie11+ 还是相对蛋疼</p>
  </div>
</div>

效果

三栏布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!-- 公共样式 -->
  <style>
    *{
        margin:0;
        padding:0;
      }
      .left,.right{
        background-color: rgba(0, 0, 0, 0.1);
      }
      .parent{
        margin-bottom: 10px;
        background: #c6ffdd; /* fallback for old browsers */
        background: -webkit-linear-gradient(to right, #c6ffdd, #fbd786, #f7797d); /* Chrome 10-25, Safari 5.1-6 */
        background: linear-gradient(to right, #c6ffdd, #fbd786, #f7797d); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
      }
  </style>

圣杯布局

代码实现

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!-- 圣杯布局 -->
<div class="parent layout1">
  <style>
    /* 
      圣杯布局
      两边固定宽度，中间自适应
      1. 子元素都左浮动，父元素 padding 留出空间
      2. 中间元素宽度100%
      3. 左右元素相对定位 配合负边距
      缺点: 如果center部分宽度效于left部分，会造成布局塌陷，旁边两列不能自动填充高度
    */
    .layout1.parent{
      position: relative;
      padding-left: 100px;
      padding-right: 100px;
    }
    .layout1 .left,.layout1 .right{
      position: relative;
      height: 100px;
      width: 100px;
    }
    .layout1 .center{
      height: 300px;
      width:100%;
    }
    .layout1 .left,.layout1 .right,.layout1 .center{
      float: left;
    }
    .layout1 .left{
      left: -100px;
      margin-left: -100%;
    }
    .layout1 .right{
      right: -100px;
      margin-left: -100px;
    }
    .layout1{
      height: 300px;
    }
  </style>
  <div class="center">
    <p>圣杯布局</p>
    <p>两边固定宽度，中间自适应</p>
    <p>1. 子元素都左浮动，父元素 padding 留出空间</p>
    <p>2. 中间元素宽度100%</p>
    <p>3. 左右元素相对定位 配合负边距</p>
    <p>缺点: 如果center部分宽度效于left部分，会造成布局塌陷，旁边两列不能自动填充高度</p>
  </div>
  <div class="left">
    <p>left</p>
  </div>
  <div class="right">
    <p>right</p>
  </div>
</div>

效果

缺陷

双飞翼布局

代码实现

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!-- 双飞翼布局 -->
<div class="parent layout2">
  <style>
    /* 
      双飞翼布局
      圣杯布局的优化，实现内容和布局的分离
      1.在圣杯布局的基础上
      2.设定 parent 元素的最小宽度
      3.center 元素再增加一个子元素来撑开双边
      优点: 避免使用了无用的定位，由于父元素使用了 overflow 三个部分都能撑开高度
      缺点: 增加了一个 inner 层
    */
    .layout2.parent{
      min-width: 200px;
      overflow:hidden;
    }
    .layout2 .left,.layout2 .right{
      height: 100px;
      width: 100px;
    }
    .layout2 .center{
      width:100%;
      height: 300px;
    }
    .layout2 .left,.layout2 .right,.layout2 .center{
      float: left;
    }
    .layout2 .center .inner{
      margin: 0 100px;
    }
    .layout2 .left{
      margin-left: -100%;
    }
    .layout2 .right{
      margin-left: -100px;
    }  
  </style>
  <div class="center">
    <div class="inner">
      <p>双飞翼布局</p>
      <p>圣杯布局的优化，实现内容和布局的分离</p>
      <p>1.在圣杯布局的基础上</p>
      <p>2.设定 parent 元素的最小宽度</p>
      <p>3.center 元素再增加一个子元素来撑开双边</p>
      <p>优点: 避免使用了无用的定位，由于父元素使用了 overflow 三个部分都能撑开高度</p>
      <p>缺点: 增加了一个 inner 层</p>
    </div>
  </div>
  <div class="left">
    <p>left</p>
  </div>
  <div class="right">
    <p>right</p>
  </div>
</div>

效果

表格布局

代码实现

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
34
35
36
37
38
39
40
41
<!-- 表格布局 -->
<div class="parent layout3">
  <style>
    /* 
      表格布局
      1.父元素 diplay:table
      2.子元素 display: table-cell
      3.左右两边设置宽度，中间元素不设置宽度
      优点: 实现等高布局，兼容性很好,如果需要兼容flex不能用的情况，优先考虑此种实现
      缺点: 无法设置栏边距，等高布局无法改变，对SEO不友好
    */
    .layout3.parent{
      display: table;
      height: 150px;
      width: 100%;
    }
    .layout3 .left,.layout3 .right,.layout3 .center{
      display: table-cell;
    }
    .layout3 .left,.layout3 .right{
      width: 100px;
    }
    .layout3 .center{
      height: 300px;
    }
  </style>
  <div class="left">
    <p>left</p>
  </div>
  <div class="center">
    <p>表格布局</p>
    <p>1.父元素 diplay:table</p>
    <p>2.子元素 display: table-cell</p>
    <p>3.左右两边设置宽度，中间元素不设置宽度</p>
    <p>优点: 实现等高布局，兼容性很好,如果需要兼容flex不能用的情况，优先考虑此种实现</p>
    <p>缺点: 无法设置栏边距，等高布局无法改变，对SEO不友好</p>
  </div>
  <div class="right">
    <p>right</p>
  </div>
</div>

效果

flexbox 布局

代码实现

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
34
35
36
37
38
39
<!-- flexbox -->
<div class="parent layout4">
  <style>
    /* 
      flexbox布局
      1.父元素 diplay:flex
      2.左右两边 设置宽度
      3.中间元素 flex: 1
      4.父元素 align-items: stretch(填满)/start/end/center;控制是否填满等高
      优点：书写方便简洁，可以等高也可以不等高，基本就是一个属性设置的区别，移动端常用
      缺点：PC端IE10才开始支持
    */
    .layout4.parent{
      display: flex;
    }
    .layout4 .left,.layout4 .right{
      width: 100px;
    }
    .layout4 .center{
      flex: 1;
      height: 300px;
    }
  </style>
  <div class="left">
    <p>left</p>
  </div>
  <div class="center">
    <p>flexbox布局</p>
    <p>1.父元素 diplay:flex</p>
    <p>2.左右两边 设置宽度</p>
    <p>3.中间元素 flex: 1</p>
    <p>4.父元素 align-items: stretch(填满)/start/end/center;控制是否填满等高</p>
    <p>优点：书写方便简洁，可以等高也可以不等高，基本就是一个属性设置的区别，移动端常用</p>
    <p>缺点：PC端IE10才开始支持</p>
  </div>
  <div class="right">
    <p>right</p>
  </div>
</div>

效果

网格布局

代码实现

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
34
<!-- 网格布局 -->
<div class="parent layout5">
  <style>
    /* 
      网格布局
      1.父元素diplay:grid
      2.父元素设置 grid-template-columns
      3.align-items: stretch(填满)/start/end/center;控制是否填满等高
      优点：布局强大，二维布局能力出色，可以玩出很多骚操作。未来最流弊的布局方案了
      缺点：ie 谷歌一条街，打听打听谁是爹
    */
    .layout5.parent{
      display: grid;
      grid-template-columns: 100px 1fr 100px;
    }
    .layout5 .center{
      height: 300px;
    }
  </style>
  <div class="left">
    <p>left</p>
  </div>
  <div class="center">
    <p>网格布局</p>
    <p>1.父元素diplay:grid</p>
    <p>2.父元素设置 grid-template-columns</p>
    <p>3.align-items: stretch(填满)/start/end/center;控制是否填满等高</p>
    <p>优点：布局强大，二维布局能力出色，可以玩出很多骚操作。未来最流弊的布局方案了</p>
    <p>缺点：ie 谷歌一条街，打听打听谁是爹</p>
  </div>
  <div class="right">
    <p>right</p>
  </div>
</div>

效果

落雨Web Developer

保持耐心