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

阅读更多

今天有学生问了个问题，关于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的值就得到了现在的宽度了。减去的这个值就是相应边得空白。显著的特征是这个没有横向滚动条出现也就是宽度没有增加

 

 

 

 

 

 

.