咱們先看手冊中關(guān)于寬的描述：

語法：
width：<length> | <percentage> | auto
默認(rèn)值：auto
繼承性：無
動畫性：當(dāng)值為<length> | <percentage>時
計(jì)算值：指定的值

取值：
auto：
無特定寬度值，取決于其它屬性值
<length>：
用長度值來定義寬度。不允許負(fù)值
<percentage>：
用百分比來定義寬度。百分比參照包含塊寬度。不允許負(fù)值

怎么理解沒有繼承性？

首先我們先搞清楚什么是繼承關(guān)系？什么又是參考計(jì)算關(guān)系？

盡管兩個嵌套的div的寬度往往是一樣的，但這不代表子元素div的寬度是繼承而來的，而是子元素默認(rèn)撐滿它能占據(jù)的所有寬度，所以某些時候顯得好似繼承而來。但是如果子元素有margin、padding、border，那么子元素的width值就不會跟父元素的width值一致了，而是需要參考計(jì)算而來。

而繼承是什么意思？是嚴(yán)格的一致，就是父元素width值為100px，子元素的width值必須是100px。現(xiàn)實(shí)中當(dāng)然不一定是這樣。

所以，子元素的寬度跟父元素的寬度是參考計(jì)算關(guān)系，不是繼承關(guān)系。

這個默認(rèn)值auto怎么理解？

分兩種情況。

第一種情況是，元素自身設(shè)置width為auto，也仍具有自身形成的width值。一般來講這種元素就是img元素。所以，img元素在沒有設(shè)置任何width的時候，或者寬度設(shè)為auto的時候，它不參考任何父元素，它的width就是資源圖片自身的width。

第二種情況是非圖片元素的情況。它在沒有設(shè)置任何width的時候，或者寬度設(shè)為auto的時候，它的width參考父元素的width。它的盒子寬度會充滿父元素的內(nèi)部空間，當(dāng)然最終它的width是不是等于父元素的width，要看它有沒有margin、padding、border。

width不為auto的時候，是什么情況？

width不為auto，要么是具體值，要么是百分比。其中一些長度單位是相對單位，另有一些是絶対単位。參考http://www.css88.com/book/css/values/length/index.htm

說說百分比，因?yàn)橹挥邪俜直仁亲釉貙挾扰c父元素寬度相關(guān)。

比如50%，假設(shè)父元素的width是1000px，那么子元素的width就是500px。如果父元素沒有設(shè)定明確的width，那么瀏覽器先計(jì)算出父元素的width值，然后在乘以50%。

當(dāng)子元素有margin、padding、border，不影響width的計(jì)算。也因此，如果有margin、padding、border，就不要以為子元素的盒子寬度是父元素width的一半了，而是父元素width的一半加上子元素的margin、padding、border的值之和。

另外說一下margin/padding/border如果設(shè)置了50%，是參考什么計(jì)算這個50%？其實(shí)也是以父元素的width為參考來計(jì)算。所以，假如子元素打算充滿父元素的width，子元素可以設(shè)置width: 50%; margin: 0 25%;，這樣合起來是100%，正好充滿所有空間。

到此關(guān)于寬我想說的說完了。那么高呢？你以為高跟寬同理？我只能說：Too young, too simple!

為什么這么說呢？

因?yàn)閣idth值是一般情況下父元素影響子元素，當(dāng)父元素有overflow的時候父元素不影響子元素。

而height值是恰恰相反，一般情況下子元素影響父元素，而且又分成若干種情況：

• 如果父元素設(shè)了height：父子互不影響。

• 如果父元素沒有設(shè)height：

• 大部分情況下，子元素的盒子把父元素?fù)伍_到多高，那么父元素的height就是多高。也就是子元素的盒子高=父元素的height值。

• 如果子元素是inline元素，它是沒有寬高的，所以也不可能撐起父元素，但媒體元素除外，比如img元素天生具有width和height值，即使它是inline元素，也一樣能撐起父div。

• 如果子元素具有float，或position值為absolute、fixed，那么它就算有高度值，也一樣不能撐起父元素。

• 如果在body里放一個子div，沒任何樣式，里面再放一個div，里面再再放一個div，所有div的width都是body的width，而高度都是0，盡管body是有高度的。

height的值是百分?jǐn)?shù)的時候怎么計(jì)算？

剛才我說“height值一般情況下子元素影響父元素”，注意這個“一般情況下”，因?yàn)榘俜謹(jǐn)?shù)情況下又不同了，是父元素影響子元素。也就是說父元素的內(nèi)容高度是1000px的話，當(dāng)子元素height設(shè)了50%，那么子元素的height就是500px。

最佳實(shí)踐

之所以有上述這些規(guī)定原因很簡單，盒子模型的重要原理之一就是盒子的寬度盡量充滿空間，高度盡量扁。

