专栏名称: SegmentFault思否
SegmentFault （www.sf.gg）开发者社区，是中国年轻开发者喜爱的极客社区，我们为开发者提供最纯粹的技术交流和分享平台。
目录
相关文章推荐
OSC开源社区  ·  RAG市场的2024：随需而变，从狂热到理性 ·  昨天  
程序猿  ·  41岁DeepMind天才科学家去世：长期受 ... ·  2 天前  
程序员小灰  ·  清华大学《DeepSeek学习手册》（全5册） ·  3 天前  
程序员小灰  ·  3个令人惊艳的DeepSeek项目，诞生了！ ·  2 天前  
程序员的那些事  ·  惊！小偷“零元购”后竟向 DeepSeek ... ·  4 天前  
51好读  ›  专栏  ›  SegmentFault思否

CSS布局解决方案（终结版）

SegmentFault思否  · 公众号  · 程序员  · 2018-03-18 08:00

正文

前端布局非常重要的一环就是页面框架的搭建，也是最基础的一环。在页面框架的搭建之中，又有居中布局、多列布局以及全局布局，今天我们就来总结总结前端干货中的CSS布局。

居中布局

水平居中

1）使用inline-block+text-align

（1）原理、用法

  • 原理：先将子框由块级元素改变为行内块元素，再通过设置行内块元素居中以达到水平居中。

  • 用法：对子框设置display:inline-block，对父框设置text-align:center。

（2）代码实例 

  1.  class="parent">
  2.     
     class="child>DEMO

  1. .child{
  2.     display:inline-block;
  3. }
  4. .parent{
  5.     text-align:center;
  6. }

（3）优缺点

  • 优点：兼容性好，甚至可以兼容ie6、ie7

  • 缺点：child里的文字也会水平居中，可以在.child添加text-align:left;还原

2）使用table+margin

（1）原理、用法


  • 原理：先将子框设置为块级表格来显示（类似 ），再设置子框居中以达到水平居中。

  • 用法：对子框设置display:table，再设置margin:0 auto。

    • （2）代码实例 

  1.  class="parent">
  2.     




    

     class="child>DEMO
  1. .child {
  2.     display:table;
  3.     margin:0 auto;
  4. }

（3）优缺点：

  • 优点：只设置了child，ie8以上都支持

  • 缺点：不支持ie6、ie7,将div换成table

3）使用absolute+transform

（1）原理、用法

  • 原理：将子框设置为绝对定位，移动子框，使子框左侧距离相对框左侧边框的距离为相对框宽度的一半，再通过向左移动子框的一半宽度以达到水平居中。当然，在此之前，我们需要设置父框为相对定位，使父框成为子框的相对框。

  • 用法：对父框设置position:relative，对子框设置position:absolute，left:50%，transform:translateX(-50%)。

（2）代码实例 

  1.  class="parent">
  2.     
     class="child>DEMO
  1. .parent {
  2.     position:relative;
  3. }
  4. .child {
  5.     position:absolute;
  6.     left:50%;
  7.     transform:translateX(-50%);
  8. }

（3）优缺点

  • 优点：居中元素不会对其他的产生影响

  • 缺点：transform属于css3内容，兼容性存在一定问题，高版本浏览器需要添加一些前缀

4）使用flex+margin

（1）原理、用法

  • 原理：通过CSS3中的布局利器flex将子框转换为flex item，再设置子框居中以达到居中。

  • 用法：先将父框设置为display:flex，再设置子框margin:0 auto。

（2）代码实例 

  1.  class="parent">
  2.     




    

     class="child>DEMO
  1. .parent {
  2.     display:flex;
  3. }
  4. .child {
  5.     margin:0 auto;
  6. }

（3）优缺点

  • 缺点：低版本浏览器(ie6 ie7 ie8)不支持

5）使用flex+justify-content

（1）原理、用法

  • 原理：通过CSS3中的布局利器flex中的justify-content属性来达到水平居中。

  • 用法：先将父框设置为display:flex，再设置justify-content:center。

