CSS设置HTML元素的高度与宽度的各种情况总结

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）元素为浮动元素

CSS Code复制内容到剪贴板

<!-- 父元素宽度为100px -->   

<div style="width:100px;">   

     <div style="float:left;background:orange;width:100%">dd</div>   

</div>   

<!-- 父元素宽度为200px -->   

<div style="width:200px;">   

     <div style="float:left;background:orange;width:100%">dd</div>   

</div>  

结论4：当元素宽度为100%时，若元素为浮动元素，则此元素宽度为父元素宽度的100%。

（2）元素为绝对定位元素

CSS Code复制内容到剪贴板

    <!-- 父元素宽度为100px -->   

    <div style="width:100px;">   

         <div style="position:absolute;background:orange;width:100%">dd</div>   

    </div>   

<!-- 父元素宽度为100px -->   

<div style="width:100px;position:relative">   

    <div style="position;absolute;width:100%;background:orange">dd</div>   

</div>   

<!-- 父元素宽度为200px -->   

<div style="width:200px;position:relative">   

    <div style="position;absolute;width:100%;background:orange">dd</div>   

</div>  

结论5：当元素宽度为100%时，若元素为绝对定位元素，则元素宽度等于元素的offset-parent宽度的100%

3.元素为固定定位元素

CSS Code复制内容到剪贴板

<!-- 父元素宽度为100px -->   

<div style="width:100px;">   

<div style="position:fixed;background:orange;width:100%">dd</div>   

</div>   

<!-- 父元素宽度为100px -->   

<div style="width:100px;position:relative">   

<div style="position:fixed;background:orange;width:100%">dd</div>   

</div>  

结论6：当元素宽度为100%时，若元素为固定定位元素，则元素的宽度始终都为body宽度的100%

阶段总结一
1.在元素不设宽度的情况下：
若元素为普通流中元素，元素宽度等于父元素宽度;
若元素不在文档流中,元素宽度等于内容宽度;

（编辑：焦作站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!