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-; 栏目宽度
column-count:; 栏目列数
column-gap:; 栏目距离
column-rule:; 栏目间隔线
写了列数则会自动计算宽度
写了宽度则会自动计算栏数