CSS进阶之盒子

一、CSS盒子模型

所有HTML元素都可以看成盒子，在CSS中“box model”这一术语是设计和布局时使用的。CSS盒子模型本质上就是盒子，封装周围的元素。包含，内容（content），内边距（padding），边框（border），外边距（margin）。

二、弹性盒子模型

弹性盒子是由弹性容器和弹性子元素构成的。
弹性容器通过设置display属性值为flex定义为弹性容器。
包含有以下几个属性：
display：flex；
flex-direction：row（横向从左到右，默认模式）|row-reverse（横向从右到左）|column（纵向排列，从上到下）|column-reverse（纵向从下到上）；
justify-content：flex-start（行头填充）| flex-end（行尾填充）| center（行正中填充）；
align-item：flex-start|flex-end|center

三、文档流

文档流是文档中显示对象排列时所占用的空间/位置。
文档流的限制导致了很多问题：高矮不齐，底边