（2）代码实例 

  1.  class="parent">
  2.     
     class="child>DEMO
  1. .parent {
  2.     display:flex;
  3.     justify-content:center;
  4. }

（3）优缺点

  • 优点：设置parent即可

  • 缺点：低版本浏览器(ie6 ie7 ie8)不支持

垂直居中

1）使用table-cell+vertical-align

（1）原理、用法

  • 原理：通过将父框转化为一个表格单元格显示（类似 和 ），再通过设置属性，使表格单元格内容垂直居中以达到垂直居中。

  • 用法：先将父框设置为display:table-cell，再设置vertical-align:middle。

    • （2）代码实例 

    1.  class="parent"




    
>
    2.     
       class="child>DEMO
    1. .parent {
    2.     display:table-cell;
    3.     vertical-align:middle;
    4. }

    （3）优缺点

    • 优点：兼容性较好，ie8以上均支持

    2）使用absolute+transform

    （1）原理、用法

    • 原理：类似于水平居中时的absolute+transform原理。将子框设置为绝对定位，移动子框，使子框上边距离相对框上边边框的距离为相对框高度的一半，再通过向上移动子框的一半高度以达到垂直居中。当然，在此之前，我们需要设置父框为相对定位，使父框成为子框的相对框。

    • 用法：先将父框设置为position:relative，再设置子框position:absolute，top:50%，transform:translateY(-50%)。

    （2）代码实例 

    1.  class="parent">
    2.     
       class="child>DEMO
    1. .parent {
    2.     position:relative;




    

    3. }
    4. .child {
    5.     position:absolute;
    6.     top:50%;
    7.     transform:translateY(-50%);
    8. }

    （3）优缺点

    • 优点：居中元素不会对其他的产生影响

    • 缺点：transform属于css3内容，兼容性存在一定问题，高版本浏览器需要添加一些前缀

    3）使用flex+align-items

    （1）原理、用法

    • 原理：通过设置CSS3中的布局利器flex中的属性align-times，使子框垂直居中。

    • 用法：先将父框设置为position:flex，再设置align-items:center。

    （2）代码实例 

    1.  class="parent">
    2.     
       class="child>DEMO
    1. .parent {
    2.     position:flex;
    3.     align-items:center;
    4. }

    （3）优缺点

    • 优点：只设置parent

    • 缺点：兼容性存在一定问题

    水平垂直居中

    1）使用absolute+transform

    （1）原理、用法

    • 原理：将水平居中时的absolute+transform和垂直居中时的absolute+transform相结合。详见：水平居中的3）和垂直居中的2）。

    • 见水平居中的3）和垂直居中的2）。

    （2）代码实例 

    1.  class="parent">
    2.     
       class="child>DEMO
    1. .parent {
    2.     position:relative;
    3. }
    4. .child {
    5.     position:absolute;
    6.     left:50%;
    7.     top:50%;
    8.     transform:tranplate(-50%,-50%);
    9. }

    （3）优缺点

    • 优点：child元素不会对其他元素产生影响

    • 缺点：兼容性存在一定问题

    2）使用inline-block+text-align+table-cell+vertical-align

    （1）原理、用法

    • 原理：使用inline-block+text-align水平居中，再用table-cell+vertical-align垂直居中，将二者结合起来。详见：水平居中的1）和垂直居中的1）。

    • 见水平居中的1）和垂直居中的1）。

    （2）代码实例 

    1.  class="parent">
    2.     
       class="child>DEMO
    1. .parent {
    2.     text-align:center;
    3.     display:table-cell;
    4.     vertical-align:middle;
    5. }
    6. .child {
    7.     display:inline-block;
    8. }

    （3）优缺点

    • 优点：兼容性较好

    3）使用flex+justify-content+align-items

    （1）原理、用法

    • 原理：通过设置CSS3布局利器flex中的justify-content和align-items，从而达到水平垂直居中。详见：水平居中的4）和垂直居中的3）。

    • 见水平居中的4）和垂直居中的3）。

    （2）代码实例 

    1.  class="parent">
    2.     
       class="child>DEMO
    1. .parent {
    2.     display:flex;
    3.     justify-content:center;
    4.     align-items:center;
    5. }

    （3）优缺点

    • 优点：只设置了parent

    • 缺点：兼容性存在一定问题

    多列布局

    定宽+自适应

    1）使用float+overflow

    （1）原理、用法

    • 原理：通过将左边框脱离文本流，设置右边规定当内容溢出元素框时发生的事情以达到多列布局。

    • 用法：先将左框设置为float:left、width、margin-left，再设置实际的右框overflow:hidden。

    （2）代码实例 

    1.  




    
