day14-弹性盒

盒模型(content+padding+border+margin)

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

    总结
        - 关于怪异盒标准盒模型的区别
        - 怪异盒模型常用在移动端布局中 不建议使用在pc端

弹性盒布局的基础概念

弹性盒的作用:控制子级元素早父级元素上的排列位置

        特点:主要以轴向布局(X轴和Y轴 - 主轴和侧轴)

        属性:display 显示方式

        属性值:flex 形成弹性盒,给父级元素添加

        - 形成弹性盒后默认有主轴方向是x轴 所有的子级元素会沿着主轴方向排列

        - 主轴和侧轴是相对的关系 x轴是主轴 y轴就是侧轴/ y轴是主轴 x轴就是侧轴

        - 在弹性盒环境下所有的子级元素都是可以直接设置宽高大小的(不考虑元素类型)

        居中方式

        - 表格居中 align/valign

        - 文本居中 text-align/line-height

        - 图片居中 基线对齐

        - 背景居中 background-position

        - 定位居中 left/top 强制性

        - 弹性盒居中: 给子级元素设置margin:auto即可

   注意

        - 控制元素位置的属性:margin/padding、定位、浮动、位移

        - margin/padding 可以

        - 定位 可以

        - 浮动 不可以

        - 位移 可以

    弹性盒中的属性非常多 可以分为两大类

        - 添加在父级元素上的属性:控制的是所有子级元素

        - 添加在子级元素上的属性:控制的是单个子级元素

1.改变主轴的默认方向

        属性:flex-direction

        属性值

        - row 默认值 默认是x轴为主轴方向

        - column 默认Y轴为主轴

2.主轴的对齐方式

        属性:justify-content

        属性值

        - flex-start 在主轴的开始位置 从左到右排列

        - flex-end 在主轴的开始位置 紧靠主轴的后面

        - center 居中

        - space-between 两端对齐 其余空间自动分配

        - space-around 元素的左右间距相等

        - space-evenly 所有空间全部相等

3.侧轴的对齐方式

        属性:align-items

        属性值

        - flex-start 在侧轴的开始位置 从左到右排列

        - flex-end 在侧轴的开始位置 紧靠侧轴的后面

        - center 居中

        - baseline 基线对齐

        - 默认和flex-start效果一样

4.弹性盒环境下 子级元素宽度大于父级元素宽度的时候 子级不会往下掉

        换行属性:flex-wrap

        属性值

        - nowrap 不换行

        - wrap 换行

5.行与行之间的间距

        属性:align-content

        属性值:

        - flex-start 在主轴的开始位置 从左到右排列

        - flex-end 在主轴的开始位置 紧靠主轴的后面

        - center 居中

        - space-between 两端对齐 其余空间自动分配

        - space-around 元素的左右间距相等

        - space-evenly 所有空间全部相等

添加在子级元素上的属性 

    1.控制侧轴的对齐方式
        - align-items 添加在父级 控制所有的子级元素在侧轴上的对齐方式
        - align-self  添加在子级 控制单个元素在侧轴上的对齐方式
    属性值
        - flex-start...

    2.优先级
    属性:order
    属性值:数字 数字越大越往后显示 默认值是0

  属性:flex

  属性值:设置为数字 常用的是1

- 属性值为1 表示占据主轴上的剩下空间 并且当内容较多的情况下会将当前空间的高度撑开

1.flex-grow 一个数字，规定项目将相对于其他灵活的项目进行扩展的量。

- 0 正常显示

- 1 自动分配空间

2.flex-shrink 一个数字，规定项目将相对于其他灵活的项目进行收缩的量。

- 0 正常显示

- 1 自动缩放

3.flex-basis 项目的长度(主轴上剩下的宽度)

- auto 自动 跟随内容去决定空间

- 百分比 占据主轴上剩下的空间

flex复合属性

属性:flex

- 默认值 0 1 auto

- 常用的值 1 1 0% => 简写为flex:1