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

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

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

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

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

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

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

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

發(fā)表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發(fā)表