1.元素不設寬度

第一種情況：元素為文檔流中元素

dddddd

結論1：把子元素定位換成position：relative與上述例子表現一樣，因此在元素不設寬度時，若元素為文檔流中元素，則此元素繼承其父元素寬度

第二種情況：元素為脫離文檔流元素

dd

結論2：把子元素定位換成position:absolute或position:fixed與上述例子表現一樣，因此在元素不設寬度的情況下，若子元素為脫離文檔流元素，則此元素寬度等于其內容寬度。

2.元素寬度為100%

第一種情況：元素為文檔流中元素

結論3：將上面結論1中的例子元素寬度換為100%，表現與結論1例子的表現一樣，因此若元素為文檔流中元素，則子元素寬度為父元素寬度的的100%。

第二種情況：元素為脫離文檔流元素

(1)元素為浮動元素

CSS Code復制內容到剪貼板

dddd

結論4：當元素寬度為100%時，若元素為浮動元素，則此元素寬度為父元素寬度的100%。

(2)元素為絕對定位元素

CSS Code復制內容到剪貼板

dddddd

結論5：當元素寬度為100%時，若元素為絕對定位元素，則元素寬度等于元素的offset-parent寬度的100%

3.元素為固定定位元素

CSS Code復制內容到剪貼板

dddd

結論6：當元素寬度為100%時，若元素為固定定位元素，則元素的寬度始終都為body寬度的100%

階段總結一1.在元素不設寬度的情況下：

若元素為普通流中元素，元素寬度等于父元素寬度;

若元素不在文檔流中,元素寬度等于內容寬度;

2.在元素寬度為100%的情況下：

若元素為普通流元素或者浮動元素，元素寬度為父元素寬度的100%；若元素為絕對定位元素，元素寬度為元素offset-parent寬度的100%；若元素為固定定位元素，元素寬度始終為body的100%

關于元素高度的討論

根據上面關于寬度的討論，大家可以自己根據此思路進行元素高度討論得出結論，這里我就直接給出我經過驗證得出的結論。若有不當之處，請指正。

階段總結二1.在元素不設高度的情況下：

若元素沒有內容，則高度為0；若元素有內容，元素高度為內容高度

2.在元素高度為100%的情況下：

若元素為普通流元素或者浮動元素，元素高度為父元素高度的100%；若元素為絕對定位元素，元素高度為元素offset-parent高度的100%；若元素為固定定位元素，元素高度始終為body的100%

4.元素的各種定義

(1)塊級元素與塊元素塊級元素(block-level elements)

那些視覺上會被格式化成塊狀的元素，通俗一點來說就是那些會換新行的元素。display 屬性值為：block, list-item, table 值都可以將一個元素設置成塊級元素。

(2)塊元素display屬性值為block的元素，是塊級元素的一個子集。

(3)行內級元素與行內元素

A.行內級元素(inline-level elements)行內級元素是那些不會為自身內容形成新的塊，而讓內容分布在同一行中的元素。display 屬性的：inline, inline-table, inline-block 值都可以將一個元素設置成行內級元素。

B.行內元素display屬性為inline的元素，是行內級元素的一個子集

(4)置換元素與非置換元素

A.置換元素(replaced element)一個內容 不受CSS視覺格式化模型控制，CSS渲染模型并不考慮對此內容的渲染，且元素本身一般擁有固有尺寸(寬度，高度，寬高比)的元素，被稱之為置換元素。這類元素，瀏覽器根據元素的標簽和屬性，來決定元素的具體顯示內容。

常見的置換元素有這些：img,input,textarea,select,button等

B.非置換元素(non-replaced element)w3c并沒有給出明確的非置換元素的解釋，但能確定的是除置換元素之外，所有的元素都是非置換元素。

5.元素高度與寬度的討論

(1)行內級非置換元素寬度與高度的設置對于行內級非置換元素時不適用的，例如span,a

(2)行內級置換元素在前面已經結束過關于置換元素的概念，置換元素一般都是一般擁有固有尺寸(寬度，高度，寬高比)的元素，因此對于置換元素在不設寬度和高度的情況下，元素寬高度等于元素自身固有尺寸。因此只用對當元素寬度或者高度設為100%的情況進行討論

A.有固有比例的元素對于有固有比例的元素來說如果寬度與高度的一方有確定的值，若另一方并無設置值，則另一方的計算值就由確定的高度或者寬度乘以固有比例來得到，因此對于有固有比例的元素，我們只用討論高度與寬度中的一方即可，例如img元素

B.沒有固有比例的元素對于沒有固定比例的元素，元素的寬度或者高度不會隨另一方的變化而變化，例如input,textarea,select,button等

結論對于行內級置換元素：在設寬度為100%的情況下

比照上一篇的例子，可自行進行實驗，這里我就直接給出結論

若元素為普通流元素或者浮動元素，元素寬度或者高度為父元素寬度或者高度的100%；若元素為絕對定位元素，元素寬度或者高度為元素offset-parent寬度或者高度的100%；若元素為固定定位元素，元素寬度或者高度始終為body的100%

總結

以上是生活随笔為你收集整理的css设置元素继承父元素宽度_CSS设置HTML元素的高度与宽度的各种情况总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。