码迷,mamicode.com
首页 > Web开发 > 详细

CSS深入理解之overflow(HTML/CSS)

时间:2017-12-31 10:48:47      阅读:179      评论:0      收藏:0      [点我收藏+]

标签:top   element   ble   会同   document   log   idt   overflow   特性   

简介

overflow看上去其貌不扬,其中蕴含的知识点还是很多的,有很多鲜为人知的特性表现。

 

overflow基本属性值

1、visible(默认)

2、hidden

3、scroll

4、auto

5、inherit

 

body/html与滚动条

无论什么浏览器,默认滚动条均来自html标签,而不是body标签。因为新建一个空白html页面,body默认有margin值,如果滚动条来自body,则应该有边距,而不是紧贴着浏览器的边缘。

 

body/html与滚动条(滚动高度)

Chrome浏览器:document.body.scrollTop

其他浏览器:document.documentElement.scrollTop

目前两者不会同时存在,因此建议写法为:var st = document.documentElement.scrollTop || document.body.scrollTop

 

滚动条的宽度机制

由于滚动条会占用容器的可用宽度和高度,因此可能会导致原本和谐的布局,滚动条出现后直接挂掉。

获取滚动条宽度:

技术分享图片

 

CSS深入理解之overflow(HTML/CSS)

标签:top   element   ble   会同   document   log   idt   overflow   特性   

原文地址:https://www.cnblogs.com/fengxiongZz/p/8156490.html

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