关于width=100%时会出现滚动条的情况

最新推荐文章于 2024-11-23 20:31:08 发布

骆小胖

最新推荐文章于 2024-11-23 20:31:08 发布

阅读量3.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签： CSS

本文链接：https://blog.youkuaiyun.com/qq_42445490/article/details/88818969

CSS 专栏收录该内容

29 篇文章

订阅专栏

本文探讨了当CSS中使用width:100%时出现横向滚动条的原因及解决方案，介绍了两种解决方法：一是通过设置box-sizing为border-box调整盒模型；二是将width设为auto，并详细解释了这两种方式的区别。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天有学生问了个问题，关于width=100%时会出现滚动条的情况，我审查了下源码

.main{
    width:100%;
    height:200px;
    background:rgba(0,0,0,0.5);
    border:1px solid green;
}

很明显，原因是在borde边框，我给的解决方法有两个

（1）设置盒模型

box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */

content-box：元素宽高=元素内容

盒模型border-box:元素宽高=内容+内边距+边框

（2）width换成auto

原因：

想了解原因，首先必须清楚CSS的width:100%和width:auto区别

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

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