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]