CSS中width和height的默认值auto与%示例分析

2023-06-08 03:06:23 246人浏览薄情痞子

摘要

这篇文章主要介绍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://www.lsjlt.com/news/251098.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341