CSS3彈性盒模型與布局
一、彈性盒模型
1、註意：在使用彈性盒模型的時候，父元素必須要加display:box 或 display:inline-box，同時要加瀏覽器內核前綴
Box-orient 定義盒模型的布局方向
Horizontal 水平顯示
vertical 垂直方向
box-direction 元素排列順序
Normal 正序
Reverse 反序
box-ordinal-group 設置元素的具體位置
Box-flex 定義盒子的彈性空間
子元素的尺寸=盒子的尺寸*子元素的box-flex屬性值 / 所有子元素的box-flex屬性值的和
box-pack 對盒子富裕的空間進行管理
Start 所有子元素在盒子左側顯示，富裕空間在右側
End 所有子元素在盒子右側顯示，富裕空間在左側
Center 所有子元素居中
Justify 富余空間在子元素之間平均分布
box-align 在垂直方向上對元素的位置進行管理
Star 所有子元素在據頂
End 所有子元素在據底
Center 所有子元素居中
2、盒模型陰影
box-shadow:[inset] x y blur [spread] color
參數
inset：投影方式——inset：內投影；不給：外投影
x、y：陰影偏移
blur：模糊半徑
spread：擴展陰影半徑——先擴展原有形狀，再開始畫陰影
color:顏色
3、其他盒模型新增屬性
box-reflect 倒影（只支持webkit內核
）：right 10px linear-gradient(rgba(0,0,0,1) 0,rgba(0,0,0,0) 100%)
direction 方向：above|below|left|right;
距離（可選）
漸變（可選）
resize 自由縮放:註意：一定要配合overflow:auto 一塊使用只有水平方向可以縮放
Both 水平垂直都可以縮放
Horizontal 只有水平方向可以縮放
Vertical 只有垂直方向可以縮放
box-sizing 盒模型解析模式
Content-box 標準盒模型 width/height=border+padding+content
Border-box 怪異盒模型 width/height=content
二、分欄布局（只有webkit瀏覽器內核支持）
column-width 欄目寬度
column-count 欄目列數
column-gap欄目距離
column-rule 欄目間隔線
三、響應式布局
媒體類型：
all 所有媒體
braille 盲文觸覺設備
embossed 盲文打印機
print 手持設備
projection打印預覽
screen彩屏設備
speech‘聽覺‘類似的媒體類型
tty 不適用像素的設備
tv 電視
關鍵字
and
not 用來排除某種制定的媒體類型
only 用來定某種特定的媒體類型
媒體特性
(max-width:600px)
(max-device-width: 480px) 設備輸出寬度
(orientation:portrait) 豎屏
(orientation:landscape) 橫屏
(-webkit-min-device-pixel-ratio: 2) 像素比
1、引入針對不同設備的樣式表
<link rel="stylesheet" type="text/css" href="../css/print.css" media=”all and (orientation:portrait)”/>
@import url("css/reset.css") screen;
2、在CSS文件中設置不同設備的樣式
@media screen{ 選擇器{ 屬性：屬性值； } }
@media screen and (min-width:400px) and (max-width:500px) {.box {margin: 0 auto;}}
3、移動端媒體
<meta name="viewport" content="" />
width [pixel_value | device-height]
height [pixel_value | device-height]
user-scalable 是否允許縮放 （no||yes）
initial-scale 初始比例
minimum-scale 允許縮放的最小比例
maximum-scale 允許縮放的最大比例
target-densitydpi [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi]
CSS3彈性盒模型與布局