盒模型

盒模型:
  box-sizing:content-box ;标准盒模型
  box-sizing:border-box 怪异盒模型(IE盒模型)

标准盒模型:

W = width + 左右padding + 左右border
H = height + 上下padding + 上下border

怪异盒模型:

W = width(包含了padding border)
H = height(包含了padding border)

弹性盒:

设置为弹性盒后失效的属性:
    float
    clear
    vertical-align

    1.将父元素设置为弹性盒后,有容器属性和项目属性
    2.容器属性是: 设置在容器上,影响的是项目
    3.项目属性是: 设置在项目上,影响的是项目本身
    4.默认主轴为水平方向,侧轴为垂直方向

容器(父元素): 给父元素设置,影响子元素

1: display:设置为弹性盒;
        flex
        inline-flex

2: flex-direction:设置主轴方向;
        row 			水平主轴
        row-reverse 	反向水平主轴
        column			垂直主轴
        column-reverse 	反向垂直主轴

3: justify-content:设置主轴对齐方式;
        flex-start 		起始位置
        center 			居中
        flex-end		结束位置
        space-between	两端对齐
        space-around	两端平分
        space-evenly	平均分配

4: align-items:侧轴对齐方式;
        flex-start 		起始位置
        center 			居中
        flex-end		结束位置
        stretch 		拉伸(默认值)
        baseline 		文本底部对齐

5: flex-wrap:是否换行;
        wrap 换行
        wrap-reverse 反向换行

6: align-content:多跟侧轴对齐方式; 子元素换行的情况下使用
        flex-start 		起始位置
        center 			居中
        flex-end		结束位置
        space-between	两端对齐
        space-around	两端平分
        space-evenly	平均分配

项目(子元素): 给子元素设置,影响子元素本身

1: align-self:侧轴对齐方式;
        flex-start 		起始位置
        center 			居中
        flex-end		结束位置
        stretch 		拉伸(默认值)
        auto 			默认值

2: order:反向排序;
        数字越大,越靠后,反之靠前,可以为负数

3: flex:缩  放  大小;
        flex-grow:放大;
        flex-shrink:缩小;
        flex-basis:大小;
			

多列布局:

column-count:列数;
column-gap:列间距;
column-rule:列边框大小 形态 颜色;
column-span:是否跨列;
        none 不跨列
        all 横跨所有
column-fill:填充方式;
        auto 优先填满上一列
        balance 尽可能平均分配
column-width:列宽;
columns:列数  列宽;