在CSS這個一切皆為框的世界里，我們今天再來探究探究width與height。
我靠，width與height有什么好探究的，不就是設定元素的寬、高嗎？大不了還要區分標准盒子模型和IE盒子模型的區別，申明文檔類型，統一盒子模型，不就over啦。哈哈，的確也是這樣的，不過width、height還有一特性哦，那就是繼承，子元素通過設置百分比可以繼承父元素的寬高。
因為盒子模型有兩種，所以呢，下面我們就來分別看一看，width和height在這兩種盒子模型中，到底是怎么繼承父元素的。
*為了方便大家看出效果，以下demo中，子元素的width和height都只繼承父元素一半的寬高，也就是50%。
| 一、content-box下 |
當你申明文檔類型<!DOCTYPE html>后，它默認是標准盒子模型，也就是box-sizing:content-box。
下面我們來寫個demo，兩個div嵌套，父div和子div的margin、border、padding皆為0。效果圖見下：
<!DOCTYPE html> <head> <title>width</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style> * { margin:0; padding:0; } .parent { width:80px; height:80px; background:#9FCD82; } .child { width:50%; height:50%; background:#C8ECCC; } </style> </head> <body> <div class="parent"> <div class="child"> </div> </div> </body> </html>
子div的寬高的確是父div的一半。
下面我們將父div的padding設置為10像素，其他一切樣式保持不動，效果圖如下：
咦，我靠，怎么看上去子div的寬高不是繼承父div的50%呢？！！
打開chrome調試器，我們來探其究竟。在調試器中點擊父div，可以看見下圖。
圖中的1（最外層的綠色）為父div的padding，值為10像素；2（深灰綠色的方框）為父div的內容區content；3（淺灰藍色的方框）為子div。
可以明顯的看出，子div是繼承了父div內容區域content寬高的50%，而不是padding+content。
接下來，我們再將父div的border設置為10像素，其他的margin、padding都為0。子元素保持不變，效果見下圖
可以明顯的看出，子div的寬高還是繼承了父div內容區域的寬高。
margin是控制元素周圍空間的間隔，所以與width、height無關。
小結：
| 標准盒子模型(box-sizing: content-box) |
|||
| 塊級元素 |
margin |
border |
padding |
| 父元素 |
\ |
有 |
有 |
| 子元素 |
無 |
無 |
無 |
| 子元素的寬高通過百分比，只繼承父元素的內容區域 content，父元素的border、padding不予考慮 |
|||
接下來，我們來看看，設定父div的margin、border、padding為0，子div的padding 設置為10像素，打開chrome調試器，點擊子元素，效果見下圖：
<!DOCTYPE html> <head> <title>width</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style> * { margin:0; padding:0; } .parent { width:80px; height:80px; background:#9FCD82; } .child { width:50%; height:50%; background:#C8ECCC; padding:10px; } </style> </head> <body> <div class="parent"> <div class="child"> </div> </div> </body> </html>
圖中1（深綠色方框）為父div，2（淺綠色方框）為子元素的padding，3（藍色方框）為子元素的內容區域content。
可以看出，子div的寬高繼承了父div的寬高，但是子元素的padding不包含在其中。
咦，是不是和上面講解的父元素padding有異曲同工之處，那border是不是也這樣呢？
答案：是的。
不信，你看，當我設置子div的border為10px時，margin、padding為0；父div的margin、border、padding還是為0，效果圖見下
小節：
| 標准盒子模型(box-sizing: content-box) |
|||
| 塊級元素 |
margin |
border |
padding |
| 父元素 |
\ |
無 |
無 |
| 子元素 |
\ |
有 |
有 |
| 子元素的寬高通過百分比，只繼承父元素的內容區域 content，子元素的border、padding不予考慮 |
|||
你可能會說，我靠，這不是標准盒子模型嗎？
標准盒子模型中的width本來就沒有包括border和padding好不好，是的上面我討論的是標准盒子模型(box-sizing:content-box)，接下來我們來看看IE盒子模型(box-sizing:border-box)是不是也是這樣的呢？
| 二、border-box下 |
當你申明文檔類型<!DOCTYPE html>后，它默認是標准盒子模型，也就是box-sizing:content-box，所以你得css reset一下，變成box-sizing:border-box。
還是兩個div嵌套，先來看看將父div的padding設置為10像素，margin、border皆為0；子div的padding、border、margin皆為0。效果圖見下
<!DOCTYPE html> <head> <title>width</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style> * { margin:0; padding:0; box-sizing:border-box; } .parent { width:80px; height:80px; background:#9FCD82; padding:10px; } .child { width:50%; height:50%; background:#C8ECCC; } </style> </head> <body> <div class="parent"> <div class="child"> </div> </div> </body> </html>
咦，這是怎么回事，不是繼承50%嗎，怎么這么少。
打開chrome調試器，點擊父div，得到下圖
看見沒這就是將box-sizing設置為border-box的結果，width包括了content + padding + border，所以實際的content為60 x 60。
再點擊子div，看看會得到什么圖
看見沒？30 x 30!!哈哈，原來子div的width/height是繼承了父div的content寬高，而不是width、height。
我靠，這不是和標准盒子模型是一樣的了嗎。
我們再來看看border，我將父div的border設置為10像素，margin、border皆為0；子div的margin、border、padding皆為0。看看效果，圖下
圖中清晰可見，子div的width、height也是只繼承了父div內容區域content的寬高。
小節
| IE盒子模型(box-sizing: border-box) |
|||
| 塊級元素 |
margin |
border |
padding |
| 父元素 |
\ |
有 |
有 |
| 子元素 |
無 |
無 |
無 |
| 子元素的寬高通過百分比，只繼承父元素的內容區域 content，父元素的border、padding不予考慮 |
|||
接下來，我們來設定，父div的margin、border、padding皆為0，子div的padding 、border變動。
子div的padding設置為10像素，border、margin為0。效果圖見下：
<!DOCTYPE html> <head> <title>width</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style> * { margin:0; padding:0; box-sizing:border-box; } .parent { width:80px; height:80px; background:#9FCD82; } .child { width:50%; height:50%; background:#C8ECCC; padding:10px; } </style> </head> <body> <div class="parent"> <div class="child"> </div> </div> </body> </html>
咦，怎么子div的寬高會繼承父div的寬高50%呢？打開chrome調試器看一看，選中父div元素，得下圖
選中子元素div，得下圖
通過兩張圖片的對比，可以發現，原來子div的width、height繼承了父div的寬高，但是子div的width、height包含了子div的padding。
那么border是不是也和padding一樣呢？
答案：是的。
不信？我將子div的border設置為10像素，margin、padding皆為0；父div保持不變，請看下圖
哈哈，是的吧。
小節
| IE盒子模型(box-sizing: border-box) |
|||
| 塊級元素 |
margin |
border |
padding |
| 父元素 |
\ |
無 |
無 |
| 子元素 |
\ |
有 |
有 |
| 子元素的寬高通過百分比，只繼承父元素的內容區域 content，子元素的border、padding包含在子元素的寬高中。 |
|||
綜上所述，width、height的繼承如下：
| 屬性 |
box-sizing: content-box |
box-sizing: border-box |
| width |
子元素的width通過百分比，只繼承父元素的內容區域 content的width，子父元素的border、padding都不參與其中 |
子元素的width通過百分比，只繼承父元素的內容區域 content的width，子元素的border、padding參與其中 |
| height |
子元素的height通過百分比，只繼承父元素的內容區域 content的height，子父元素的border、padding都不參與其中 |
子元素的height通過百分比，只繼承父元素的內容區域 content的height，子父元素的border、padding參與其中 |