首页 > 代码库 > overflow属性失效分析
overflow属性失效分析
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>
下来又发现了scroll和auto有意思的地方，
scroll： 无论内容有多少，哪怕一个字，这个元素框都会显示滚动条；
auto：只有内容超出文本框的内容区，才会出现滚动条；
overflow属性失效分析
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。