关于width=100%时会出现滚动条的情况
我们常常会看到⼀些⽹页永远都是充满屏幕的，不会出现⽔平⽅向的滚动条，那这些灵活的页⾯布局是怎样做到的呢？⽽有些出现⽔平⽅向的滚动条的页⾯⼜是因为什么原因呢？
例：
1.出现⽔平⽅向滚动条的页⾯及代码：
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
*{margin:0;padding:0;}
#box{width:100%;background:black;border:5px solid red;}
.box1{width:700px;height:200px;background:green;float:left;}
.box2{width:150px;height:500px;background:blue;float:right;}
</style>
</head>
<body>
<div id="box">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
</html>
效果如下：
这是⼀个横向两列布局的页⾯，从图中我们可以看到当⼦元素box1和box2运⽤了浮动⽽其⽗元素box没有设置浮动时，⼦元素会把⽗元素给覆盖掉，这是因为什么呢？这是因为⽗元素没有设置浮动，⽽两个⼦元素的宽度加起来之后⼤于⽗元素，导致⽗元素的⾼度⽆法撑开，⼦元素内容溢出。ok，我们现在对⽗元素进⾏清除浮动看看（注意这时⽔平⽅向的滚动条已经出现）：
2.清除浮动之后的页⾯及代码：
*{margin:0;padding:0;}
#box{width:100%;background:black;border:5px solid red;overflow:hidden;}
.box1{width:700px;height:200px;background:green;float:left;}
html横向滚动条样式.box2{width:150px;height:500px;background:blue;float:right;}
</style>
</head>
<body>
<div id="box">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
</html>
效果如下：
我们看到清除浮动之后，⽗元素得以重现，但是这时⽔平⽅向上的滚动条仍然存在，注意我们再来看没有滚动条时是什么样的情况：3.没有⽔平滚动条的页⾯及代码：
*{margin:0;padding:0;}
#box{width:90%;background:black;border:5px solid red;overflow:hidden;}
.box1{width:700px;height:200px;background:green;float:left;}
.box2{width:150px;height:500px;background:blue;float:right;}
</style>
</head>
<body>
<div id="box">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
</html>
效果如下：
通过对⽐2和3我们可以发现，当⽗元素的宽度width=100%时，页⾯就会出现⽔平⽅向上的滚动条，这是为什么呢？要弄清楚这个问题，我们⾸先要知道这个width=100%的基准是谁，也就是说它是相对于谁⽽⾔的?它的参照物是谁？根据CSS的相关知识我们知道，当⼦元素没有设置样式时，⼦元素会继承
其⽗元素的样式，⽽在本例当中，⽗元素box的⽗元素⼜是谁呢？答案是标签<html>，或者也可以理解为当前浏览器的可视窗⼝，所以它的宽度是整个浏览器窗⼝的宽度，⽽浏览器具有放⼤缩⼩的功能，所以它就会把⼦元素的宽度设置为当前可见区域的宽度，所以就会出现滚动条的情况，当滑动滚动条时，⼦元素的内容就会随着浏览器窗⼝的可视宽度进⾏显⽰，所以如果不想出现滚动条的情况，那么就需要在设置width值时，⼀定要设置⼀个不为100%的值。（如果需要⽤滚动条来显⽰溢出的话，那么可以把overflow设置为auto或者scroll）

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。