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>
结论1:把子元素定位换成position:relative与上述例子表现一样,因此在元素不设宽度时,若元素为文档流中元素,则此元素继承其父元素宽度
第二种情况:元素为脱离文档流元素
<!-- 父元素不设宽度,继承body宽度 -->
<div>
<div style="float:left;background:orange;">dd</div>
</div>
结论2:把子元素定位换成position:absolute或position:fixed与上述例子表现一样,因此在元素不设宽度的情况下,若子元素为脱离文档流元素,则此元素宽度等于其内容宽度。
2.元素宽度为100%
第一种情况:元素为文档流中元素
结论3:将上面结论1中的例子元素宽度换为100%,表现与结论1例子的表现一样,因此若元素为文档流中元素,则子元素宽度为父元素宽度的的100%。
第二种情况:元素为脱离文档流元素
(1)元素为浮动元素
新闻热点
疑难解答