CSS深入理解学习笔记之overflow
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">
<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的更多相关文章
- CSS深入理解学习笔记之absolute
1.absolute和float 拥有相同的特性表现: ①包裹性(容器应用之后,可以包裹里面的内容): <!doctype html> <html> <head> ...
- CSS深入理解学习笔记之float
1.float的历史 float设计的初衷仅仅是为了文字环绕效果. 示例代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit ...
- CSS深入理解学习笔记之vertical-align
1.vertical-align基本认识 支持的属性值: ①线类:baseline(默认),top,middle,bottom ②文本类:text-top,text-bottom ③上标下标类:sub ...
- CSS深入理解学习笔记之relative
1.relative和absolute的相煎关系 限制作用:①限制left/top/right/bottom定位:②限制z-index层级:③限制在overflow下的嚣张气焰. relative和f ...
- CSS深入理解学习笔记之margin
1.margin与容器尺寸 元素尺寸:①可视尺寸 clientWidth(标准):②占据尺寸 margin与可视尺寸:①适用于没有设定width/height的普通block元素:②只适用于水平方向尺 ...
- CSS深入理解学习笔记之line-height
1.line-height的定义 定义:两行文字基线之间的距离. 注:不同字体之间的基线是不同的. 2.line-height与行内框盒子模型 行内框盒子模型: ①内容区域(content area) ...
- CSS深入理解学习笔记之z-index
1.z-index基础 z-index含义:指定了元素及其子元素的"z顺序",而"z顺序"可以决定元素的覆盖顺序.z-index值越大越在上面. z-index ...
- CSS深入理解学习笔记之padding
1.padding与容器尺寸之间的关系 对于block水平元素:①padding值暴走,一定会影响尺寸:②width非auto,padding影响尺寸:③width为auto或box-sizing为b ...
- CSS深入理解学习笔记之border
1.border-width border-width为何不支持百分比:语义和使用场景决定的,现实中各种边框本身的概念就不存在百分比的使用方法. border-width支持关键字:thin.medi ...
随机推荐
- TensorBoard的使用（结合线性模型）
TensorBoard是TensorFlow 的可视化工具.主要为了更方便用户理解 TensorFlow 程序.调试与优化,用户可以用 TensorBoard 来展现 TensorFlow 图像,绘制 ...
- C#高级编程学习一-----------------第五章泛型
三层架构之泛型应用 概述 1.命名约定 泛型类型以T开头或就是T. 2.泛型类 2.1.创建泛型类
- Python 的类的下划线命名有什么不同？
1. 以一个下划线开头的命名 ,如_getFile2. 以两个下划线开头的命名 ,如__filename3. 以两个下划线开头和结尾的命名,如 __init__()4. 其它 单下划线前缀的 ...
- 如何一条sql语句查找表中第二大值
例1: 一个Customer表,一个字段Value,现请问如何查到Value中第二大的值 select max(value) from Customer where value < (selec ...
- java数据结构与算法（一）
1.数据结构概念 所谓的数据结构是数据之间的关系,都是为了提高程序效率而设计的. 分为逻辑关系和物理关系两种. 逻辑关系:人为的一种逻辑思维的认为. (1)集合:在一个范围内有多个数据,数据之间没有关 ...
- Java_web学习(二) eclipse(tomcat)配置
1.先下载eclipse,隔代版本最佳 https://www.eclipse.org/ 2.创建workspace01存放项目代码 3.配置工作目录: IDE相关配置信息 2 没有配置tomcat, ...
- linux 安装MySql 5.7.21 操作步骤
一:到mysql官网下载最新的mysql包 mysql-5.7.21-linux-glibc2.12-x86_64 https://dev.mysql.com/downloads/mysql/ 二:在 ...
- iOS 使用矢量图
iOS 使用矢量图 iOS 图标通常用 PNG 格式的图片.PNG 图片放大到超过自身的大小就会模糊.可以使用 PDF 格式的矢量图,优点是任意改变图片大小并且保持清晰度. 简单使用 与 PNG 格式 ...
- Gym 101612C Consonant Fencity
原题传送门 题意:给定一个只含小写字母的字符串,假设aeiouyw为元音字母,现在要把一些字母变为大写,要求相同字母的大小写必须相同,统计变化后的字符串中有多少对相邻.同为辅音字母且大小写不一样的字符 ...
- AFO
留坑 有点绝望 状态什么的,存在么 upd at 2017/11/14还算完满地结束了OI之路了吧.