現(xiàn)在我們在寫代碼的時候應(yīng)該遵循什么原則？

慎用height的百分比值

因?yàn)榘俜直戎禃?dǎo)致上層元素影響下層，而沒有百分比值的時候下層元素影響上層元素，就好像職場里，你的領(lǐng)導(dǎo)給你施壓影響你的決斷，而你的下屬要也影響你的決斷，這事是不是就復(fù)雜化了？

所以，雖然width用百分比是一個非常棒的主意，但是height用百分比是很糟糕的主意，除非你明確地要把一個div垂直分成兩半。

頂級div

1、width應(yīng)該由最頂級的一、兩級div來定，再下級的div應(yīng)該根據(jù)頂級的div來計(jì)算width。這是柵格結(jié)構(gòu)解決的問題。

2、頂級div可以考慮寫height，當(dāng)然也可以不寫。因?yàn)轫敿塪iv相當(dāng)于大骨架，設(shè)定height等于是“圈地”，有助于視覺上劃分大板塊。當(dāng)然你也可以不設(shè)height，只要你能保證下級div能把頂級div撐起到滿意的高度，就可以不設(shè)。

中級div

1、中級div通常不要設(shè)width，除非同一行有多個塊級元素。

2、中級div到底寫不寫height要根據(jù)情況而定，最佳實(shí)踐是：先不寫height，直接去寫后代元素，一直寫到最底層的div，然后從最底層div元素開始設(shè)置height，由底層div來撐起各級祖先元素。除非底層div一級級撐起來之后，中級div高度讓你不滿意，那么你就可以給中級div專設(shè)一個height。永遠(yuǎn)記住：給中級div設(shè)定height等于給自己設(shè)定枷鎖，應(yīng)當(dāng)盡量避免。

底層div

1、底層div的width依然是盡量別寫width，除非同一行有多個塊級元素。

2、底層div的高度一定要寫，因?yàn)樽嫦仍鼐褪强康讓觗iv一級級撐起來的。

3、各級元素中間的間距是margin、padding解決的事情，盡量不要用height來解決。道理很簡單，做網(wǎng)頁就像是搭積木，空中樓閣是不穩(wěn)定的。比如父元素的height是1000px，子元素的height加起來是800px，雖然看起來暫時沒問題，但是一旦增加一個400px高的新子元素，那么子元素的height之和就是1200px，就會產(chǎn)生溢出問題。然后這時候你又后悔寫死了1000px，想把1000px改成1200px，這時候又要去找到底哪一級div寫死了height，這不是自己給自己找病么？

一句話概括就是頂層div一定要width，底層div一定要height，其他看情況。

底層inline元素和inline-block元素

• 很簡單的常識，給inline元素設(shè)置寬高是沒有任何意義的（圖片除外）。所以應(yīng)當(dāng)給它的上級block元素設(shè)置寬高。

• 給一組inline-block元素設(shè)置相同的高度，有助于減少不必要的麻煩。

不要依賴不確定的height

雖然我說過，上層div要依靠下層div來撐起來，前提是下層div必須是確定的height值。比如：

• 如果最下層是img，那么img要設(shè)固定寬高，然后這個img的height才可以認(rèn)為是確定值。因?yàn)閕mg是引入的資源，寬高不確定，你不能讓一個超高的圖片把你頁面毀了。一千字的設(shè)計(jì)、運(yùn)營規(guī)范，不如幾個字符的樣式聲明來的高效。

*如果最下層是一個p段落，一定要設(shè)置p的line-height，因?yàn)橥瑯邮?4px的兩種字體，默認(rèn)字高也可能是不一致的。而且，你要確認(rèn)文字行數(shù)是定值。如果你無法確定它行數(shù)是定值，那么它就可能撐高或者塌陷容器，那么就必須給p段落的父元素（通常是div）設(shè)定高度值。

最后說說margin和padding

margin是有疊加效應(yīng)的，只有垂直方向的margin才會折疊，也就是說，水平方向的margin不會發(fā)生折疊的現(xiàn)象。所以，margin盡量不要設(shè)置margin-top，而是盡量永遠(yuǎn)只設(shè)定margin-bottom。

如果你不打算讓子元素貼著父元素的上沿，那么也不要給子元素設(shè)margin-top，你可以給父元素設(shè)padding-top，也可以給子元素設(shè)padding-top，具體用哪個，應(yīng)該視情況而定：比如，如果子元素有border，那么毫無疑問是要給父元素設(shè)padding-top，然后子元素的border才不會貼著父元素的上沿。

再如果，有兩個子元素橫向浮動，我希望兩個子元素的內(nèi)容高低不一樣，那么這時候，就不能給父元素設(shè)padding-top，而是給兩個子元素分別設(shè)不同的padding-top。

所以，看情況而定。