简述传统盒子模型与FlexBox弹性盒子模型

前端开发人员在开发页面的时候，必定会涉及到一面布局。好像现在的页面布局方法大致有两种，一种是传统的盒子模型（margin、border、padding、content）；另外一种是比较新兴的技术FlexBox弹性盒子模型。

 

▍传统盒子模型

传统盒子模型就是由外边距（margin）、边框（border）、内边距（padding）以及内容（content）组成。示意图如下：

利用这种盒子模型能完成大部分的页面布局，但是对于一些特殊的页面布局，这种传统的盒子模型实现起来非常的不方便，比如垂直居中等等。

 

▍FlexBox弹性盒子模型

Flex布局，可以简便、完整、响应式地实现各种页面布局。

具体flex使用方法可参考这两个教程：菜鸟教程、冰川的博客。

【注意】设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

 

▍示例：将DIV三等分

一般使用的方法不外乎4种：百分比（浮动（float）+百分比、行内元素（inline-block）+百分比）、display:table+display:table-cell、flex布局、bootstrap栅格系统。这里简述使用百分比和flex布局两种方法：

HTML如下：

<div class="father">
    <div class="child child-first"></div>
    <div class="child child-second"></div>
    <div class="child child-third"></div>
</div>

1、百分比

.father{
    width: 400px;
    height: 150px;
    background-color: black;
}

.child{
    float: left;
    width: 33.3%;
    height: 150px;
}

.child-first{
    background-color: red;
}

.child-second{
    background-color: blue;
}

.child-third{
    background-color: yellow;
}

效果如下

粗看好像是达到效果了，但是一旦将页面放大就露出马脚了，在最右侧暴露出了一个黑色块

33.3%*3=99.9%，并没有完全真正的占满整个父元素，这可能造成一些不必要的隐患。

2、flex布局

.father{
    display: flex;
    width: 400px;
    height: 150px;
    background-color: black;
}

.child{
    flex: 1;
    height: 150px;
}

.child-first{
    background-color: red;
}

.child-second{
    background-color: blue;
}

.child-third{
    background-color: yellow;
}

无论放大还是缩小，底部的黑色块都完全被遮盖住了。

▍结语

FlexBox弹性盒子模型比传统盒子模型更为精巧一些。