盒模型&弹性盒

盒模型(content+padding+border+margin)
    属性：box-sizing
        1.标准盒模型
            属性：content-box
            使用padding的时候 padding会把容器的大小撑开 需要要减去相应的padding值
            设置border边框 边框是长在盒子的外面的
            计算方式
                自身大小：content+border+padding
                实际大小：content+border+padding+margin
        
        2.怪异盒模型(当文件丢失了文档声明的时候 在IE浏览器中会触发怪异盒模型的计算方式也叫IE盒模型)
            属性：bordre-box
                使用padding的时候 不会把容器撑大 不用减去相应的padding值
                设置border的时候 边框是长在盒子的内部的
                计算方式
                    自身大小：设置的宽高值 content (包含了padding和border值)
                    实际大小：设置的宽高值 content (包含了padding和border值)+margin

总结
    关于怪异盒模型和标准盒模型的区别
    怪异盒模型为何又叫IE盒模型的原因是在低版本的IE浏览器中，当HTML文本丢失文档声明时会自动触发怪异盒模型的计算方式
    怪异盒模型常用在移动端布局中，不建议用在PC端

弹性盒布局的基础概念

    弹性盒的作用：控制子级元素在父级元素的排列位置
    特点：主要轴向布局(X轴和Y轴 - 主轴和侧轴)
    属性：display 显示方式
    属性值：flex 形成弹性盒，给父级元素添加
        形成弹性盒后默认主轴方向是X轴 所有的子级元素会沿着主轴方向排列
        主轴和侧轴是相对的送给 如果X轴是主轴 Y轴就是侧轴/如果Y轴是主轴 那么X轴就是侧轴
        在弹性盒环境下所有的子级元素都是可以直接设置宽高大小的(不用考虑元素类型)
    居中方式
        表格居中：align/valign
        文本居中：text-align/line-height
        图片居中：基线对齐
        背景居中：background-position
        定位居中：left/top 强制性
        弹性盒居中：给子级元素设置margin：auto
    注：
        控制元素位置的属性：margin/padding、定位、浮动、位移
        以上属性在弹性盒中，浮动不可用
    
弹性盒中的属性非常多 可以分为两大类

    添加在父级元素上的属性：控制的是所有子级元素
    
    添加在子级元素上的属性：控制的是单个子级元素

添加在父级元素上的属性
    改变主轴的默认方向
        属性：flex-direction
        属性值：
            row 默认值 默认是X轴为主轴
            column 默认为Y轴为主轴
            
    主轴的对齐方式
        属性：justify-content
        属性值：
            flex-start 在主轴的开始位置 从左到右
            flex-end 在主轴的开始位置 紧靠主轴的后面
            center 居中
            space-between 两端对齐 其余空间自动分配
            space-around 元素的左右间距相等
            space-evenly 所有空间全部相等
            
    侧轴的对齐方式
        属性：align-items
        属性值：
            flex-start 在侧轴的开始位置 从左到右
            flex-end 在侧轴的开始位置 紧靠侧轴的后面
            center 居中
            baseline 基线对齐
                默认和flex-start效果一样
                其他情况
            
    弹性盒环境下 子级元素宽度大于父级元素宽度的时候 子级不会往下掉
        
    换行属性：flex-wrap
        no-wrap 不换行
        wrap 换行

    行与行之间的间距
        属性：align-content
        属性值：
            flex-start 在主轴的开始位置 从左到右排列
            flex-end 在主轴的开始位置 紧靠主轴的后面
            center 居中
            space-between 两端对齐 其余空间自动分配
            space-around 元素的左右间距相等
            space-evenly 所有空间全部相等

添加在子级元素上的属性：
    控制侧轴的对齐方式align-items
        align-items 添加在父级 控制所有的子级元素在侧轴上的对齐方式
        align-self  添加在子级 控制单个元素在侧轴上的对齐方式
            auto 默认值 stretch 拉伸心适应容器 center 居中 flex-start 从左到右 flex-end从右到左
    
    优先级：
        属性:order
        排序优先级，数字越大越往后排，默认为0，支持负数。

    当fiex作为属性出现的时候
        属性flex
        属性值： 设置为数字 常用的是1
            检索弹性盒模型对象的子元素如何分配空间
            当只有一个子元素设置了flex：1 表示占据主轴上的剩下空间 并且当内容较多的情况下会将当前空间的高度撑开