class="parent">
    2.     
       class="left">
    3.         
      left
    4.     
    5.     
       class="right">
    6.         
      right
    7.         
      right
    8.     
    1. .left {




    

    2.     float:left;
    3.     width:100px;
    4.     margin-right:20px;
    5. }
    6. .right {
    7.     overflow:hidden;
    8. }

    （3）优缺点

    • 优点：简单

    • 缺点：不支持ie6

    2）使用float+margin

    （1）原理、用法

    • 原理：通过将左框脱离文本流，加上右框向右移动一定的距离，以达到视觉上的多列布局。

    • 用法：先将左框设置为float:left、margin-left，再设置右框margin-left。

    （2）代码实例 

    1.  class="parent">
    2.     
       class="left">
    3.         
      left
    4.     




    

    5.     
       class="right">
    6.         
      right
    7.         
      right
    8.     
    1. .left {
    2.     float:left;
    3.     width:100px;
    4. }
    5. .right {
    6.     margin-left:120px;
    7. }

    （3）优缺点

    • 优点：简单，易理解

    • 缺点：兼容性存在一定问题，ie6下有3px的bug。right下的p清除浮动将产生bug

    3）使用float+margin（改良版）

    （1）原理、用法

    • 原理：在1）的基础之上，通过向右框添加一个父框，再加上设置左、右父框属性使之产生BFC以去除bug。

    • 用法：先将左框设置为float:left、margin-left、position:relative，再设置右父框float:right、width:100%、margin-left，最后设置实际的右框margin-left。

    （2）代码实例 

    1.  class="parent">
    2.     
       class="left">
    3.         
      left
    4.     
    5.     
       class="rigth-fix">
    6.         
       class="right">
    7.             




    

      right
    8.             
      right
    9.         
    10.     
    1. .left {
    2.     float:left;
    3.     width:100px;
    4.     position:relative;
    5. }
    6. .right-fix {
    7.     float:right;
    8.     width:100%;
    9.     margin-left:-100px;
    10. }




    

    11. .right {
    12.     margin-left:120px;
    13. }

    （3）优缺点

    • 优点：简单，易理解

    4）使用table

    （1）原理、用法

    • 原理：通过将父框设置为表格，将左右边框转化为类似于同一行的td，从而达到多列布局。

    • 用法：先将父框设置为display:table、width:100%、table-layout:fixed，再设置左右框display:table-cell，最后设置左框width、padding-right。

    （2）代码实例 

    1.  class="parent">
    2.     
       class="left">
    3.         
      left
    4.     
    5.     
       class="right">
    6.         




    

      right
    7.         
      right
    8.     
    1. .parent {
    2.     display:table;
    3.     width:100%;
    4.     table-layout:fixed;
    5. }
    6. .left {
    7.     width:100px;
    8.     padding-right:20px;
    9. }
    10. .right,.left {
    11.     display:table-cell; 
    12. }

    5）使用flex

    （1）原理、用法

    • 原理：通过设置CSS3布局利器flex中的flex属性以达到多列布局。

    • 用法：先将父框设置为display:flex，再设置左框flex:1，最后设置左框width、margin-right。

    （2）代码实例 

    1.  class="parent">
    2.     
       class="left">
    3.         
      left
    4.     
    5.     
       class="right">
    6.         
      right
    7.         
      right
    8.     




    

    1. .parent {
    2.     display:flex;
    3. }
    4. .left {
    5.     width:100px;
    6.     margin-right:20px;
    7. }
    8. .right {
    9.     flex:1;
    10. }

    （3）优缺点

    • 优点：flex很强大

    • 缺点：兼容性存在一定问题，性能存在一定问题

    两列定宽+一列自适应

    （1）原理、用法

    • 原理：这种情况与两列定宽查不多。

    • 用法：先将左、中框设置为float:left、width、margin-right，再设置右框overflow:hidden。

    （2）代码实例 

    1.  class="parent">
    2.     
       




    
