1、Overflow基本属性

　　overflow:visible(默认)/hidden/scroll/auto/inherit;

　　visible：超出部分可见。

　　hidden：超出部分隐藏。

　　scroll：超出可滚动。

　　auto：若超出才出现滚动条。

　　inherit：继承。（IE8+）

　　注：overflow-x与overflow-y值不同，其中一个属性值被赋予visible，而另一个被赋值为hidden/scroll/auto，则visible会被重置为auto。

　　兼容性：

　　　　①滚动条外观不同；

　　　　②宽度设定机制不同。

　　　　

　　　　因为IE7下width宽度计算为整400px，然而垂直滚动条占用了部分宽度，所以出现了水平滚动条。想要去掉这个水平滚动条，只需要删除width:100%就可以了。

　　作用前提：

　　　　①非display:inline水平；

　　　　②对应方位的尺寸限制。width/height/max-width/max-height/absolute拉伸；

　　　　③对于单元格td等，还需要table为table-layout:fixed状态才行。

　　overflow:visible妙用：

　　　　

2、Overflow与滚动条

　　滚动条的出现条件：①auto/scroll；②内容超过盒子。

　　body/html与滚动条：

　　　　无论什么浏览器，默认滚动条均来自<html>，而不是<body>。

    • IE-7浏览器默认：html{overflow-y:scroll;}
    • IE-8+浏览器默认：html{overflow-y:auto;}

　　　　因此想要去除页面滚动条html{overflow:hidden}。

　　JS滚动高度：

    • chrome浏览器：document.body.scrollTop;
    • 其他浏览器：document.documentElement.scrollTop;

　　　　

　　注：除chrome浏览器之外，其他所有浏览器的padding-bottom是缺失不显示的。也会导致scrollHeight值不一样。

　　

　　滚动条的宽度机制：

　　　　滚动条会占用容器的可用宽度或高度。

　　　　

　　水平居中跳动问题修复：

　　　　①html{overflow:scroll;};

　　　　②.container{padding-left:calc((100vw - width) * .5);}——100vw是浏览器宽度，width是居中容器宽度。

　　自定义滚动条：

　　　　

　　　　

　　ios原生滚动回调效果：-webkit-overflow-scrolling:touch;

3、Overflow与块状格式上下文

　　块级格式上下文（BFC）：具体内容可参考BFC（块级格式上下文）

　　不建议用overflow修复浮动，会影响布局。常用修复浮动方法：

.clearfix{*zoom:;}

.clearfix:after{content:'';display:table;clear:both;}

　　常用的两栏自适应布局：

.cell{

    display:table-cell;width:2000px; //IE8+ BFC特性

    *display:inline-block;*widht:auto; //IE7- 伪BFC特性

}

4、overflow与absolute绝对定位

　　在absolute定位下，overflow隐藏和滚动会失效。

　　原因：绝对定位元素不总是被父级overflow属性裁剪，尤其当overflow在就对定位元素及其包含块（含position:relative/absolute/fixed声明的父级元素，没有则是body元素）之间的时候。

　　问题：如何避免失效？

　　答：①overflow元素自身作为包含块；

　　　　②overflow元素子元素为包含块；

　　　　③transform声明当作包含块：ⅰoverflow元素自身transform（仅支持：IE9+/FireFox）；ⅱoverflow子元素transform（支持IE9+/FireFox/Chrome/Safari/Opera）

　　overflow失效妙用：

　　　　菜单栏固定显示。

　　　　

