CSS 几种常见的布局方式归纳

CSS 几种常见的布局方式

一.单列布局

特点:设置等宽居中

常见的单列布局有两种

(1)header,content,footer等宽居中布局

(2)header,footer等宽,content略窄居中布局

第一种:设置三个块等宽,通过margin:0 auto设置居中

#header {
    height: 100px;
    max-width: 960px;
    margin: 0 auto;
    background: #000;
}
#content {
    min-height: 500px;
    max-width: 960px;
    margin: 0 auto;
    background: #ccc;
}
#footer {
    height: 100px;
    max-width: 960px;
    margin: 0 auto;
    background: #000;
}

<div id="header">
</div>
<div id="content">
</div>
<div id="footer">
</div>

第二种:设置三个块全部通栏,然后看content的内容的版心.设置margin:0 auto居中即可

 #header {
     height: 100px;
     margin: 0 auto;
     background: #000;
 }
 #content {
     background: #ccc;
 }
 #main {
     max-width: 960px;
     min-height: 500px;
     margin: 0 auto;
     background: red;
 }
 #footer {
     height: 100px;
     margin: 0 auto;
     background: #000;
 }
 
 
<div id="header">
</div>
<div id="content">
    <div id="main">
    </div>
</div>
<div id="footer">
</div>

二.两列布局

最常见的就是左侧定宽,右侧自适应

1.方法一 利用float和margin-left实现

PS:IE6会有3px的bug

 #asider {
     min-width: 100px;
     float: left;
     background: #000;
 }
 #content {
     background: red;
     margin-left: 100px;
 }

2.方法二 利用float和overflow实现

overflow:hidden,触发BFC模式,浮动无法影响,隔离其他元素,IE6不支持,左侧设置margin-left当做两列之间的边距,右侧利用overflow:hidden进行形成BFC模式如果需要将两列设置为等高,可以用下述方法.将"背景"设置为等高,其实并不是内容的等高

padding-bottom:100px;margin-bottom:-100px;

 #asider {
     min-width: 100px;
     float: left;
     background: green;
 }
 #content {
     background: red;
     overflow: hidden;
 }
 #asider,#content{
     padding-bottom:100px;margin-bottom:-100px;
 }

3.方法三 利用flex弹性盒

利用右侧容器的flex:1,均分了剩余的宽度,也实现同样的效果,而align-items默认值为stretch,故二者相等

 #wrap{
     display: flex;
 }
 #asider {
     min-width: 100px;
     background: green;
 }
 #content {
     background: red;
     flex:1;
 }

4.方法四 利用grid栅格布局

跟flex布局类似

#wrap{
    display: grid;
    grid-template-columns: auto 1fr;
   
}
#asider {
    min-width: 100px;
    background: green;
}
#content {
    background: red;
}

5.方法五 利用table布局

#wrap{
    display: table;
    table-layout: fixed;
    width: 100%;
}
#asider {
    display: table-cell;
    width: 100px;
    background: green;
}
#content {
    display: table-cell;
    background: red;
}

三.三列布局

常见三列布局为中间自适应两侧定宽

1.方法一 利用float和margin是实现

 #left {
     width: 100px;
     float: left;
     background: red;
 }
 #center {
     float: left;
     width: 100%;
     margin-right: -200px;
     background: green;
 }
 #right {
     width: 100px;
     float: right;
     background: #ccc;
 }
 
 <div id="wrap">
    <div id="left">
        1213
    </div>
    <div id="center">
        134
    </div>
    <div id="right">
        224
    </div>
</div>

2.方法二: 利用float

上述这种方式,稍显复杂,其实只需要左右定宽,浮动中间不用管即可(注意,使用这种方式时,右边的栏目要放中间区域的前面)

#left {
    width: 100px;
    float: left;
    background: red;
}
#center {
    background: green;
}
#right {
    width: 100px;
    float: right;
    background: #ccc;
}

<div id="wrap">
    <div id="left">
    </div>
    <div id="right">
      
    </div>
    <div id="center">
    </div>
</div>

3.方法三:利用绝对定位absolute

#left {
    position: absolute;
    left:0;
    width: 100px;
    background: red;
}
#center {
    position: absolute;
    left:100px;
    right: 100px;
    background: green;
}
#right {
    width: 100px;
    position: absolute;
    right:0;
    background: #ccc;
}      

4.方法四 弹性盒flex

设置为弹性盒模式,左右定宽,中间直接占满所有等份

