CSS3之盒子模型

display:box

使子元素成行排列
如果父级宽度小于子级盒子 不会把超出部分挤出下面 而是直接超出

-box-orient:vertical 使盒子垂直显示  默认水平显示

-box-direction:Reverse使盒子排列顺序颠倒;

-box-ordinal-group: ;设置元素排列的具体位置

-box-flex:;
子元素的尺寸=盒子的尺寸*子元素的box-flex属性值 / 所有子元素的box-flex属性值的和

水平方向的富裕空间处理
box-pack:Justify;富裕空间在子元素之间平均分布(类似于盒子与盒子之间有margin)
　　　　　　start所有子元素在左侧显示 富裕空间在右侧默认
　　　　　　end 所有子元素在盒子右侧显示 富裕空间在左侧(==右浮动 )
　　　　　　center 所有子元素居中

垂直方向的富裕空间管理
-box-align:start; 在顶部显示
center 在中间显示
end: 在底部显示

-box-reflect:above 10px -webkit-linear-gradient(right,rgba(0,0,0,1) 0,rgba(0,0,0,0) 50%);

向顶部倒影   第二个参数为两个元素间的距离 第三个参数为倒影的渐变

　　　　　　　　below 向底部倒影

right 向右倒影

left 向左倒影

resize要与overflow:auto;一起使用
resize:both; 水平和垂直都可拖拽
horizontal 水平方向
vertical 垂直方向
none 都不可拖拽

box-sizing 盒模型解析模式
content-box 标准盒模型 width/height = border+padding+content
border-box 怪异盒模型 width/height = content 即将border padding content都包含在其width或height内

分栏布局
column-width:; 栏目宽度
column-count:; 栏目列数
column-gap:; 栏目距离
column-rule:; 栏目间隔线
写了列数则会自动计算宽度
写了宽度则会自动计算栏数