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彈性盒模型與布局