#wrap {
    display: flex;
}
#left {
    width: 100px;
    background: red;
}
#center {
    flex: 1;
    background: green;
}
#right {
    width: 100px;
    background: #ccc;
}

5.方法五 table布局

#wrap {
    display: table;
    width: 100%;
}
#left {
    display: table-cell;
    width: 100px;
    background: red;
}
#center {
    display: table-cell;
    background: green;
}
#right {
    display: table-cell;
    width: 100px;
    background: #ccc;
}

6.方法六 grid栅格布局

#wrap {
    display: grid;
    grid-template-columns:100px auto 100px;
}
#left {
    background: red;
}
#center {
    background: green;
}
#right {
    background: #ccc;
}

7.圣杯布局

比较特殊的三栏布局,同样也是两边固定宽度,中间自适应,唯一的区别是dom结构必须先写中间列部分

实现步骤:

(1) 三个部分都是设置为左浮动,然后设置center的宽度为100%(中间列自适应) 此时left和right会跳到下一行

(2) 通过设置margin-left为负值,让left和right回到与center为同一行

(3) 通过设置父容器的padding-left和padding-right,让左右两边留出间隙

(4) 通过设置相对定位,让left和right部分移动到两边

#wrap {
   padding-left: 100px;
   padding-right: 100px;
}
#left {
    float: left;
    width: 100px;
    background: red;
    position: relative;
    left:-100px;
    margin-left: -100%;
}
#center {
    float: left;
    width: 100%;
    background: green;
}
#right {
    float: left;
    width: 100px;
    background: red;
    position: relative;
    right:-100px;
    margin-left: -100px;
}

缺点

• center的最小宽度不能小于left的宽度,否则left会掉到下一行
• 如果其中一列的内容高度比较长,其他两列的背景并不会自动填充

8.双飞翼布局

同样也是

实现步骤与圣杯布局类似,只是做了改进而已,在外层加个最小宽度,2倍的left宽度和right宽度,然后在center中加了一个div,并设置margin:0 100px

 #wrap {
   min-width: 400px; /* 2倍 left宽度+right宽度 */
 }
 #left {
     float: left;
     width: 100px;
     background: red;
     margin-left: -100%;
 }
 #center {
     float: left;
     width: 100%;
     background: green;
 }
 #inner{
     margin: 0 100px;
 }
 #right {
     float: left;
     width: 100px;
     background: red;
     margin-left: -100px;
 }

圣杯布局和双飞翼布局对比:

• 两种布局方式都是把主列放在文档流最前面，使主列优先加载。
• 两种布局方式在实现上也有相同之处，都是让三列浮动，然后通过负外边距形成三列布局。
• 两种布局方式的不同之处在于如何处理中间主列的位置： 圣杯布局是利用父容器的左、右内边距+两个从列相对定位; 双飞翼布局是把主列嵌套在一个新的父级块中利用主列的左、右外边距进行布局调整

四.总结

上面提到了5种方式的布局,flex,float,grid,table,absolute,下面来总结下这5种方式布局的优缺点

1.float布局

• 优点:简单,兼容性好,重点是要清除浮动
• 缺点:浮动元素脱离文档流,要做清除浮动,防止高度塌陷

2.absolute布局

• 优点:简单,粗暴,不容易出问题
• 缺点:绝对定位脱离文档流,意味着下面所有子元素也会脱离文档流

3.flex布局

• 优点: 简单快捷
• 缺点:不支持IE8以下

4.table布局

• 优点:简单,代码少
• 缺点:当其中一栏高度超出时,另外两栏也会一起变高

5.grid布局

与flex类似

五.扩展瀑布流

使用css的multi-column为例来实现

// 页面
#Falls{
  margin: 0 auto;
  column-count: 5;
  column-width: 240px;
  column-gap: 20px;
  // 每一个模块的样式
  .item{
    break-inside: avoid;    // 防止多列布局，分页媒体和多区域上下文中的意外中断
    margin-bottom: 10px;
    background: #fff;
    border: 1px solid #ccc;
    // 图片的样式
    .item_img{
      width: 100%;
      vertical-align: middle;
    }
    // 图片信息
    .image_info{
      padding: 5px 10px;
      text-align: center;
    }
  }
}

<div id="Falls">
  <!--每一个模块-->
  <div class="item">
    <!--图片-->
    <img class="item_img" src="地址"/>
    <!--图片信息-->
    <div class="image_info">努力保持一个好心情</div>
  </div>
  ...
</div>