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 全部子元素居中

二、盒模型陰影

• box-shadow:[inset] x y blur [spread] color

• 參數

inset：投影方式——inset：內投影；不給：外投影

x、y：陰影偏移

blur：模糊半徑

spread：擴展陰影半徑——先擴展原有形狀，再開始畫陰影

color:顏色

三、其餘盒模型新增屬性

 

• 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

 

 

2、分欄佈局（只有webkit瀏覽器內核支持）

• column-width 欄目寬度
• column-count 欄目列數
• column-gap欄目距離
• column-rule 欄目間隔線

3、響應式佈局

• 媒體類型：

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) 像素比

 

一、引入針對不一樣設備的樣式表

• <link rel="stylesheet" type="text/css" href="../css/print.css" media=」all and (orientation:portrait)」/>
• @import url("css/reset.css") screen;

二、在CSS文件中設置不一樣設備的樣式

• @media screen{ 選擇器{ 屬性：屬性值； } }

• @media screen and (min-width:400px) and (max-width:500px) {.box {margin: 0 auto;}}

三、移動端媒體

 

• <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]