关于元素宽度的讨论
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%











