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

r囧r小猫 2022-05-19 04:16 240阅读 0赞

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

▍传统盒子模型

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

![70][]

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

▍FlexBox弹性盒子模型

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

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

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

▍示例：将DIV三等分

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

HTML如下：

**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;
    }

效果如下

![70 1][]

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

![70 2][]

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;
    }

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

![70 3][]

▍结语

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

[70]: /images/20220519/546e1844c4e1409e9dd378b6e3b819e9.png
[Link 1]: http://www.runoob.com/w3cnote/flex-grammar.html
[Link 2]: https://blog.csdn.net/lyznice/article/details/53981062
[70 1]: /images/20220519/bcbfff7cb0e94de9a431606a8fffd900.png
[70 2]: /images/20220519/6e8874770fb649e780d1b88b315f934a.png
[70 3]: /images/20220519/c4d2f04f2260447bbcd926b7de4204d6.png