CSS 布局方式

W3C标准

---

由万维网联盟制定的一系列标准，包括：

• 结构化标准语言（HTML和XML）
• 表现标准语言（CSS）
• 行为标准语言（DOM和ECMAScript）

CSS中的定位机制

---

在CSS中存在三种定位机制：

• 标准文档流（Normal flow）
• 浮动（Floats）
• 绝对定位（Absolute positioning）

标准文档流特点

• 从上到下，从左到右，输出文档内容
• 由块级元素和行级元素组成

块级元素特点

• 从左到右撑满页面，独占一行
• 触碰到页面边缘时，会自动换行

行级元素特点

• 能在同一行内显示
• 不会改变HTML文档结构

注意： 块级元素和行级元素都是盒子模型

盒子模型

---

盒子模型—网页布局的基石,由4部分组成

• 边框（border）
• 外边距（margin）
• 内边距（padding）
• 盒子中的内容（content）
  前三者是盒子模型的特性，最后一点可以理解为盒子模型的功能，可用于盛放网页内容，包括文本、图片、音频、视频等

盒子模型的三维立体结构

第一层：border 第二层：内容+padding 第三层：背景图片 第四层：背景颜色 第五层：外边距

盒子模型尺寸

盒子模型尺寸=边框+外边距+内边距+盒子中的内容尺寸

注意：

• 标准盒子模型： 宽度= 内容的宽度（content）+ border+ padding+ margin
• 低版本IE盒子模型： 宽度= 内容的宽度（content+ border+ padding）+ margin
  区别在于内容的宽度是否包含border和padding，可通过设置box-sizing:border-box(内容宽度包含border和padding值)来实现统一

table 实现布局

---

最初网页出现时使用，DIV布局出现后废弃

两栏布局

---

两栏布局：一栏定宽，一栏自适应。这样子做的好处是定宽的那一栏可以做广告，自适应的可以作为内容主体。

实现方式

• float+margin

  
    
  定宽
    
  自适应
  
  
  .left{
    width: 200px;
    height: 600px;
    background: red;
    float: left;
    display: table;
    text-align: center;
    line-height: 600px;
    color: #fff;
  }
  
  .right{
    margin-left: 210px;
    height: 600px;
    background: yellow;
    text-align: center;
    line-height: 600px;
  }
  

如下图：

two-layout.png

• 其他的方法：还可以使用position的absolute，可以使用同样的效果

三栏布局

---

特点：两边定宽，然后中间的width是auto的，可以自适应内容，再加上margin边距，来进行设定。

float 实现三栏布局

使用左右两栏使用float属性，中间栏使用margin属性进行撑开，注意的是html的结构

左栏
右栏
中间栏

.left{
  width: 200px;height: 300px; background: yellow; float: left;    
}
.right{
  width: 150px; height: 300px; background: green; float: right;
}
.middle{
  height: 300px; background: red; margin-left: 220px; margin-right: 160px;
}

如下图：

third-layout.png

缺点：

• 当宽度小于左右两边宽度之和时，右侧栏会被挤下去
• html的结构不正确

position 定位实现

左右两栏使用position进行定位，中间栏使用margin进行定位

左栏
中间栏
右栏

.left{
    background: yellow;
    width: 200px;
    height: 300px;
    position: absolute;
    top: 0;
    left: 0;
}
.middle{
    height: 300px;
    margin: 0 220px;
    background: red;
}
.right{
    height: 300px;
    width: 200px;
    position: absolute;
    top: 0;
    right: 0;
    background: green;
}

如下图：

30096185-9cb152e8-9309-11e7-9351-6324d96130ba.png

缺点：当父元素有内外边距时，会导致中间栏的位置出现偏差

float和BFC配合圣杯布局

将middle的宽度设置为100%，然后将其float设置为left，其中的main块设置margin属性，然后左边栏设置float为left，之后设置margin为-100%，右栏也设置为float：left，之后margin-left为自身大小。

    

        
中间
    
    

        左栏
    
    

        右栏
    


.wrapper{
    overflow: hidden;  //清除浮动
}
.middle{
    width: 100%;
    float: left;
}
.middle .main{
    margin: 0 220px;
    background: red;
}
.left{
    width: 200px;
    height: 300px;
    float: left;
    background: green;
    margin-left: -100%;
}
.right{
    width: 200px;
    height: 300px;
    float: left;
    background: yellow;
    margin-left: -200px;
}

如下图：

bfc-layout.png

缺点：

• 结构不正确
• 多了一层标签

flex 布局

    
左栏
    
中间
    
右栏


.wrapper{
    display: flex;
}
.left{
    width: 200px;
    height: 300px;
    background: green;
}
.middle{
    width: 100%;
    background: red;
    marign: 0 20px;
}
.right{
    width: 200px;
    height: 3000px;
    background: yellow;
}

如下图：

third-layout.png

缺点： 兼容性问题

参考文章： https://segmentfault.com/a/1190000011358507