弹性盒模型相关

0814

弹性盒模型

.box{
            height: 200px;
            border:10px solid #000;
            display: -webkit-box;
            display: -moz-box;
            -webkit-box-orient:horizontal;
            -webkit-box-pack:justify;
            -webkit-box-align:center;
            -webkit-box-direction:reverse;
        }

<!--
        display: -webkit-box;  弹性盒模型的 基础类
            子级变成由内容撑开宽度

        -webkit-box-orient:horizontal;  设置主轴方向（子元素排列的方向）
            horizontal  水平
            vertical    垂直

        -webkit-box-pack:center;  设置主轴空间排列
            当框大于子元素的尺寸，在何处放置子元素（主轴）
            start
            center
            end
            justify   平均分配

        -webkit-box-direction:reverse;
            定义子元素排列顺序
                reverse 倒序
                normal  正常

        -webkit-box-align:center;
            定义元素的侧轴（垂直于主轴的方向）排列方向
                start
                center
                end

         不要使用浮动
    -->

弹性尺寸

.item:nth-child(1){
            -webkit-box-flex:1;
        }
        .item:nth-child(2){
            -webkit-box-flex:2;
        }
        .item:nth-child(3){
            -webkit-box-flex:3;
        }
        .item:nth-child(4){
            -webkit-box-flex:4;
        }
        .item:nth-child(5){
            -webkit-box-flex:5;
        }

        <!--
        -webkit-box-flex
            定义子级弹性尺寸
    -->

 .item:nth-child(1){
            width:300px;
            -webkit-box-ordinal-group:2;
        }
        .item:nth-child(2){
            -webkit-box-flex:2;
            -webkit-box-ordinal-group:2;
        }
        .item:nth-child(3){
            -webkit-box-flex:3;
            -webkit-box-ordinal-group:3;
        }
        .item:nth-child(4){
            -webkit-box-flex:4;
            -webkit-box-ordinal-group:3;
        }
        .item:nth-child(5){
            -webkit-box-flex:5;
            -webkit-box-ordinal-group:2;
        }

 <!--
        -webkit-box-flex
            定义子级弹性尺寸
            num

        -webkit-box-ordinal-group:2;
            定义元素的排列顺序，值越大的越靠后
            num
    -->

弹性盒模型升级

<!--
        display: flex; 弹性盒模型基类


        问题，让内联元素支持宽高，又不会代码换行解析成空格的方法有哪些？
            float
            display: flex;
            定位~

        flex-direction:row; （-webkit-box-orient:horizontal;）
            定义主轴方向（元素排列方向）
            row  行
            row-reverse
            column  列

        父级高度不够的情况下直接超出
            宽度不够的时候，会挤压子级

        justify-content:center;主轴对齐
            定义元素排列的位置
                flex-start    元素排列在父级的左边(开始的方向)
                flex-end                    右边
                center                      中间
                space-around   空白区域环绕元素
                space-between   空白区域出现在元素的中间

        align-items:center;  侧轴对齐
            flex-start
            flex-end
            center

        flex: 2;  定义元素的弹性空间
        order: 2  定义元素的排列顺序（值越大越靠后）
    -->

弹性盒模型总结

display: -webkit-box;
弹性盒模型基类 让子级块元素在一行显示（inline-block）

-webkit-box-orient:horizontal;
定义主轴方向（元素排列的方向）注意-webkit-
horizontal 水平方向
vetical 垂直方向

-webkit-box-direction:reverse;
定义元素排列顺序
reverse 倒序
normal 正常

-webkit-box-pack:
当框大于子元素的尺寸，在何处放置子元素（主轴）
start 子元素位于父级左侧
center 子元素位于父级中间
end 子元素位于父级右边
justify 子元素平均分配父元素空间

-webkit-box-align:
设置如何对齐子元素（侧轴：垂直于主轴）
start 子元素位于父级顶部
center 子元素位于父级中间
end 子元素位于父级底部

子级相关设置
-webkit-box-flex:1; 定义子级弹性尺寸(如果没有宽度，默认内容撑开宽度)
-webkit-box-ordinal-group 定义子元素的排列顺序 值小的在前面
box的子元素不会自己换行

display:flex;（display:box进化版） 弹性盒模型基类 让子级块元素在一行显示（inline-block）
支持内联元素 兼容性
flex-direction: 定义主轴方向（元素排列的方向）
row 横向排列
row-reverse 横向排列（反向）
column 纵向排列
column-reverse 纵向排列（反向）

justify-content:主轴对齐 (在何处放置子元素)
flex-start 左侧
flex-end 右侧
center 中间
space-between 平均分配空间
space-around 平均分配距离
align-items: 侧轴对齐
flex-start
flex-end
center
flex: 1; 子级宽度
order:5; 子级显示顺序

盒模型阴影
用法
box-shadow:[inset] x y blur [spread] color
参数
inset：投影方式
inset：内投影
不给：外投影
x、y：阴影偏移
blur：模糊半径
spread：扩展阴影半径
先扩展原有形状，再开始画阴影
color
其他盒模型新增属性
重点内容
box-reflect 倒影
direction 方向 above|below|left|right;
距离
-webkit-linear-gradient(rgba(0,0,0,0) 60%, rgba(0,0,0,1) 100%) 渐变
resize 自由缩放
Both 水平垂直都可以缩放
Horizontal 只有水平方向可以缩放
Vertical 只有垂直方向可以缩放
注意：一定要配合overflow:auto 一块使用只有水平方向可以缩放
box-sizing 盒模型解析模式
Content-box 标准盒模型 width/height=border+padding+content
Border-box 怪异盒模型 width/height=content