**演示如下：
父子元素width關係這時，我們在審查元素時可以發現，span和a的width（和height）的寬度是auto，即寬度是由其內容撐起來的，故為auto。
**如下：
這時，子元素設定為了父元素width的100%，那麼子元素的寬度也是500px；
但是如果我們把子元素的width去掉之後，就會發現子元素還是等於父元素的width。也就是說，對於塊級元素，子元素的寬度預設為父元素的100%。
補充：這裡解釋的不夠清楚。實際上，當我們給子元素新增padding和margin時，可以發現寬度width是父元素的寬度減去子元素的margin值和padding值，下面的例子亦是如此。感謝博友laden666666的建議。毫無疑問，如果去掉子元素的height，就會發先子元素的高度為0，故height是不會為100%的，一般我們都是通過新增內容（子元素）將父元素撐起來。
第一種情況：內聯元素是一般的型別（img、input除外）
毫無疑問，這種情況下，同樣子元素是沒有辦法設定寬度的，也就談不上100%的問題了。 即內聯元素必須依靠其內部的內容才能撐開。
第二種情況：內聯元素是input和img這樣的可以設定width和height的型別
對於這種情況可能稍顯複雜，首先應當明白：為什麼img是內聯元素還可以設定它的寬和高呢？因為除了我們常常理解的塊級元素和內聯元素的分類方法，還有一種替換元素和不可替換元素的分類方法，可以將之分為替換元素和不可替換元素。
a) 替換元素：替換元素就是瀏覽器根據元素的標籤和屬性，來決定元素的具體顯示內容的元素。
例如瀏覽器會根據
b) 不可替換元素(x)html 的大多數元素是不可替換元素，即其內容直接表現給使用者端（例如瀏覽器）。
這是乙個段落
，這個段落p就是乙個不可替換元素，那麼其中這是乙個段落會被全部顯示。
當時img這種元素時，不管我們怎麼設定父元素的寬度和高度，而不設定img的寬和高時，img總是表現為其原始的寬和高。
而如果我們只設定了其高度，不設定寬度看看其表現時怎麼樣的吧，如下所示（原始的大小為1920x1080的）：
效果如下所示：
由此我們可以發現，雖然沒有設定寬度，但是表現在瀏覽器上為160px，它並沒有繼承父元素的100%得到500px，而是根據既定的高度來等比例縮小寬度。 同樣， 如果只設定width，那麼height也會等比例改變。 如果我們把img的width設定為100%，就可以發現其寬度這時就和父元素的寬度一致了，如下所示：
而我們一般的做法時，首先確定img的父元素的寬度和高度，然後再將img的寬度和高度設定位100%，這樣，就能鋪滿父元素了。
第一種情況：float:left和float:right
如果將子元素設定為float:left或float：right，這時它就脫離了文件流，**如下：
這時，我們就只能看到父元素，而通過審查元素可知，子元素為0x100，浮動在父元素的最右邊。
第二種情況：position:absolute或position:fixed
同樣，這種情況也是脫離正常文件流，導致width為0。
第三種情況:positon:relative
這種情況下，子元素並沒有脫離文件流，所以此時width就成了預設的100%,寬度為500px。
第一種情況：position:absolute或position:fixed
**如下：
效果如下：
也就是說，這時，子元素同樣是預設的100%相對與父元素，fixed時情況相同。
第二種情況:float:right或float:left
同上一種情況。
第三種情況:position:relative
同上面兩種情況。
也就是說，父元素脫離文件流對子元素沒有影響。
深入理解子元素的width與父元素的width關係
對於這一部分內容，如果理解準確，可以更容易控制布局，節省不必要的 這裡將簡單研究。演示如下 父子元素width關係 這時，我們在審查元素時可以發現，span和a的width 和height 的寬度是auto，即寬度是由其內容撐起來的，故為auto。如下 class parent class son ...
深入理解子元素的width與父元素的width關係
對於這一部分內容，如果理解準確，可以更容易控制布局，節省不必要的 這裡將簡單研究。演示如下 父子元素width關係 這時，我們在審查元素時可以發現，span和a的width 和height 的寬度是auto，即寬度是由其內容撐起來的，故為auto。如下 class parent class son ...
子元素的margin top與父元素合併的問題
問題集 整理自網路 貌似這個 collapsing margins 的問題由來已久啊！一般解釋是 2個或以上盒模型之間 關係可以是相鄰或巢狀 相鄰的margin屬性 這之間不能有非空內容 padding區域 border邊框或使用清除分離方法 結合表示為乙個單獨的margin。w3school是這麼...