width: auto
子元素（包括content+padding+border+margin）撑满整个父元素的content区域。
子元素有margin、border、padding时，会减去子元素content区域相对应的width值
父元素的content = 子元素（content + padding + border + margin )
width: 100%
强制将子元素的content区域 撑满 父元素的content区域
子元素有margin、border、padding时，不改变子元素content区域的width，而是溢出父盒子，保持原有值
父元素的content = 子元素的content
例如
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div{
width:600px;
overflow:auto;
}
p{
background-color: red;
}
p.p1{
width:100%;
padding:10px;
}
p.p2{
width:auto;
padding:10px;
}
</style>
</head>
<body>
<div>
<p class="p1">1</p>
</div>
<div>
<p class="p2">1</p>
</div>
</body>
</html>
如上图所示,width为100%,但是自身有padding值,所以会溢出(父div内容content宽度+padding),从而有了一个滚动条.
width为auto,总体宽度为父容器的content,自身有padding值,父容器的content会减去padding值之后才会给子div宽度.
扫一扫
766
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