class="left">
    3.         
      left
    4.     
    5.     
       class="center">
    6.         
      center
    7.     
    8.     
       class="right">
    9.         
      right
    10.         
      right




    

    11.     
    1. .left,.center {
    2.     float:left;
    3.     width:100px;
    4.     margin-right:20px;
    5. }
    6. .right {
    7.     overflow:hidden;
    8. }
    不定宽+自适应

    1）使用float+overflow

    （1）原理、用法

    • 原理：这种情况与两列定宽查不多。

    • 用法：先将左框设置为float:left、margin-right，再设置右框overflow: hidden，最后设置左框中的内容width。

    （2）代码实例 

    1.  class="parent">
    2.     
       class="left">
    3.         




    

      left
    4.     
    5.     
       class="right">
    6.         
      right
    7.         
      right
    8.     
    1. .left{
    2.         float: left;
    3.         margin-right: 20px;
    4.     }
    5. .right{




    

    6.     overflow: hidden;
    7. }
    8. .left p{
    9.     width: 200px;
    10. }

    （3）优缺点

    • 优点：简单

    • 缺点：ie6下兼容性存在一定问题

    2）使用table

    （1）原理、用法

    • 原理：通过将父框改变为表格，将左右框转换为类似于同一行的td以达到多列布局，设置父框宽度100%，给左框子元素一个固定宽度从而达到自适应。

    • 用法：先将父框设置为display: table、width: 100%，再设置左、右框display: table-cell，最后设置左框width: 0.1%、padding-right以及左框中的内容width。

    （2）代码实例 

    1.  class="parent">
    2.     
       class="left">
    3.         
      left
    4.     
    5.     
       




    
class="right">
    6.         
      right
    7.         
      right
    8.     
    1. .parent{
    2.     display: table; width: 100%;
    3.     }
    4. .left,.right{
    5.     display: table-cell;
    6. }
    7. .left{
    8.     width: 0.1%;
    9.     padding-right: 20px;
    10. }
    11. .left p{
    12.     width:




    
200px;
    13. }

    （3）优缺点

    • 缺点：ie6 ie7不支持

    3）使用flex

    （1）原理、用法

    • 原理：通过设置CSS3布局利器flex中的flex属性以达到多列布局，加上给左框中的内容定宽、给右框设置flex达到不定款+自适应。

    • 用法：先将父框设置为display:flex，再设置右框flex:1，最后设置左框margin-right:20px、左框中的内容width。

    （2）代码实例 

    1.  class="parent">
    2.     
       class="left">
    3.         
      left
    4.     
    5.     
       class="right">
    6.         
      right




    

    7.         
      right
    8.     
    1. .parent {
    2.     display:flex;
    3. }
    4. .left {
    5.     margin-right:20px;
    6. }
    7. .right {
    8.     flex:1;
    9. }
    10. .left p{
    11.     width: 200px;
    12. }

    （3）优缺点

    • 优点：flex很强大

    • 缺点：兼容性存在一定问题，性能存在一定问题

    两列不定宽+一列自适应

    （1）原理、用法

    • 原理：这个情况与一列不定宽+一列自适应查不多。

    • 用法：先将左、中框设置为float:left、margin-right，再设置右框overflow:hidden，最后给左中框中的内容设置width。

    （2）代码实例 

    1.  class="parent">
    2.     
       class="left">
    3.         
      left
    4.     
    5.     
       class="center">
    6.         
      center
    7.     
    8.     
       class




    
