弹性盒模型相关

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;
        }

弹性尺寸

.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;
        }

弹性盒模型升级

弹性盒模型总结

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