CSS中width和height的默认值auto与%案例详解
发布时间：2020-09-30 11:57:49 作者：佚名 
我要评论
我要评论这篇文章给大家介绍了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与%案例详解的文章就介绍到这了,更多相关css width和height默认值内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！
相关文章
CSS中height和width在IE和其他浏览器中的区别图文详解
这篇文章主要介绍了CSS中height和width在IE和其他浏览器中的区别，需要的朋友可以参考下2014-05-12css行内元素padding,margin,width,height没有变化
这篇文章主要介绍了css行内元素设置padding,margin,width,height没有变化的解决方法，需要的朋友可以参考下2014-05-07IE6不支持CSS中的min-width/height属性问题的解决方法
min-width与min-height在css中是相当好用的语法，可以让HTML元素最少仍保持一定的宽和高，而需要时仍随着元素的內容增加宽和高。2009-09-08- 关键字描述：最大 图片 控制 这个 var // 宽度 maxwidth if 科汛CMS官方模板中自带了一段JS用来控制文章中的图片的最大高度和宽度。不过我也很奇怪，为什么这个j2009-06-06
最新评论