width:auto和width:100%区别
分类：实例代码
可能不少朋友认为width:auto和width:100%的效果一样的，或者受对于这两个属性值理解有点模糊。
下面就通过代码实例介绍一下这两者的区别，获取会让不明白的朋友脑洞大开。
代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style>
#box {
width:500px;
height:300px;
background:#ccc;
}
#antzone {
padding:10px;
width:100%;
height:200px;
background:blue;
}
</style>
</head>
<body>
<div id="box">
<div id="antzone"></div>
</div>
</body>
</html>
从代码的运行表现来看，子元素在水平方向上超出了父元素。
因为子元素的宽度是100%，那么它的width值就是500px，再加上padding自然就超出了。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style>
#box {
width:500px;
height:300px;
background:#ccc;
}
#antzone {
padding:10px;
width:auto;
height:200px;
background:blue;
}
</style>
</head>
<body>
<div id="box">
<div id="antzone"></div>
</div>
</body>
</html>
上面的代码就没有超出，可以看出auto更为智能一点，能够在总体尺寸上适应父元素。
一线大厂高级前端编写，前端初中阶面试题，帮助初学者应聘，需要联系微信：javadudu