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:; 欄目間隔線
寫了列數則會自動計算寬度
寫了寬度則會自動計算欄數
CSS 3 盒子模型
盒子模型解釋 元素在頁面中顯示成乙個方塊，類似乙個盒子，css盒子模型就是使用現實中盒子來做比喻，幫助我們設定元素對應的樣式。盒子模型示意圖如下 把元素叫做盒子，設定對應的樣式分別為 盒子的寬度 width 盒子的高度 height 盒子的邊框 border 盒子內的內容和邊框之間的間距 paddi...
CSS3盒子模型
2.1.2 內容區 2.1.3 邊框 border color 邊框顏色 border style 邊框樣式，也可以指定不同方向的邊框的樣式 2.1.4 內邊距 2.1.5 外邊距 通常左外邊距和上外邊距會移動自身，右外邊距和下外邊距會移動其他元素 2.2.1 水平布局 乙個元素在父元素中，水平布局...
CSS3 彈性盒子模型
lang en charset utf 8 標題title rel stylesheet href css reset.css type text css box zxw style head class box class zxw zxw1li class zxw zxw2li class zxw...