CSS文档流和非文档流下的宽度和高度问题总结

1、元素不设宽度时
a)第一种情况：元素为标准文档流元素时
i.子元素为默认情况下时
1.父元素设定宽度时，继承父元素的宽度；
代码如下：

效果如下：

2.父元素不设定宽度时，继承body的宽度；
代码如下：

效果如下：

ii.子元素为相对定位时
1.父元素设定宽度时，继承父元素的宽度；
代码如下：

效果如下：

2.父元素不设定宽度时，继承body的宽度；
代码如下：

效果如下：

b)第二种情况：元素为脱离文档流元素时（不分父元素是否有宽度）
i.当元素为浮动时，元素的宽度为内容的宽度；
代码如下：

效果如下：

ii.当元素为绝对定位或固定定位时，元素的宽度为内容的宽度；
代码如下：
绝对定位：

固定定位：

效果如下：

2、元素宽度为100%时
a)第一种情况：元素为标准文档流元素时
结论和元素不设宽度时一样
b)第二种情况：元素为脱离文档流元素时（不分父元素是否有宽度）
i.当元素为浮动时，则此元素宽度为父元素宽度的100%。
代码如下：

效果如下：

ii.当元素为绝对定位元素时，则元素宽度等于该元素已经定位的祖先元素宽度的100%，如果没有已经定位的祖先元素则为body宽度的100%；
代码如下：

效果如下：

iii.当元素为固定定位元素时，则元素的宽度始终都为body宽度的100%
代码如下：

效果如下：

宽度总结
1.在元素不设宽度的情况下：
若元素为普通流中元素，元素宽度等于父元素宽度;
若元素不在文档流中,元素宽度等于内容宽度;
2.在元素宽度为100%的情况下：
若元素为普通流元素或者浮动元素，元素宽度为父元素宽度的100%；若元素为绝 对定位元素，元素宽度为元素offset-parent宽度的100%；若元素为固定定位元素， 元素宽度始终为body的100%

高度总结
1.在元素不设高度的情况下：
若元素没有内容，则高度为0；若元素有内容，元素高度为内容高度
2.在元素高度为100%的情况下：
若元素为普通流元素或者浮动元素，元素高度为父元素高度的100%；若元素为绝 对定位元素，元素高度为元素offset-parent高度的100%；若元素为固定定位元素， 元素高度始终为body的100%
注意：不要给没有设置高度的父元素的子元素添加百分比高度值