width:100% width:auto; 区别

来源:互联网 发布:js判断两个字符串相等 编辑:程序博客网 时间:2024/06/16 01:11

<div>
    <p>1</p>

</div>

div{
width:600px;

overflow:auto;
}
p{
        width:100%;
        padding:10px;
}

p{
        width:auto;
        padding:10px;
}

如果是width:100%,则说明p的width会得到600px就已经充满div区域,然后自己又有padding,所以会出现滚动条。

而width:auto则比较聪明,它是总体宽度(广义,包括width,margin,padding,border这些)等于父级宽度(狭义,内容区,仅指width),所以如果padding已经左右占去20px的空间,那么width给的值就是580px。

所以,如果:

p{
            width:auto;
            background-color: red;
            margin:10px;
            padding:10px;
 }

其实最后实际的width值为560px。

但无论是width:100%还是width:auto;,其计算的参照都是父级内容区width值,而非总宽度值。。

0 0
原创粉丝点击