width: auto
子元素（包括content+padding+border+m arg in）撑满整个父元素的content区域。 子元素有mar gin 、border、padding时，会减去子元素content区域相对应的width值 父元素的content = 子元素（content + padding + border + margin )width: 100%
强制将子元素的content区域 撑满 父元素的content区域 子元素有margin、border、padding时，不 改变 子元素content区域的width，而是溢出父 盒子 ，保持原有值 父元素的content = 子元素的content一例胜千言：
<!DOCTY PE ht ML >
<html lang="en">
<head>
< ;m eta charset="UTF-8">
<t IT le>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;
h ei ght: 100px;
background: pink;
padding: 0 50px;
margin: 0 50px;
border-width: 0 50px;
border -s tyle: 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;
}
.box3 {
width: 100px;height: 100px;background: orange;
}
.box4 {
float: left;
width: 50px;height: 50px;background: pink;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
</html>
注： 图片 子 width 改为 子 content
到此这篇关于css属性width默认值width: auto与width: 100%区别详解的 文章 就介绍到这了,更多相关css width: auto与width: 100%内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！
总结
以上是 为你收集整理的 css属性width默认值width: auto与width: 100%区别详解 全部内容，希望文章能够帮你解决 css属性width默认值width: auto与width: 100%区别详解 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于css属性width默认值width: auto与width: 100%区别详解的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did201625