CSS之overflow

╰+攻爆jí腚メ 2022-09-23 08:28 280阅读 0赞

# 第1章 基本属性 #

## 1.1overflow的五种取值 ##

*  visible（默认）
 *  hidden
 *  scroll
 *  auto
 *  inherit

## 1.2overflow-x和overflow-y（IE8+） ##

两种情况：  
1.overflow-x和overflow-y值相同，则等同于overflow  
2.overflow-x和overflow-y值不同，并且一个被赋予visible，另一个被赋予hidden、scroll、或auto，则visible会被重置为auto。

## 1.3兼容性 ##

### 1.3.1燕环肥瘦，各有千秋 ###

各个浏览器滚动条的样式不一样  
![这里写图片描述][20160707170519211]

### 1.3.2宽度设定机制不同 ###

.box{width:400px;height:100px;overflow:auto;}
    .content{width:100%;height:200px;background:red;}
    
    <div class="box">
        <div class="content"></div>
    </div>

由于内层的div高度大于外层的div高度，所以垂直方向会出现滚动条；  
内层的div宽度设置100%,和外层div宽度一直，按道理是不会出现水平滚动条的。

但是事与愿违：IE7下水平滚动条也会出现。

这是因为：垂直方向出现滚动条后，外层div宽度就不是400px了，比400px小，而这是内层div的宽度100%仍然被计算成400px，因此就出现了这个现象。

## 1.4起作用的前提 ##

1.非display:inline 水平  
2.对应方位的尺寸限制：width/height/max-width/max-height/absolute 拉伸

.size{
       max-width:200px;max-height:300px;overflow:auto;}
    
    <div>
        <img src="mm.jpg" width="256" height="191"/>
    </div>

道理上只会出现水平滚动条，但是IE7水平垂直的滚动条都出现了  
3.对于单元格`<td>`等，还需要table为table-layout:fixed状态才行

## 1.5overflow:visible妙用 ##

IE7浏览器下，文字越多，按钮两侧padding留白就越大！！！  
![这里写图片描述][20160707171851890]

# 第2章 overflow与滚动条 #

## 2.1滚动条出现的条件 ##

1.overflow:auto/overflow:scroll—-`<html>`/`<textarea>`  
2.草窝藏不住凤凰，潜水困不住蛟龙  
![这里写图片描述][20160707172431830]

## 2.2body/html与滚动条 ##

无论什么浏览器，默认滚动条均来自`<html>`!而不是`<body>`  
新建一个空白HTML页面，`<body>`默认.5em margin值，如果滚动条来自`<body>`，则应该有边距，如图1；而不是现在的靠着浏览器边缘，如图2  
![这里写图片描述][20160707173114902]

IE7-浏览器默认：html\{overflow-y:scroll\}  
IE8+浏览器默认：html\{overflow:auto\}

所以，如果我们想要去除页面默认滚动条，只需要：  
html\{overflow:hidden;\}

而没有必要把`<body>`也拉下水  
html,body\{overflow:hidden;\}

## 2.3javaScript与滚动高度 ##

\-Chrome浏览器是：document.body.scrollTop  
\-其他浏览器是：document.documentElement.scrollTop

目前，**两者不会同时存在**，因此，坊间流传这类写法：  
var scrollTop = document.body.scrollTop + document.documentElement.scrollTop;  
建议使用：  
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop；

## 2.4overflow的padding-bottom缺失现象 ##

.box{ width:400px;height:100px;padding:100px 0;overflow:auto;}

![这里写图片描述][20160707174802339]

![这里写图片描述][20160707175017945]

导致：不一样的scrollHeight（元素内容高度）

## 2.5滚动条的宽度机制 ##

一句话：滚动条会占用容器的可用宽度和高度

## 2.6滚动条的宽度 ##

准确的说法应该是滚动栏的宽度。下面的方法可以简单获得：

.box{ width:400px;overflow:scroll;}
    .in{ zoom:1;/* for IE7*/}

console.log(400 - document.getElementById("in").clientWidth)

\*\*结论：\*\*IE7+/Chrome/FireFox(window7) 均为17像素

## 2.7overflow:auto的潜在布局隐患 ##