="right">
    9.         
      right
    10.         
      right
    11.     
    1. .left,.center{
    2.     float: left;
    3.     margin-right: 20px;
    4. }
    5. .right{
    6.     overflow: hidden;
    7. }
    8. .left p,.center p{
    9.     width: 100px;
    10. }
    等分布局

    公式转化：

    l = w * n + g * ( n - 1 ) -> l = w * n + g * n - g -> l + g = （ w + g ） * n

    因此，我们需要解决两个问题：

    • 如何让总宽度增加g(即：L+g)

    • 如何让每个宽包含g（即：w+g）

    1）使用float

    （1）原理、用法

    • 原理：增大父框的实际宽度后，使用CSS3属性box-sizing进行布局的辅助。

    • 用法：先将父框设置为margin-left: -*px，再设置子框float: left、width: 25%、padding-left、box-sizing: border-box。

    （2）代码实例 

    1.  class="parent">
    2.     
       class="column">
      1
    3.     
       class="column">
      2
    4.     
       class="column">
      3
    5.     
       class="column">
      4
    1. .parent{
    2.     margin-left: -




    
20px;//l增加g
    3. }
    4. .column{
    5.     float: left;
    6.     width: 25%;
    7.     padding-left: 20px;
    8.     box-sizing: border-box;//包含padding区域 w+g
    9. }

    （3）优缺点

    • 优点：兼容性较好

    • 缺点：ie6 ie7百分比兼容存在一定问题

    2）使用table

    （1）原理、用法

    • 原理：通过增加一个父框的修正框，增大其宽度，并将父框转换为table，将子框转换为tabel-cell进行布局。

    • 用法：先将父框的修正框设置为margin-left: -*px，再设置父框display: table、width:100%、table-layout: fixed，设置子框display: table-cell、padding-left。

    （2）代码实例 

    1.  class="parent-fix">
    2.     
       class="parent">
    3.         
       




    
class="column">
      1
    4.         
       class="column">
      2
    5.         
       class="column">
      3
    6.         
       class="column">
      4
    7.     
    1. .parent-fix{
    2.     margin-left: -20px;//l+g
    3. }
    4. .parent{
    5.     display: table;
    6.     width:




    
100%;
    7.     table-layout: fixed;
    8. }
    9. .column{
    10.     display: table-cell;
    11.     padding-left: 20px;//w+g
    12. }

    （3）优缺点

    • 优点：结构和块数无关联

    • 缺点：增加了一层

    3）使用flex

    （1）原理、用法

    • 原理：通过设置CSS3布局利器flex中的flex属性以达到等分布局。

    • 用法：将父框设置为display: flex，再设置子框flex: 1，最后设置子框与子框的间距margin-left。

    （2）代码实例 

    1.  class="parent">
    2.     
       class="column">
      1
    3.     
       class="column">
      2
    4.     




    

       class="column">
      3
    5.     
       class="column">
      4
    1. .parent{
    2.     display: flex;
    3. }
    4. .column{
    5.     flex: 1;
    6. }
    7. .column+.column{
    8.     margin-left:20px;
    9. }

    （3）优缺点

    • 优点：代码量少，与块数无关

    • 缺点：兼容性存在一定问题

    定宽+自适应+两块高度一样高

    1）使用float

    （1）原理、用法

    • 原理：通过过分加大左右子框的高度，辅助超出隐藏，以达到视觉上的等高。

    • 用法：将父框设置overflow: hidden，再设置左右子框padding-bottom: 9999px、margin-bottom: -9999px，最后设置左框float: left、width、margin-right，右框overflow: hidden。

    （2）代码实例 

    1.  class="parent">
    2.     
       class="left">
    3.         
      left
    4.     
    5.     
       class="right">
    6.         
      right
    7.         
      right
    8.     




    

    1. p{
    2.     background: none!important;
    3. }
    4. .left,.right{
    5.     background: #444;
    6. }
    7. .parent{
    8.     overflow: hidden;
    9. }
    10. .left,.right{
    11.     padding-bottom: 9999px;
    12.     margin-bottom: -9999px;
    13. }
    14. .left{
    15.     float: left; 
    16.     width: 100px;
    17.     margin-right: 20px;
    18. }
    19. .right{
    20.     overflow: hidden;
    21. }

    (3)优缺点

    • 优点：兼容性好

    • 缺点：伪等高，不是真正意义上的等高

    2）使用table

    （1）原理、用法

    • 原理：将父框转化为tabel，将子框转化为tabel-cell布局，以达到定宽+自适应+两块高度一样高。

    • 用法：先将父框设置为display:table、width:100%、table-layout:fixed，再设置左右框为display:table-cell，最后设置左框width、padding-right。

    （2）代码实例 

    1.  class="parent">
    2.     
       class="left">
    3.         
      left
    4.     
    5.     
       class="right">
    6.         
      right
    7.         




    

      right
    8.     
    1. .parent {
    2.     display:table;
    3.     width:100%;
    4.     table-layout:fixed;
    5. }
    6. .left {
    7.     width:100px;
    8.     padding-right:20px;
    9. }
    10. .right,.left {
    11.     display:table-cell;
    12. }

    3）使用flex （1）原理、用法

    • 原理：通过设置CSS3布局利器flex中的flex属性以达到定宽+自适应+两块高度一样高。

    • 用法：将父框设置为display: flex，再设置左框width、margin-right，最后设置右框flex:1。

    （2）代码实例 

    1.  




    
