代碼示範如下：
這時，我們在審查元素時可以發現，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是内聯元素還可以設定它的寬和高呢？因為除了我們常常了解的塊級元素和内聯元素的分類方法，還有一種替換元素和不可替換元素的分類方法，可以将之分為替換元素和不可替換元素。
例如浏覽器會根據<img>标簽的src屬性的值來讀取圖檔資訊并顯示出來，而如果檢視(X)HTML代碼，則看不到圖檔的實際内容；又例如根據<input>标簽的type屬性來決定是顯示輸入框，還是單選按鈕等。(X)HTML中的 <img>、<input>、<textarea>、<select>、<object>都是替換元素。這些元素往往沒有實際的内容，即是一個空元素，例如：<img src=”cat.jpg” /> <input type="submit" name="Submit" value="送出" /> 浏覽器會根據元素的标簽類型和屬性來顯示這些元素。可替換元素也在其顯示中生成了框。
<p>這是一個段落</p>，這個段落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
同上面兩種情況。
也就是說，父元素脫離文檔流對子元素沒有影響。
本文轉自 sshpp 51CTO部落格，原文連結：http://blog.51cto.com/12902932/1924595，如需轉載請自行聯系原作者