width:auto和width:100%的区别

最新推荐文章于 2024-06-09 16:02:38 发布

扑满大师

最新推荐文章于 2024-06-09 16:02:38 发布

阅读量3.7k

点赞数 1

分类专栏： css

本文链接：https://blog.csdn.net/u013782762/article/details/52077315

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!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%，则说明p的width会得到600px就已经充满div区域，然后自己又有padding，所以会出现滚动条。

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

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

扑满大师

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
width:auto和width:100%的区别

<!DOCTYPE html><html> <head> <title></title> <style type="text/css"> div{ width:600px; overflow:auto; } p{
复制链接

扫一扫

专栏目录