关于怪异盒模型和弹性盒模型

标准盒模型

        - 组成部分: content + padding + border + margin

        - 计算方式:

            - 计算自身的大小                 content+padding+border

            - 盒子在浏览器中所占的位置大小    content+padding+border+margin

 

怪异盒模型(IE盒模型):在IE低版本浏览器如果丢失了文档类型,触发IE盒模型(IE6)

        属性:box-sizing

        属性值:

            - content-box 默认值 标准盒模型

            - border-box 怪异盒模型

        特点

            - 当盒子形成怪异盒模型之后,当前padding值不会撑大容器的大小 不需要减去相应的padding值

            - border是向内生成的

        怪异盒模型宽高大小的计算方式

            - 计算自身的大小                 content(包含padding+border)

            - 盒子在浏览器中所占的位置大小    content(padding+border)+margin

    区别

        - 不需要计算border和padding的值

        - 工作的项目中如果使用到怪异盒模型 不考虑兼容问题

        - 由于兼容问题 怪异盒模型通常都在移动端使用 不建议在pc端使用

 

弹性盒模型的基础概念：控制子级元素在父级容器中的排列位置

        属性:display

        属性值:flex

            - 盒模型是控制子级元素在父级元素中的排列顺序/位置 display:flex一定要加在父级容器上

            - 当前元素形成盒模型后 默认的主轴方向是X轴,侧轴是Y轴(主轴和侧轴不是固定的,可以通过属性设置)

            - 在元素中设置了弹性盒,不考虑元素类型 所有的子级元素都可以设置宽高大小

            - 居中方式

                - 表格居中 align/valign

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

                - 图片居中 基线对齐

                - 背景居中 background-position

                - 版心居中 margin:0 auto

                - 定位居中 未知/已知

                - 位移居中 定位

                - 单个元素实现居中:margin:auto

        注意:在弹性盒环境中,浮动不可以使用 定位、盒模型都可以正常使用

弹性盒属性很多，可以分为两类

        - 设置在父级元素上的属性 => 控制所有的子级元素

        - 设置在子级元素上的属性 => 控制单个的子级元素

1.改变默认的主轴方向

        属性:flex-direction

        属性值:  - row       默认方向为x轴

                   - column    主轴方向为Y轴

2.对齐方向

   ① 主轴上的对齐方向

      属性:justify-content

      属性值：- flex-start 默认值 表示元素在起始位置

                  - flex-end

                  - center 居中

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

                  - space-around 所有的空间都是自动分配的

                  - space-evenly 所有的间距都是相同的 - 拓展

② 侧轴的对齐方向

     属性:align-items

     属性值：- flex-start

                 - flex-end

                - center

                 - baseline 基线对齐

                  - 所有的子级元素都有宽高的情况下 baseline和flex-start效果是一样的

                 - 当子级元素不设置搞丢的情况下,并且不设置baseline子级默认会进行拉伸

                 - 当前所有的子级元素都是文本的时候(排列方式) 以基线对齐

                 - stretch 拉伸

3.当子级元素的宽度总和大于父级元素的时候 默认是进行挤压的 不会掉下去

     换行属性:flex-wrap

     属性值 - nowrap 不换行

                - wrap 换行 （常用换行）

4.当设置换行属性之后 行与行之间有间距

     属性:align-content

     属性值： - 常用 flex-start

                  - flex-end

                  - center

                  - space-between

                  - space-around

                  - space-evenly

5.添加在子级元素上的属性:控制单个元素的位置

        1.控制子级元素在侧轴上对齐方式

            属性:align-self

            属性值

                - flex-start

                - flex-end

                - center

                - auto

                    - 父级元素有侧轴的对齐方式 继承父级侧轴对齐方式

                    - 父级元素没有侧轴对齐方式 默认为拉伸

                - stretch  拉伸

        2.order 优先级 number 往后显示

关于flex的使用

       可以去占据主轴上所剩于的空间

       属性：flex

       属性值：mumber

       常用数值：1

              2、3、4…都可以

       flex-grow:空间分配

        - 0 当前元素正常显示分配

        - 1 当前元素分配的比例

       flex-shirnk: 收缩的量

        - 0 表示不缩放

        - 1 表示正常缩放

       flex-grow、flex-shrink、flex-basis

       0           1           auto   默认值

       1           1            0% =>  flex:1