box-sizing
屬性box-sizing
屬
性用來改變預設的 css盒模型 對元素寬高的計算方式。這個屬性可以用於模擬那些非正確支援標準盒模型的瀏覽器的表現。
box-sizing：content-box（default） | border-box ;
content-box
預設值，標準盒模型。 width與 height 只包括內容的寬和高，
不包括邊框（border），內邊距（padding），外邊距（margin）。
注意: 內邊距, 邊框 & 外邊距 都在這個盒子的外部。
比如. 如果 .box ; 而且 那麼在瀏覽器中的渲染的實際寬度將是370px;
尺寸計算公式：width = 內容的寬度，height = 內容的高度。寬度和高度都
不包含內容的
邊框（border）和內邊距（padding）。
border-box
width 與 height 包括內邊距（padding）與邊框（border），不包括外邊距（margin）。
這是ie 怪異模式（quirks mode）使用的 盒模型 。
注意：這個時候內邊距和邊框將會包括在盒子中。
比如
.box 瀏覽器渲染出的寬度將是350px.
如果計算後的最內部的內容寬度為負值，都會被計算成0，內容還在，所以不可能通過 border-box來隱藏元素。
尺寸計算公式：
width = border + padding + 內容的寬度，height = border + padding + 內容的高度。
demo
demo
link...
css3 彈性盒子
display webkit flex 定義元素為彈性盒子 屬性 direction 方向 flex direction row 預設值,子元素正向1 2 3 布局 flex direction row reverse 子元素正向3 2 1 布局 flex direction column 縱向布局...
Css3 彈性盒子
彈性盒子是 css3 的一種新的布局模式。css3 彈性盒 flexible box 或 flexbox 是一種當頁面需要適應不同的螢幕大小以及裝置型別時確保元素擁有恰當的行為的布局方式。引入彈性盒布局模型的目的是提供一種更加有效的方式來對乙個容器中的子元素進行排列 對齊和分配空白空間。彈性盒子由彈...
Css3彈性盒子
css3彈性盒子 fiexbox 1.彈性盒子 隨螢幕放大縮小盒子也放大縮小，不出現滾動條。對容器中的子元素進行排列 對齊和分配。2.彈性盒子 彈性容器 彈性子元素 注 彈性盒子在父元素寫，只定義子元素的布局。乙個彈性容器包含乙個或多個彈性子元素。預設情況每個容器只有一行，彈性子元素在彈性盒子內一行...