display:box 使子元素成行排列如果父級寬度小於子級盒子 不會把超出部分擠出下麵 而是直接超出 -box-orient:vertical 使盒子垂直顯示 預設水平顯示 -box-direction:Reverse使盒子排列順序顛倒; -box-ordinal-group: ;設置元素排列的具 ...
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:; 欄目間隔線
寫了列數則會自動計算寬度
寫了寬度則會自動計算欄數
