简介

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. MySQL 5.7.14 win10安装

    1. 下载: http://dev.mysql.com/downloads/mysql/

  2. paddlepaddle使用(一)

    paddlepaddle是百度提出来的深度学习的框架,个人感觉其实和tensorflow差不多(语法上面),因为本人也是初学者,也不是很懂tensorflow,所以,这些都是个人观点. 百度的padd ...

  3. VMware里Ubuntukylin-14.04-desktop的VMware Tools安装图文详解

    不多说,直接上干货! 总的来说,根据分为三个步骤. 步骤一: 点击 :虚拟机—–>安装VM tools 然后发现桌面会跳出如下问题: 客户机操作系统已将 CD-ROM 门锁定,并且可能正在使用 ...

  4. Scope及其子类介绍

    之前写的文章: 关于作用域范围Scope Scope及相关的子类如下: 同时有些Scope还继承了Scope.ScopeListener类,如下: 1.StarImportScope及ImportSc ...

  5. Nginx的几个常用配置和技巧

    文章列举了几个Nginx常见的,实用的,有趣的配置,希望看过之后能说一句:学到了! 一个站点配置多个域名 server { listen 80; server_name ops-coffee.cn b ...

  6. Hive文件存储格式和hive数据压缩

    一.存储格式行存储和列存储 二.Hive文件存储格式 三.创建语句和压缩 一.存储格式行存储和列存储 行存储可以理解为一条记录存储一行,通过条件能够查询一整行数据. 列存储,以字段聚集存储,可以理解为 ...

  7. 编程开发(C/C++&Java&Python&JavaScript&Go&PHP&Ruby&Perl&R&Erlang)

    使用Docker快速部署主流编程语言的开发.编译环境及其常用框架,包括C.C++.Java.Python.JavaScript.Go.PHP.Ruby.Perl.R.Erlang等. 在今后采用编程语 ...

  8. Week5——团队选题&需求分析

    Deadline: 2017-10-22 10:00PM,以博客发表日期为准. 评分基准: 按时交 - 有分(团队选题-5分,,团队贡献分-5分,需求分析-10分,原型设计-10分),检查的项目包括后 ...

  9. 《小岛经济学--鱼、美元和经济的故事》Digest

    作者:彼得.D.希夫(Peter D. Schiff)安德鲁.J.希(Andrew J. Schiff) How an Economy Grows and Why It Crashes 打车到清华,车 ...

  10. Linq to xml 操作带命名空间的xml

    昨天需要操作用代码操作csproj文件,实现不同vs版本的切换. 在用XElement读取了csproj文件以后怎么也获取不到想要的对象. 反反复复试验了好多次都不得要领:先看下csproj文件的内容 ...