CSS3 box sizing 屬性的簡單認識

定義和用法：

box-sizing 屬性允許您以特定的方式定義匹配某個區域的特定元素。

預設值：content-box;

繼承性：無；

css版本：css3

語法：

box-sizing: content-box | border-box  |inherit;

屬性值說明：

content-box

預設值;由css2.1規定的寬度高度行為;寬度和高度分別應用到元素的內容框;在寬度和高度之外繪製元素的內邊距和邊框。

可以理解為：對元素設定border和padding最終會改變元素的width,height

border-box

為元素設定的寬度和高度決定了元素的邊框盒；

即：為元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪製;

內容的寬度=已設定的寬度和高度 - 邊框和內邊距。

可以理解為：對元素設定border和padding不會改變元素的width,height;只在元素既定的寬和高範圍內進行繪製

inherit

規定應從父元素繼承 box-sizing 屬性的值。

我們可以利用該屬性值，通過對頂層父元素設定 box-sizing ，讓子元素繼承的方式，輕鬆實現box-sizing 設定

如：html

*,*:before,*:after

示例：

box-sizing:border-box

為元素設定的寬度和高度決定了元素的邊框盒。
就是說，為元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪製。
通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。
box-sizing:content-box
這是由 css2.1 規定的寬度高度行為。
寬度和高度分別應用到元素的內容框。
在寬度和高度之外繪製元素的內邊距和邊框。
box-sizing:inherit;
從父元素繼承box-sizing屬性

html

*,*:before,*:after
body
.box
/*border-box:在寬度和高度之內繪製元素的內邊距和邊框*/
.box1
/*content-box:在寬度和高度之外繪製元素的內邊距和邊框 */
.box2
/*inherit:從父元素繼承box-sizing屬性*/
.box3

關於css3 box sizing屬性

在css3中，box sizing提供了兩種選擇，乙個是content box，乙個是border box。content box的模式裡，元素設定的寬和高為內容寬高 而border box中，元素設定的寬高為整體元素呈現出來的寬高。使用第二種模式就省去了計算，能夠十分簡單地，不需計算內外邊距而設定...

技術 CSS3 box sizing 屬性

說到 ie 的 bug，乙個臭名昭著的例子是它對於 盒模型 的錯誤解釋 在 ie5.x 以及 quirks 模式的 ie6 7 中，將 border 與 padding 都包含在 width 之內。這為前端工程師的工作平添了不少麻煩，幾戶每個需要定義尺寸的 box 都要思量一下 是否觸發了 盒模型 ...

css3 box sizing屬性值詳解

box sizing屬性可以為三個值之一 content box default border box，padding box。content box，border和padding不計算入width之內 padding box，padding計算入width內 border box，border和p...