　　　　代码实现：

 <!DOCTYPE html>

 <html lang="zh-cn">

 <head>

     <meta charset="UTF-8">

     <title>testDocument</title>

     <style>

         html,body{width: 100%;height: 100%;}

         html,body,p{padding: 0;margin: 0;}

         div{box-sizing: border-box;}

         .container{width: 100%;height:100%;padding-left: calc((100vw - 600px) * .5);background-color: #006699;overflow: auto;}

         .content{width: 600px;height:1500px;background-color: #66CCCC;}

         .container p{color: #fff;}

         .h0{height:0;}

         .ovh{overflow:hidden;}

         .tr{text-align:right;}

         .abs{position:absolute;}

     </style>

 </head>

 <body>

     <div class="container">

         <div class="content">

             <div class="h0 ovh tr">

                 &nbsp;<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1515498610508&di=c0acfae2cbda4f183641367695e5db3f&imgtype=0&src=http%3A%2F%2Fh.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2F6d81800a19d8bc3ee6ff655b828ba61ea9d345af.jpg" alt="" class="abs">

             </div>

             <p>.h0{height:0;}</p>

             <p>.ovh{overflow:hidden;}</p>

             <p>.tr{text-align:right;}</p>

             <p>.abs{position:absolute;}</p>

         </div>

     </div>

 </body>

 </html>

5、依赖overflow的样式表现

　　CSS3的resize属性，起作用的前提是overflow不能是visible。

　　resize的拖拽区域默认大小是17px * 17px。滚动条的尺寸也是17px。

　　文本溢出省略号显示属性text-overflow:ecllipsis。前提是white-space:nowrap以及overflow:hidden。

6、overflow与锚点技术

　　（1）锚链和锚点

　　　　锚链：就是我们url中常见的“#XXXX”。

　　　　锚点：就是标签的ID。

　　　　锚点定位：通过锚链定位锚点位置。

　　（2）锚点定位的本质

　　　　在页面可滚动容器中，通过锚链滚动到其对应的锚点元素，即改变容器的滚动高度。

　　　　前提：①容器可滚动；②锚点元素在容器内。

　　（3）锚点定位的触发

　　　　①url地址中的锚链与锚点元素；

　　　　②可focus的锚点元素处于focus状态；

　　（4）锚点定位的作用

　　　　①快速定位

　　　　②选项卡技术

　　　　③单页应用

CSS深入理解学习笔记之overflow的更多相关文章

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

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

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

    1.float的历史 float设计的初衷仅仅是为了文字环绕效果. 示例代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit ...

  3. CSS深入理解学习笔记之vertical-align

    1.vertical-align基本认识 支持的属性值: ①线类:baseline(默认),top,middle,bottom ②文本类:text-top,text-bottom ③上标下标类:sub ...

  4. CSS深入理解学习笔记之relative

    1.relative和absolute的相煎关系 限制作用:①限制left/top/right/bottom定位:②限制z-index层级:③限制在overflow下的嚣张气焰. relative和f ...

  5. CSS深入理解学习笔记之margin

    1.margin与容器尺寸 元素尺寸:①可视尺寸 clientWidth(标准):②占据尺寸 margin与可视尺寸:①适用于没有设定width/height的普通block元素:②只适用于水平方向尺 ...

  6. CSS深入理解学习笔记之line-height

    1.line-height的定义 定义:两行文字基线之间的距离. 注:不同字体之间的基线是不同的. 2.line-height与行内框盒子模型 行内框盒子模型: ①内容区域(content area) ...

  7. CSS深入理解学习笔记之z-index

    1.z-index基础 z-index含义:指定了元素及其子元素的"z顺序",而"z顺序"可以决定元素的覆盖顺序.z-index值越大越在上面. z-index ...

  8. CSS深入理解学习笔记之padding

    1.padding与容器尺寸之间的关系 对于block水平元素:①padding值暴走,一定会影响尺寸:②width非auto,padding影响尺寸:③width为auto或box-sizing为b ...

  9. CSS深入理解学习笔记之border

    1.border-width border-width为何不支持百分比:语义和使用场景决定的,现实中各种边框本身的概念就不存在百分比的使用方法. border-width支持关键字:thin.medi ...

随机推荐

  1. Proof of Elapsed Time--Hyperledger Sawtooth 共识算法

    这一片文章中我们介绍一下Hyperledger Sawtooth项目中所提出的PoET共识算法, 现有的区块链共识算法大概可以分为两种: Nakamoto consensus:通过乐透的方式选择出一个 ...

  2. linux常用基本命令整理小结

    linux系统遵循的基本原则 由目标单一的小程序组成,组合小程序完成复杂任务: 一切皆文件: 尽量避免捕捉用户接口: 配置文件保存为纯文本文件: Linux命令行常识 命令格式 命令+选项+参数 选项 ...

  3. 使用Git命令把本地项目上传到github上托管

    (1)在github上,新建一个仓库 (2)打开git-bash,进入项目目录下 (3)git init (4)git add . (5)git status (6)git commit -m &qu ...

  4. 【.Net边角料系列】1-单例模式（我真不是你想的那样）

    什么事边角料? 边角料就是你编程的时候,很少能够用上,或者说你压根就不知道得东西,我就称这些东西为边角料.这个叫.net边角料可能有点大,其实这个系列是纯粹的C#边角料系列. 为什么写.net边角料呢 ...

  5. 仿腾讯课堂固定滚动列表ReactNative组件

    前言 由于业务需要做成类似腾讯课堂课程详情滚动的效果,考虑到后面有可能有新的呈现方式,RN提供的组件没有这种滚动控件,不如自己封装,其实去年已经写了一篇但是写的比较乱,周末花了点时间重写梳理下做的东西 ...

  6. cs231n spring 2017 lecture15 Efficient Methods and Hardware for Deep Learning 听课笔记

    1. 深度学习面临的问题: 1)模型越来越大,很难在移动端部署,也很难网络更新. 2)训练时间越来越长,限制了研究人员的产量. 3)耗能太多,硬件成本昂贵. 解决的方法:联合设计算法和硬件. 计算硬件 ...

  7. 2017 年“认证杯”数学中国数学建模网络挑战赛 C题思路讲解

    之前有小伙伴私信我叫我说说这次比赛C题的思路,怎么写的,我就写篇博客说说吧,仅供参考! 针对C题,该题目比较综合,是一个成熟的数模赛题,与国赛的相似性较高.一般而言,第一问难度较低,题目要求进行数据挖 ...

  8. MongoDB模拟多文档事务操作

    Mongodb不支持多文档原子性操作,因此依据两阶段提交协议(Two Phase Commits protocol)来模拟事务. 以两个银行账户之间的转账行为为例,来说明如何实现多文档间的事务操作. ...

  9. 在tomcat中布置项目的介绍（一）

    一:为什么要在tomcat中单独布置项目 因为上线到服务器上需要项目的功能之间彼此独立,这个以后我会细说. 二:简单的步骤一个都不能少 conf文件里的配置文件需要配置好:logback.xml文件会 ...

  10. 自定义省市选择器 微信小程序多列选择器

    由于微信小程序的选择器为省市区选择器共3列 如我仅需要省市2列的选择器 就需要我们另寻他法找来找去没有合适的 只能自己写了 1. 首先我们把所需要的省数据 市县数据放在一个 p_c.js 文件里面,使 ...