关于元素宽度的讨论
<!-- 父元素宽度为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与上述例子表现一样，因此在元素不设宽度的情况下，若子元素为脱离文档流元素，则此元素宽度等于其内容宽度。
结论3：将上面结论1中的例子元素宽度换为100%，表现与结论1例子的表现一样，因此若元素为文档流中元素，则子元素宽度为父元素宽度的的100%。
1.元素为浮动元素
<!-- 父元素宽度为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.元素为绝对定位元素
<!-- 父元素宽度为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.元素为固定定位元素
<!-- 父元素宽度为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%
若元素为普通流中元素，元素宽度等于父元素宽度；若元素为脱离文档流元素，元素宽度等于元素内容宽度
若元素为普通流元素或者浮动元素，元素宽度为父元素宽度的100%；若元素为绝对定位元素，元素宽度为元素offset-parent宽度的100%；若元素为固定定位元素，元素宽度始终为body的100%
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
509
收藏
