简介

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）的更多相关文章

  1. CSS深入理解之overflow

    CSS深入理解之overflow 前言 这是跟着张鑫旭重学CSS的overflow篇 基本属性 overflow有以下五个基本属性: 1.visible : 默认值,具体表现为,应用此属性后,子元素超 ...

  2. CSS深入理解学习笔记之absolute

    1.absolute和float 拥有相同的特性表现: ①包裹性(容器应用之后,可以包裹里面的内容): <!doctype html> <html> <head> ...

  3. CSS深入理解之absolute（HTML/CSS）

    absolute和float是同父异母的兄弟,因为它们具有相同点:包裹性与破坏性 absolute的特点 1.独立的,并且可以摆脱overflow的限制,无论是滚动还是隐藏: 2.无依赖,不受rela ...

  4. CSS深入理解之line-height

    以下文字整理自慕课网——张鑫旭的<CSS深入理解之line-height>. line-height,又称行高,指的是两行文字基线之间的距离,又可以称为这行文字所占的高度. 定义三问: 什 ...

  5. 关于DIV+CSS和XHTML+CSS的理解

    WEB标准是一系列标准的集合,并不是仅“DIV+CSS”布局就可以实现.以CSS网页布局只是标准的基础之一.“DIV+CSS”布局只是一种通俗的称呼罢了.而我们学习的目标在于以XHTML建立良好的语义 ...

  6. css pre如果同时运用了css的border-radius、 overflow两个属性且标签中内容太多时,外部div滚动条在firefox下滚动时很卡

    pre如果同时运用了css的border-radius. overflow两个属性且标签中内容太多时,外部div滚动条在firefox下滚动时很卡. 解决方法:去掉css中border-radius. ...

  7. {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性　　定位（position）z-index

    前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...

  8. CSS初步理解

    近期在学习牛腩的时候遇到了网页的制作.挺新奇的.其中涉及到了有关CSS的知识,于是乎自己也就花费两个小时的时间.找了本浅显易懂的书来看了一遍,从宏观上来了解CSS的相关内容.有关CSS的基础知识详见下 ...

  9. 课时59.体验css（理解）

    我们想做这样一个样式,应该怎么做? 分析: 有一个标题(h1),还有一些段落(p) 标题是居中的,段落也是居中的,所以我们可以设置h标签和p标签居的align属性等于center来实现 标题和段落都有 ...

随机推荐

  1. ubuntu16.04搭建hadoop集群环境

    1. 系统环境Oracle VM VirtualBoxUbuntu 16.04Hadoop 2.7.4Java 1.8.0_111 master:192.168.19.128slave1:192.16 ...

  2. Spring统一异常处理

    1.为什么要用Spring的统一异常处理? 项目中无论是controller层.service层还是dao层都会有异常发生.每个过程都单独处理异常,系统的代码耦合度高,工作量大且不好统一,维护的工作量 ...

  3. PHP中 LFI Local File Include,本地文件包 漏洞

    在allow_url_include=On就是远程文件包含了,假设这里为off,那就只能本地包含了. 1.       包含上传文件 只要目标服务器支持上传,不管是jpg,txt,gif等都可以,在其 ...

  4. Oracle 相关查询

    --创建用户 create user zzg identified by zzg123; --修改用户的密码 alter user zzg identified by unis; --所有用户所在的表 ...

  5. springboot-25-springboot 集成 ActiveMq

    消息的发布有2种形式, 队列式(点对点) 和主题式(pub/sub) 模式, 队列式发布后, 接收者从队列中获取消息后, 消息就会消失, 但任意消费者都可以从队列中接受消息, 消息只能被接受一次 主题 ...

  6. Linux用户信息查询

    1 查询目前已登录的用户信息w 或者 who [@bjzw_11_210 ~]# w :: up days, :, users, load average: 0.03, 0.04, 0.00 USER ...

  7. 高云的jQuery源码分析笔记

    (function( window, undefined ) { // 构造jQuery对象 var jQuery = function( selector, context ) { return n ...

  8. Docker run centos 中文乱码，时区不对 问题解决

    开心得写代码,结果用Docker部署发现中文全是问号... 调了半天编码,最后发现不是代码得问题..坑爹.. dokcer 的 centos镜像不带中文,时区也不是中国,所以要自己设置.. #设置时区 ...

  9. C#，一些非常简单但应该知道的知识点

    1.本地变量 一看这个标题你可能会一愣,这是个什么东东.看个小例子: static void main(){   int a=10;   MyClass mc=new MyClass();} 呵呵,这 ...

  10. 面试6 在c#中如何声明一个类不能被继承

    C#通过关键字 sealed 可以声明一个类型不能被继承. 设计中应该为所有不被作为基类的类型添加sealed关键字,用以避免各种来自继承的易产生的错误.