滚动条会占用容器尺寸，原本和谐的布局，滚动条出现后可能挂掉！！  
![这里写图片描述][20160707180101038]

![这里写图片描述][20160707180115470]

## 1.8水平居中跳动问题 ##

.container{ width:1150px;margin:0 auto}

问题修复：  
1.html\{overflow-y:scroll;\}  
2.container\{padding-left:calc(100vw - 100%)\}  
IE9+支持

## 2.9自定义滚动条-webkit ##

![这里写图片描述][20160707180726015]

## 2.10IOS原声滚动回调效果 ##

`-webkit-overflow-scrolling:touch;`

# 第3章 overflow与BFC #

## 3.1BFC为哪般？ ##

BFC（Block formatting context）-“块级格式化上下文”

特性：页面之结界，内部元素再怎么翻云覆雨都不会与影响外部。

## 3.2使用场景 ##

![这里写图片描述][20160707181709405]  
1.清除浮动影响  
2.避免margin穿透问题  
3.两栏自适应布局

### 3.2.1清除浮动（内部浮动无影响） ###

![这里写图片描述][20160707181946837]

![这里写图片描述][20160707182000174]

![这里写图片描述][20160707182011525]

![这里写图片描述][20160707182021737]

![这里写图片描述][20160707182239990]

### 3.2.2避免margin穿透问题 ###

![这里写图片描述][20160707183121720]

![这里写图片描述][20160707183130767]

![这里写图片描述][20160707183140611]

![这里写图片描述][20160707183150268]

注意：overflow只是万千方法中的一个

### 3.2.3两栏自适应布局 ###

![这里写图片描述][20160707183550789]

![这里写图片描述][20160707183559602]

![这里写图片描述][20160707183608649]

![这里写图片描述][20160707183617102]

![这里写图片描述][20160707183627009]

为什么会这么表现？？？？？？？

![这里写图片描述][20160707184001826]

![这里写图片描述][20160707184117143]

![这里写图片描述][20160707184159378]

![这里写图片描述][20160707184310158]

![这里写图片描述][20160707184434832]

![这里写图片描述][20160707184444723]

![这里写图片描述][20160707184925100]

![这里写图片描述][20160707184952449]

![这里写图片描述][20160707185345055]

疑问：  
是不是所有BFC属性都有如此表现？  
回答：YES。但是由于自身特性，具体表现不一：

*  overflow:hidden;自适应，但“溢出不可见”限制应用场景
 *  float+float 包裹性+破坏性，无法自适应，块状浮动布局
 *  position:absolute 脱离文档流，自娱自乐
 *  display:inline-block 包裹性，无法自适应；IE6/IE7 block水平不相识
 *  display:table-cell 包裹性，单天生无一处特性，绝对宽度也能自适应。

跟清楚浮动影响类似：  
.cell\{overflow:hidden;display:inline-block;\}

然而，副作用明显，无法广泛应用~~于是，广为流传的事：

.cell{
        display:table-cell;width:2000px;//IE8+ BFC特性
        display:inline-block;width:auto;//IE7- 伪BFC特性
    }

# 第4章 overflow与绝对定位 #

## 4.1overflow:hidden失效 ##

![这里写图片描述][20160708110914592]

![这里写图片描述][20160708110926545]

## 4.2overflow滚动失效 ##

![这里写图片描述][20160708111105978]

![这里写图片描述][20160708111116260]

失效原因：  
绝对定位元素不总是被父级overflow属性裁剪，尤其当overflow在绝对定位元素及其包含块之间的时候

包含块指：含有position:relative/absolute/fixed声明的父级元素，没有则body元素。

如何避免失效？  
1.overflow元素自身为包含块；  
![这里写图片描述][20160708112634750]  
2.子元素为包含块  
![这里写图片描述][20160708112723788]  
3.任何合法transform声明当做包含块（新）  
![这里写图片描述][20160708112926960]

## 第5章依赖overflow的样式表现 ##

## 5.1resize拉伸 ##

按钮拉伸，overflow:hidden;  
文本域默认可拉伸，因为overflow:auto

## 5.2ellipsis文字溢出点点点省略 ##

