對於這一部分內容，如果理解準確，可以更容易控制布局，節省不必要的**，這裡將簡單研究。
**演示如下：
"">父子元素width關係這時，我們在審查元素時可以發現，span和a的width（和height）的寬度是auto，即寬度是由其內容撐起來的，故為auto。
**如下：
class="這時，子元素設定為了父元素width的100%，那麼子元素的寬度也是500px；parent
">
class="
son">
但是如果我們把子元素的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總是表現為其原始的寬和高。
class="效果如下所示：parent
">
son" src="
">
由此我們可以發現，雖然沒有設定寬度，但是表現在瀏覽器上為160px，它並沒有繼承父元素的100%得到500px，而是根據既定的高度來等比例縮小寬度。 同樣， 如果只設定width，那麼height也會等比例改變。如果我們把img的width設定為100%，就可以發現其寬度這時就和父元素的寬度一致了，如下所示：
而我們一般的做法時，首先確定img的父元素的寬度和高度，然後再將img的寬度和高度設定位100%，這樣，就能鋪滿父元素了。
第一種情況：float:left和float:right
如果將子元素設定為float:left或float：right，這時它就脫離了文件流，**如下：
class="這時，我們就只能看到父元素，而通過審查元素可知，子元素為0x100，浮動在父元素的最右邊。parent
">
class="
son">
第二種情況：position:absolute或position:fixed
同樣，這種情況也是脫離正常文件流，導致width為0。
第三種情況:positon:relative
這種情況下，子元素並沒有脫離文件流，所以此時width就成了預設的100%,寬度為500px。
第一種情況：position:absolute或position:fixed
**如下：
class="效果如下：grand
">
class="
parent
">
class="
son">
也就是說，這時，子元素同樣是預設的100%相對與父元素，fixed時情況相同。
第二種情況:float:right或float:left
同上一種情況。
第三種情況:position:relative
同上面兩種情況。
也就是說，父元素脫離文件流對子元素沒有影響。
深入理解子元素的width與父元素的width關係
對於這一部分內容，如果理解準確，可以更容易控制布局，節省不必要的 這裡將簡單研究。演示如下 父子元素width關係 這時，我們在審查元素時可以發現，span和a的width 和height 的寬度是auto，即寬度是由其內容撐起來的，故為auto。如下 class parent class son ...
父元素與子元素的width關係
演示如下 父子元素width關係 這時，我們在審查元素時可以發現，span和a的width 和height 的寬度是auto，即寬度是由其內容撐起來的，故為auto。如下 這時，子元素設定為了父元素width的100 那麼子元素的寬度也是500px 但是如果我們把子元素的width去掉之後，就會發現...
子元素剩餘部分充滿父元素 深入理解css行內元素
替換 非替換元素 替換元素 不直接顯示html元素內容的元素，如img input iframe等 替換元素尺寸 video iframe等預設寬高為300px 150px，img預設尺寸為0，載入後預設尺寸為原始尺寸 寬高可以通過width height屬性設定，或用css設定 非替換元素 元素內...