CSS:关于元素宽度与高度的讨论 系列文章(一)

约定:以下所讨论元素均为,display:block的非置换元素。
关于什么是置换元素,什么是非置换元素元素,以及在w3c标准中定义的各种视觉化格式的框将在一篇博文中作出详细阐述。

1.元素不设宽度

第一种情况:元素为文档流中元素

<!-- 父元素宽度为100px -->
<div style="width:100px;">
     <div style="background:orange;">dd</div>
</div>

《CSS:关于元素宽度与高度的讨论 系列文章(一)》

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

《CSS:关于元素宽度与高度的讨论 系列文章(一)》

<!-- 父元素不设宽度,继承body宽度 -->
<div> 
     <div style="background:orange;">dd</div>
</div>

《CSS:关于元素宽度与高度的讨论 系列文章(一)》

结论1:把子元素定位换成position:relative与上述例子表现一样,因此在元素不设宽度时,若元素为文档流中元素,则此元素继承其父元素宽度

第二种情况:元素为脱离文档流元素

    <!-- 父元素不设宽度,继承body宽度 -->
    <div>
        <div style="float:left;background:orange;">dd</div>
    </div>

《CSS:关于元素宽度与高度的讨论 系列文章(一)》

结论2:把子元素定位换成position:absoluteposition:fixed与上述例子表现一样,因此在元素不设宽度的情况下,若子元素为脱离文档流元素,则此元素宽度等于其内容宽度。

2.元素宽度为100%

第一种情况:元素为文档流中元素

结论3:将上面结论1中的例子元素宽度换为100%,表现与结论1例子的表现一样,因此若元素为文档流中元素,则子元素宽度为父元素宽度的的100%

第二种情况:元素为脱离文档流元素

1.元素为浮动元素

<!-- 父元素宽度为100px -->
<div style="width:100px;">
     <div style="float:left;background:orange;width:100%">dd</div>
</div>

《CSS:关于元素宽度与高度的讨论 系列文章(一)》

<!-- 父元素宽度为200px -->
<div style="width:200px;">
     <div style="float:left;background:orange;width:100%">dd</div>
</div>

《CSS:关于元素宽度与高度的讨论 系列文章(一)》

结论4:当元素宽度为100%时,若元素为浮动元素,则此元素宽度为父元素宽度的100%

2.元素为绝对定位元素

    <!-- 父元素宽度为100px -->
    <div style="width:100px;">
         <div style="position:absolute;background:orange;width:100%">dd</div>
    </div>

《CSS:关于元素宽度与高度的讨论 系列文章(一)》

<!-- 父元素宽度为100px -->
<div style="width:100px;position:relative">
    <div style="position;absolute;width:100%;background:orange">dd</div>
</div>

《CSS:关于元素宽度与高度的讨论 系列文章(一)》

<!-- 父元素宽度为200px -->
<div style="width:200px;position:relative">
    <div style="position;absolute;width:100%;background:orange">dd</div>
</div>

《CSS:关于元素宽度与高度的讨论 系列文章(一)》

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

3.元素为固定定位元素

<!-- 父元素宽度为100px -->
<div style="width:100px;">
<div style="position:fixed;background:orange;width:100%">dd</div>
</div>

《CSS:关于元素宽度与高度的讨论 系列文章(一)》

<!-- 父元素宽度为100px -->
<div style="width:100px;position:relative">
<div style="position:fixed;background:orange;width:100%">dd</div>
</div>

《CSS:关于元素宽度与高度的讨论 系列文章(一)》

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

总结一

1.在元素不设宽度的情况下:

若元素为普通流中元素,元素宽度等于父元素宽度;
若元素不在文档流中,元素宽度等于内容宽度;

2.在元素宽度为100%的情况下:

若元素为普通流元素或者浮动元素,元素宽度为父元素宽度的100%;若元素为绝对定位元素,元素宽度为元素offset-parent宽度的100%;若元素为固定定位元素,元素宽度始终为body的100%

关于元素高度的讨论

根据上面关于宽度的讨论,大家可以自己根据此思路进行元素高度讨论得出结论,这里我就直接给出我经过验证得出的结论。若有不当之处,请指正。

总结二

1.在元素不设高度的情况下:

若元素没有内容,则高度为0;若元素有内容,元素高度为内容高度

2.在元素高度为100%的情况下:

若元素为普通流元素或者浮动元素,元素高度为父元素高度的100%;若元素为绝对定位元素,元素高度为元素offset-parent高度的100%;若元素为固定定位元素,元素高度始终为body的100%

    原文作者:Murphywuwu
    原文地址: https://segmentfault.com/a/1190000003088279
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