分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 软件开发

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

发布时间:2023-09-06 01:33责任编辑:胡小海关键词:CSSHTML

简介

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)

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

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved