简介

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. django框架--cookie/session

    目录 一.http协议无状态问题 二.会话跟踪技术--cookie 1.对cookie的理解 2.cookie的使用接口 3.cookie的属性 4.使用cookie的问题 三.会话跟踪技术--ses ...

  2. (01)JVM-内存三大核心区域以及分析

    package org.burning.sport.jvm; /** *  从JVM调用的角度分析Java程序对内存空间的使用, * 当JVM进程启动的时候,会从类加载器路径中找到包含main方法的入 ...

  3. 【树】Unique Binary Search Trees II

    题目: Given n, generate all structurally unique BST's (binary search trees) that store values 1...n. F ...

  4. 探索DatePicker新用法

    很少用DatePicker,项目需要用到DatePicker,再用时发现跟以前有些变化,重新简单梳理一下DatePicker的用法. 先上效果图: 首先是xml文件的用法: 以前是用android:s ...

  5. python单元测试pytest

    1.pytest简介 pytest是Python的一种单元测试框架,与python自带的unittest测试框架类似,但是比unittest框架使用起来更简洁,效率更高. 执行测试过程中可以将某些测试 ...

  6. windwos文档格式转换成unix格式

    在工作学习中我们避免不了需要将一些脚本和命令记录在笔记里面,我使用的是有道云笔记,每当我将上次记录在有道云的脚本复制出来进行使用的时候,总会报一些奇怪的错误,要么是包含换行符,要么就是格式不对,但是我 ...

  7. C#读取excel文件的内容(使用DataSet)

    C#读取Excel文件的内容,通过OLEDB来连接,关键是连接的路径,如:string strConn = "Provider=Microsoft.ACE.OLEDB.12.0;Data S ...

  8. Java多态的一些陷阱

    Java多态是如何实现的? Java的多态和C++一样,是通过延时绑定(late binding)或者说运行时绑定(runtime binding)来实现的.当调用某一个对象引用的方法时,因为编译器并 ...

  9. 不停机不停服务，MYSQL可以这样修改亿级数据表结构

    摘  要:本文阐述了MySQL DDL 的问题现状.pt-online-schema-change的工作原理,并实际利用pt-online-schema-change工具在线修改生产环境下1.6亿级数 ...

  10. synchronized实现可见性

    JMM关于synchronized的两条规定: 1)线程解锁前,必须把共享变量的最新值刷新到主内存中 2)线程加锁时,将清空工作内存中共享变量的值,从而使用共享变量时需要从主内存中重新获取最新的值 ( ...