码迷,mamicode.com
首页 > 其他好文 > 详细

overflow属性失效分析

时间:2017-03-03 01:09:45      阅读:228      评论:0      收藏:0      [点我收藏+]

标签:取值   rac   flow   溢出   height   char   对比   分析   分享   

overflow可以控制超出框内容的显示方式:隐藏、显示、滚动显示
可以取值scroll,表示但凡超出框的内容可以通过滚动条实现浏览,但是如下demo却没有实现滚动显示的功能。
技术分享View Code

于是仔细看了下overflow的定义:overflow 属性规定当内容溢出元素框时发生的事情。

对比发现, 我理所当然地把body视为元素框了, 于是用div试了下, 发现果然问题出在body上面了。

由此看来:body不是一个元素框

技术分享
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Demo</title>
 6     <style>
 7         span{
 8             font-size:30px;
 9         }
10         .demo-body{
11             width:30vw;
12             height:20vh;
13             border: solid red 2px;
14             overflow: scroll;
15         }
16     </style>
17 </head>
18 
19 <body>
20 <div class="demo-body">
21     <span>
22         测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试
23     </span>
24 </div>
25 
26 </body>
27 </html>
View Code

 

下来又发现了scroll和auto有意思的地方,

scroll: 无论内容有多少,哪怕一个字,这个元素框都会显示滚动条;

auto:只有内容超出文本框的内容区,才会出现滚动条;

 

overflow属性失效分析

标签:取值   rac   flow   溢出   height   char   对比   分析   分享   

原文地址:http://www.cnblogs.com/ruoxian/p/6493327.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!