CSS盒模型

盒模型（Box Model）

所有的HTML元素都可以看作一个盒子
盒模型就是用来设计和布局时使用的
盒子包括：
margin（外边距）边框外的区域，外边框也是透明的
border（边框） 围绕内边距和内容的边框
padding（内边距） 内容周围的区域，内边距跟内容区一个颜色
content（内容）显示文本和图像

padding和margin可以单方向设定left、right、bottom、top。

Flex Box（弹性盒模型）

一种更加弹性的布局方式，更有效
弹性盒子由弹性容器（flex container）和弹性子元素（flex item）组成
容器通过display属性的值flex将其定义为弹性容器

父元素属性（对container操作）：

display：flex 开启弹性盒子
flex-direction：row | column 定义子弹性子元素排列方式
row横向排列
column纵向排列
justify-content：flex-start | flex-end | center 垂直方向上定义居上、居下和居中
align-items：flext-start | flex-end | center 水平方向上定义居上、居下和居中

子元素属性（对item操作）：

flex
组合使用，里面写数字，比例，比重，可以理解为权重，优先级比宽高的优先级高