1.元素不設寬度
第一種情況：元素為文檔流中元素
<!-- 父元素寬度為100px -->
<div style="width:100px;">
     <div style="background:orange;">dd</div>
</div>

<!-- 父元素寬度為200px -->
<div style="width:200px;">
     <div style="background:orange;">dd</div>
</div>

<!-- 父元素不設寬度，繼承body寬度 -->
<div>
     <div style="background:orange;">dd</div>
</div>

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

第二種情況：元素為脫離文檔流元素
    <!-- 父元素不設寬度，繼承body寬度 -->
    <div>
        <div style="float:left;background:orange;">dd</div>
    </div>

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

2.元素寬度為100%
第一種情況：元素為文檔流中元素
結(jié)論3：將上面結(jié)論1中的例子元素寬度換為100%，表現(xiàn)與結(jié)論1例子的表現(xiàn)一樣，因此若元素為文檔流中元素，則子元素寬度為父元素寬度的的100%。

第二種情況：元素為脫離文檔流元素
（1）元素為浮動元素

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

（2）元素為絕對定位元素

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

3.元素為固定定位元素

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

階段總結(jié)一
1.在元素不設寬度的情況下：
若元素為普通流中元素，元素寬度等于父元素寬度;
若元素不在文檔流中,元素寬度等于內(nèi)容寬度;

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

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

階段總結(jié)二
1.在元素不設高度的情況下：
若元素沒有內(nèi)容，則高度為0；若元素有內(nèi)容，元素高度為內(nèi)容高度

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

4.元素的各種定義
（1）塊級元素與塊元素
塊級元素(block-level elements)
那些視覺上會被格式化成塊狀的元素，通俗一點來說就是那些會換新行的元素。display 屬性值為：block, list-item, table 值都可以將一個元素設置成塊級元素。

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

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

B.行內(nèi)元素
display屬性為inline的元素，是行內(nèi)級元素的一個子集

（4）置換元素與非置換元素
A.置換元素(replaced element)
一個內(nèi)容 不受CSS視覺格式化模型控制，CSS渲染模型并不考慮對此內(nèi)容的渲染，且元素本身一般擁有固有尺寸（寬度，高度，寬高比）的元素，被稱之為置換元素。這類元素，瀏覽器根據(jù)元素的標簽和屬性，來決定元素的具體顯示內(nèi)容。
常見的置換元素有這些：img,input,textarea,select,button等

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

5.元素高度與寬度的討論
（1）行內(nèi)級非置換元素
寬度與高度的設置對于行內(nèi)級非置換元素時不適用的，例如span,a
（2）行內(nèi)級置換元素
在前面已經(jīng)結(jié)束過關(guān)于置換元素的概念，置換元素一般都是一般擁有固有尺寸（寬度，高度，寬高比）的元素，因此對于置換元素在不設寬度和高度的情況下，元素寬高度等于元素自身固有尺寸。因此只用對當元素寬度或者高度設為100%的情況進行討論
A.有固有比例的元素
對于有固有比例的元素來說如果寬度與高度的一方有確定的值，若另一方并無設置值，則另一方的計算值就由確定的高度或者寬度乘以固有比例來得到，因此對于有固有比例的元素，我們只用討論高度與寬度中的一方即可，例如img元素

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

結(jié)論
對于行內(nèi)級置換元素：在設寬度為100%的情況下
比照上一篇的例子，可自行進行實驗，這里我就直接給出結(jié)論
若元素為普通流元素或者浮動元素，元素寬度或者高度為父元素寬度或者高度的100%；若元素為絕對定位元素，元素寬度或者高度為元素offset-parent寬度或者高度的100%；若元素為固定定位元素，元素寬度或者高度始終為body的100%

最新評論