深入理解父元素與子元素的width關系
對於這一部分內容，如果理解准確，可以更容易控制布局，節省不必要的代碼，這里將簡單研究。
第一部分：父子元素都是內聯元素
代碼演示如下：
<!DOCTYPE html>
<html>
<head>
<title>fortest</title>
<style>
/*第一種情況：父元素與子元素均為內聯元素時*/
span{
width:200px; /*失效，因為內聯元素不可設置width和height*/
}
a{
width: 100%; /*失效，內聯元素設置100%也是毫無意義的*/
}
</style>
</head>
<body>
<span><a href="">父子元素width關系</a></span>
</body>
</html>
這時，我們在審查元素時可以發現，span和a的width（和height）的寬度是auto，即寬度是由其內容撐起來的，故為auto。
第二部分：父子元素都是塊級元素
代碼如下：
<!DOCTYPE html>
<html>
<head>
<title>fortest</title>
<style>
div.parent{
width: 500px;
height: 300px;
background: #ccc;
}
div.son{
width: 100%;
height: 200px;
background: green;
}
</style>
</head>
<body>
<div class="parent">
<div class="son"></div>
</div>
</body>
</html>
這時，子元素設置為了父元素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) 替換元素：替換元素就是瀏覽器根據元素的標簽和屬性，來決定元素的具體顯示內容的元素。
例如瀏覽器會根據<img>標簽的src屬性的值來讀取圖片信息並顯示出來，而如果查看(X)HTML代碼，則看不到圖片的實際內容；又例如根據<input>標簽的type屬性來決定是顯示輸入框，還是單選按鈕等。(X)HTML中的 <img>、<input>、<textarea>、<select>、<object>都是替換元素。這些元素往往沒有實際的內容，即是一個空元素，例如：<img src=”cat.jpg” /> <input type="submit" name="Submit" value="提交" /> 瀏覽器會根據元素的標簽類型和屬性來顯示這些元素。可替換元素也在其顯示中生成了框。
b) 不可替換元素(X)HTML 的大多數元素是不可替換元素，即其內容直接表現給用戶端（例如瀏覽器）。
<p>這是一個段落</p>，這個段落p就是一個不可替換元素，那么其中這是一個段落會被全部顯示。
當時img這種元素時，不管我們怎么設置父元素的寬度和高度，而不設置img的寬和高時，img總是表現為其原始的寬和高。
而如果我們只設置了其高度，不設置寬度看看其表現時怎么樣的吧，如下所示（原始圖片的大小為1920X1080的圖片）：
<!DOCTYPE html>
<html>
<head>
<title>fortest</title>
<style>
div.parent{
width: 500px;
height: 300px;
background: #ccc;
}
img{
height: 100px;
background: green;
}
</style>
</head>
<body>
<div class="parent">
<img class="son" src="http://img2.3lian.com/2014/c7/12/d/77.jpg"></img>
</div>
</body>
</html>
效果如下所示：
由此我們可以發現，雖然沒有設置寬度，但是表現在瀏覽器上為160px，它並沒有繼承父元素的100%得到500px，而是根據既定的高度來等比例縮小寬度。 同樣， 如果只設置width，那么height也會等比例改變。 如果我們把img的width設置為100%，就可以發現其寬度這時就和父元素的寬度一致了，如下所示：
而我們一般的做法時，首先確定img的父元素的寬度和高度，然后再將img的寬度和高度設置位100%，這樣，圖片就能鋪滿父元素了。
第四部分：同為塊級元素的父元素與脫離文檔流的子元素
第一種情況：float:left和float:right
如果將子元素設置為float:left或float：right，這時它就脫離了文檔流，代碼如下：
<!DOCTYPE html>
<html>
<head>
<title>fortest</title>
<style>
div.parent{
width: 500px;
height: 300px;
background: #ccc;
}
div.son{
float: right;
height: 100px;
background: red;
}
</style>
</head>
<body>
<div class="parent">
<div class="son"></div>
</div>
</body>
</html>
這時，我們就只能看到父元素，而通過審查元素可知，子元素為0X100，浮動在父元素的最右邊。
第二種情況：position:absolute或position:fixed
同樣，這種情況也是脫離正常文檔流，導致width為0。
第三種情況:positon:relative
這種情況下，子元素並沒有脫離文檔流，所以此時width就成了默認的100%,寬度為500px。
第五部分：同為塊級元素的子元素和脫離文檔流的父元素
第一種情況：position:absolute或position:fixed
代碼如下：
<!DOCTYPE html>
<html>
<head>
<title>fortest</title>
<style>
div.grand{
position: relative;
width: 1000px;
height: 600px;
background:pink;
}
div.parent{
position: absolute;
top:50px;
left: 50px;
width: 500px;
height: 300px;
background: #ccc;
}
div.son{
right: 10px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<div class="grand">
<div class="parent">
<div class="son"></div>
</div>
</div>
</body>
</html>
效果如下：
也就是說，這時，子元素同樣是默認的100%相對與父元素，fixed時情況相同。
第二種情況:float:right或float:left
同上一種情況。
第三種情況:position:relative
同上面兩種情況。
也就是說，父元素脫離文檔流對子元素沒有影響。
如果這篇文章有不足之處和遺漏之初希望大家批評指正。
注：原創文章，未經博主允許，不得轉載。