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. vb实验7-找出小于18000的最大素数

    vb实验7-找出小于18000的最大素数 vb实验7-找出小于18000的最大素数 ---–写给女朋友的题解 在窗体上画一个文本框,名称为TEXT1,两个命令按钮,C1和 C2,标题分别为" ...

  2. iOS开发的另类神器:libimobiledevice开源包【类似android adb 方便获取iOS设备信息】

    简介 libimobiledevice又称libiphone,是一个开源包,可以让Linux支持连接iPhone/iPod Touch等iOS设备.由于苹果官方并不支持Linux系统,但是Linux上 ...

  3. PE文件详解(九)

    本篇文章转载自小甲鱼的一篇日志,原文地址 我们知道,Windows 将程序的各种界面定义为资源,包括加速键(Accelerator).位图(Bitmap).光标(Cursor).对话框(Dialog ...

  4. vim 简单笔记

    vim编辑器Linux系统常用的一种编辑器  有三种模式   命令模式:插入模式:编辑模式 1 插入模式的基本操作: 从命令模式切入到插入模式只需要注意有三个字母aio就可以了  a是在当前光标后插入 ...

  5. wn-cli 像React组件开发一样来开发微信小程序

    项目地址:wn-cli wn-cli wn-cli 像React组件开发一样来开发微信小程序 名字由来:wn -> weapp native 取第一个字母 Install npm install ...

  6. mongodb 的基本函数语法封装

    //这个模块里面封装了所有对数据库的常用操作 var MongoClient = require('mongodb').MongoClient; var config = require(" ...

  7. bzoj:1675 [Usaco2005 Feb]Rigging the Bovine Election 竞选划区

    Description It's election time. The farm is partitioned into a 5x5 grid of cow locations, each of wh ...

  8. BZOJ 2222: [Cqoi2006]猜数游戏【神奇的做法,傻逼题,猜结论】

    2222: [Cqoi2006]猜数游戏 Time Limit: 20 Sec  Memory Limit: 259 MBSubmit: 604  Solved: 260[Submit][Status ...

  9. MVC学习笔记(分享)

    一.SpringMVC基础入门,创建一个HelloWorld程序 1.首先,导入SpringMVC需要的jar包. 2.添加Web.xml配置文件中关于SpringMVC的配置 <!--conf ...

  10. jq实现上传头像并实时预览功能

    效果 页面结构 <form action="" name="form0" id="form0"> <input type= ...