CSS：关于元素宽度的讨论_html/css_WEB-ITnose

关于元素宽度的讨论

1.元素不设宽度

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

     
dd

     
dd

      
dd

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

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

        
        
dd
    

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

2.元素宽度为100%

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

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

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

1.元素为浮动元素

     
dd

     
dd

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

2.元素为绝对定位元素

        
         
dd
    

    
dd

    
dd

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

3.元素为固定定位元素

dd

dd

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

总结

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

若元素为普通流中元素，元素宽度等于父元素宽度；若元素为脱离文档流元素，元素宽度等于元素内容宽度

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

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