这篇文章主要介绍CSS中width和height的默认值auto与%示例分析，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！结论width的%：定义基于包含块（父元素）宽度的百分比宽度，会突破父级的限制width的au
这篇文章主要介绍CSS中width和height的默认值auto与%示例分析，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
结论
width的%：定义基于包含块（父元素）宽度的百分比宽度，会突破父级的限制
width的auto：尽量被父级包裹
height的%：基于包含它的块级对象的百分比高度，会突破父级的限制
height的auto：尽量被父级包裹
案例
一定跑一遍，花几分钟体会一下尽量被父级包裹与突破父级的限制
width案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * { margin: 0;padding: 0; } body { background: #dcdcdc; } .box { width: 400px; border: 3px solid red; padding: 0 50px; } .box1 { width: auto; height: 100px; background: pink; padding: 0 50px; margin: 0 50px; border-width: 0 50px; border-style: solid; border-color: green; } .box2 { width: 100%; height: 100px; background: Gold; padding: 0 50px; margin: 0 50px; border-width: 0 50px; border-style: solid; border-color: green; } </style></head><body><div class="box"> <div class="box1"></div> <div class="box2"></div></div></body></html>height案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * { margin: 0;padding: 0; } body { background: #dcdcdc; } .box { width: 400px; border: 3px solid red; padding: 50 0px; height: 400px; } .box1 { width: 200px; height:auto; background: pink; padding: 50px 0px; margin: 50px 0px; border-width: 50px 0px; border-style: solid; border-color: green; } .box2 { width: 200px; height:100%; background: gold; padding: 50px 0px; margin: 50px 0px; border-width: 50px 0px; border-style: solid; border-color: green; } </style></head><body><div class="box"> <div class="box1"></div> <div class="box2"></div></div></body></html>以上是“CSS中width和height的默认值auto与%示例分析”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注编程网精选频道！
--结束END--
本文标题: CSS中width和height的默认值auto与%示例分析
本文链接: https://lsjlt.com/news/251098.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0