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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/lianglizhong1991/article/details/59560764

我们常常会看到一些网页永远都是充满屏幕的,不会出现水平方向的滚动条,那这些灵活的页面布局是怎样做到的呢?而有些出现水平方向的滚动条的页面又是因为什么原因呢?

例:

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.清除浮动之后的页面及代码:

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
*{margin:0;padding:0;}
#box{width:100%;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>

效果如下:



我们看到清除浮动之后,父元素得以重现,但是这时水平方向上的滚动条仍然存在,注意我们再来看没有滚动条时是什么样的情况:

3.没有水平滚动条的页面及代码:

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
*{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)



展开阅读全文

没有更多推荐了,返回首页