class="parent">
    2.     
       class="left">
    3.         
      left
    4.     
    5.     
       class="right">
    6.         
      right
    7.         
      right
    8.     
    1. .parent {




    

    2.     display:flex;
    3. }
    4. .left {
    5.     width:100px;
    6.     margin-right:20px;
    7. }
    8. .right {
    9.     flex:1;
    10. }

    （3）优缺点

    • 优点：代码少，flex很强大

    • 缺点：兼容性存在一定问题

    4)使用display

    （1）原理、用法

    • 原理：通过设置display中的CSS3的-webkit-box属性以达到定宽+自适应+两块高度一样高。

    • 用法：将父框设置为display: -webkit-box、width: 100%，再设置左框width、margin-right，最后设置右框-webkit-box-flex: 1。

    （2）代码实例 

    1.  class="parent">
    2.     
       class="left">left
    3.     
       class="right">right 
    1. .parent {
    2.     width: 100%;
    3.     display: -webkit-box;
    4. }
    5. .left {
    6.     width:100px;
    7.     margin-right: 20px;
    8. }
    9. .right {
    10.     -webkit-box-flex: 1;
    11. }

    (3)优缺点

    • 缺点：兼容性存在较大的问题

    全屏布局

    全屏布局的特点

    • 滚动条不是全局滚动条，而是出现在内容区域里，往往是主内容区域

    • 浏览器变大时，撑满窗口

    全屏布局的方法

    1）使用position

    （1）原理、用法







请到「今天看啥」查看全文


推荐文章
OSC开源社区  ·  RAG市场的2024：随需而变，从狂热到理性
昨天
程序猿  ·  41岁DeepMind天才科学家去世：长期受抑郁困扰、曾诉AI工作压力太大、为利润而工作
2 天前
程序员小灰  ·  清华大学《DeepSeek学习手册》（全5册）
3 天前
程序员小灰  ·  3个令人惊艳的DeepSeek项目，诞生了！
2 天前
程序员的那些事  ·  惊！小偷“零元购”后竟向 DeepSeek 求免罪，结果...
4 天前
基层麻醉网  ·  用硝普钠不注意这些问题，救命药变成毒药！
7 年前
TechWeb  ·  颜值和胡歌一样高！荣耀9真机泄露：果然是胡歌代言
7 年前
i排版  ·  和大V学排版——emoji篇
7 年前
程序员之家  ·  程序员就是这样聊天把女朋友聊没的。。。
7 年前
华招医药网  ·  【解读】一文读懂网售药品管理办法中的全新制度设计
7 年前
Sov5搜索   ·   小百科   ·   今天看啥   ·   移动版
51好读 - 好文章就要读起来!