white-space:nowrap;  
text-overflow:ellipsis;  
overflow:hidden;

[20160707170519211]: /images/20220721/83ba8ada756e4d77849e2ffca2be37c2.png
[20160707171851890]: /images/20220721/bbc12d7aece141c381489960c893a13e.png
[20160707172431830]: /images/20220721/003d7d87ebda44ed91652b6dce3febd3.png
[20160707173114902]: /images/20220721/77cd436198d946dabc0d6e3915d95561.png
[20160707174802339]: /images/20220721/143b056ef7224d5abd041b61a4fab2ec.png
[20160707175017945]: /images/20220721/7b83703de87847228b0a02cd1e40e051.png
[20160707180101038]: /images/20220721/3d90f52903934b7289f7c7d57b89105e.png
[20160707180115470]: /images/20220721/902b6f4c991d42828d45eb20e1205312.png
[20160707180726015]: /images/20220721/6c1b0244820b4c3c8a8f99697d308932.png
[20160707181709405]: /images/20220721/118bcda7f63d4a8db369fd8779e5188e.png
[20160707181946837]: /images/20220721/1e38ab0c82a1426fb3a993a98cb1916a.png
[20160707182000174]: /images/20220721/589b7b96bf48449ca5aa8ff594942054.png
[20160707182011525]: /images/20220721/b0eec838b9144c0993d0d83877e7ab3b.png
[20160707182021737]: /images/20220721/206cf46b01f24c44baf72adfecd73564.png
[20160707182239990]: /images/20220721/8778d403afeb47bfa9496fcfefbff513.png
[20160707183121720]: /images/20220721/279e7c89a0c74141b829740cdc3dbfc5.png
[20160707183130767]: /images/20220721/d485ed1a19fb455eaadbf05410c36f7d.png
[20160707183140611]: /images/20220721/7cc8340fe6134e28b4b2ea2a24ac5c00.png
[20160707183150268]: /images/20220721/d1f678e2bbf3493b83e769a5697d3402.png
[20160707183550789]: /images/20220721/317a1ad71e734ffba566ffe53cf0ed2f.png
[20160707183559602]: /images/20220721/9113aaabeecf4f04a0c2f138d57febd4.png
[20160707183608649]: /images/20220721/84b9ee46962d4a229ac4fb694aeaae22.png
[20160707183617102]: /images/20220721/7f03550aa2a1431a874bfdf4c1956cf0.png
[20160707183627009]: /images/20220721/9613c7d8a8c7448184e044ece52ffa52.png
[20160707184001826]: /images/20220721/f1abb421c0f5498da957aa831c09852c.png
[20160707184117143]: /images/20220721/fac337532ae44a81917d46c5e50e6932.png
[20160707184159378]: /images/20220721/2914acf647a74f9791403db67fc257e2.png
[20160707184310158]: /images/20220721/9617a45ca86b418e8c4750bcee842deb.png
[20160707184434832]: /images/20220721/66f2fc42c3c341d8a3c66105d7ef9e17.png
[20160707184444723]: /images/20220721/37a37e8c3ed54291b973d94d3cbe7b94.png
[20160707184925100]: /images/20220721/7c93512e42a9435d93c410e754b1bae1.png
[20160707184952449]: /images/20220721/623cc078b6ed449ba6cc1ffa3b6e98e0.png
[20160707185345055]: /images/20220721/267be9db4a7a4dd2a0b0a585330ecd86.png
[20160708110914592]: /images/20220721/80a2d549aa28434a82c909df6889a644.png
[20160708110926545]: /images/20220721/80cd1c6fe3634eb9a69b065ef187a066.png
[20160708111105978]: /images/20220721/12503c24f2cc492eaf6aace424172355.png
[20160708111116260]: /images/20220721/3fe442c10acf41b88342a455966cf688.png
[20160708112634750]: /images/20220721/20868d88ece0470b8fee60e9458482df.png
[20160708112723788]: /images/20220721/6b0b12ac5b9d4a3bb161bd13bc017cda.png
[20160708112926960]: /images/20220721/32bd23a7ceea4f12a2e5f0917ce83aea.png