width:100%与width:auto的区别

最新推荐文章于 2024-02-28 11:22:44 发布

竹青墨颜

最新推荐文章于 2024-02-28 11:22:44 发布

阅读量235

点赞数

分类专栏： HTML与CSS进阶文章标签： CSS 布局

本文链接：https://blog.csdn.net/weixin_44722346/article/details/100088567

版权

HTML与CSS进阶专栏收录该内容

8 篇文章 0 订阅

订阅专栏

在布局中，width:100%和width：auto都会经常用到，那么，二者究竟有何区别呢？下面就来探讨下。
先上代码

<style>
    * {
      margin: 0;
      padding: 0;
    }
    .parent {
      width: 800px;
      margin: 50px auto;
      border: 2px solid red;
    }
    .child1 {
      background: orange;
    }
    .child2 {
      width: 100%;
      background: blue;
    }
    .child3 {
      width: auto;
      background: green;
    }
</style>
<body>
  <div class="parent">
    <div class="child1">看看我的宽度</div>
    <div class="child2">看看我的宽度</div>
    <div class="child3">看看我的宽度</div>
  </div>
</body>

效果图1.png
可以看到，元素在不设置padidng和margin的情况下，width:100%和width:auto表现一样，都是继承自父级的宽度。元素的默认宽度是 width:auto。
但是，设置了padding和margin后，表现则大不相同：

    .child2 {
      width: 100%;
      margin-left: 100px;
      padding-left: 100px;
      background: blue;
    }
    .child3 {
      width: auto;
      margin-left: 100px;
      padding-left: 100px;
      background: green;
    }

效果图2.png
可以看出child2溢出父元素，child3则没有。原因是什么呢？
1. 计算方式
因为二者的宽度是计算方式不同：
width:100%=‘父元素width’ + ‘padding-left/right’ + ‘border-left/right’ + (margin-left/right);

width: auto= ‘width’ + ‘padding-left/right’ +‘border-left/right’ + (margin-left/right) ;

2. 结论
1). width:100% 并不包含margin-left margin-right的属性值，直接取其父容器的宽度加上含margin-left /margin-right的值。如果设置了margin那新的width值是容器的宽度加上margin的值。（细心观察）就会发现加了 margin相对应的边就会多出设置的空白。而且会多出横向滚动条因为宽度已经超出了屏幕的范围。(这条相对于父容器是body)。

2).width:auto包含margin-left/margin-right的属性值。其值包含margin-left /margin-right的值。width:auto总是占据整行！！！这其中margin的值已经包含其中了（也就是一整行）如果要设置margin的值那就用一整行然后减去margin的值就得到了现在的宽度了。减去的这个值就是相应边得空白。显著的特征是这个没有横向滚动条出现也就是宽度没有增加。

竹青墨颜

关注

0
点赞
踩
0

收藏

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

在布局中，width:100%和width：auto都会经常用到，那么，二者究竟有何区别呢？下面就来探讨下。先上代码<style> * { margin: 0; padding: 0; } .parent { width: 800px; margin: 50px auto; border: 2px ...
复制链接

扫一扫