css盒子模型

盒子模型
在CSS中将所有的HTML标签当做是一个盒子[本质上就是一个方框]
每一个盒子由外边距 边框 内边距 和内容四个部分构成
margin
border
padding
width

盒子的实际宽度=width+border+padding
盒子的实际高度=height+border+padding
子元素的尺寸会影响到父元素的尺寸

弹性布局

容器属性：

display:flex
flex-direction 子组件的摆放方式
row 水平排列[从左往右排] ，弹性布局的默认方向
row-reverse 倒序水平排列[从右往左排]
column 垂直排列[从上往下排]
column-reverse 倒序垂直排列[从下往上排]

flex-wrap:子组件换行[列]方式
nowrap 不换行[列] 默认值
wrap 当子组件的尺寸超过容器的时候，自动换行[列]
wrap-reverse 倒序换行[列]

justify-content:子组件在主轴上的对齐方式
flex-start 向开始方向对齐
flex-end 向结束对齐
center 居中对齐
space-between 两端对齐
space-around 平均分配子