@EncyKe 2015-12-09T01:58:46.000000Z 字数 2570 阅读 3108

CSS：溢出特辑

前端 CSS

CSS：溢出特辑

1. 基本属性

visible(默认)：超出部分仍显示；IE 6将显示，但会自动撑开父级盒子；
hidden：超出部分被隐藏(不是剪裁)；
scroll：下方和右方出现滚动条；
auto：不常用，可能出现滚动条；
inherit：不常用，IE 8+才适用；

overflow-x：水平隐藏，垂直增加滚动条；
overflow-y：垂直隐藏，水平增加滚动条；

overflow-x与overflow-y值相同，则等同于overflow；
overflow-x与overflow-y值不同，且其中一个为visible，而另外一个为hidden/scroll/auto，则visible会被重置为auto；

使用前提：

非display:inline;；
含尺寸：width, height, max-width, max-height, absolute；
对于td，需对table设置table-layout:fixed;；
IE 7下，<button>中的文字越多，两端padding留白也越多，增加overflow:visible可以减少这一留白，使<button>趋于一样的宽度；

2. 滚动条

出现条件：

属性设置：overflow: auto/scroll;；
元素本身：<html>, <textarea>；
内容溢出；
无论什么浏览器，默认滚动条均来源于<html>，而非<body>；<body>默认与<html>有0.5em的两端margin值，约8px；故，想要去除页面默认滚动条，只需html{overflow:hidden;}
获取滚动高度：
var st = document.documentElement.scrollTop/*for others*/ || document.body.scrollTop/*for Chrome only*/;
overflow致使padding-bottom缺失现象：除chrome以外，其他浏览器在出现滚动条时会有padding-bottom缺失；
一般而言，IE 7+/Chrome/FF的滚动条均宽17px；
overflow:auto;布局会有潜在隐患；

增加滚动条后水平居中跳动：
静态修复：html{overflow-y:scroll;}
动态修复：.container{padding-left:calc(100vw-100%);}100vw为浏览器宽度(IE 9+)；

自定义滚动条：

/*整体部分*/::-webkit-scrollbar{}
/*滚动滑块*/::-webkit-scrollbar-thumb{}
/*外层轨道*/::-webkit-scrollbar-track{}
/*内层轨道*/::-webkit-scrollbar-track-price{}
/*两端按钮*/::-webkit-scrollbar-button{}
/*边角*/::-webkit-scrollbar-corner{}
/*iOS原生滚动回调效果*/-webkit-overflow-scroll:touch;

3. 与绝对定位和BFC

对IE 7+等，触发BFC：overflow:hidden/scroll/auto;，即overflow:visible;会使父级元素塌陷；

清除浮动效果；
避免margin穿透问题；
两栏自适应布局；

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

常见布局：

overflow:hidden;：自适应，但有溢出不可见限制；
float+float：包裹性+破坏性；
position:absolute;：脱离文档流；
display:inline-block;：包裹性，无法自适应，IE 7-不支持；
display:table-cell;：包裹性，且天生无溢出，绝对宽度自适应；

绝对定位下失效：
与position:absolute;关系：绝对定位将使overflow失效(尤其是隐藏和滚动)；

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

避免失效：

overflow元素自身为包含块；
overflow元素的子元素为包含块；
任意合法transform声明当做包含块；
(IE9+ / FireFox
Chrome/Safari(win)/Opera
动态渲染异常：Chrome包含块重定位 /Opera 同，但点击重绘自修正 / Safari 非定位 overflow 元素左上角)

4. 与拉伸和文字省略

resize拉伸元素尺寸：

resize：both：水平垂直两边拉伸
resize：horizontal：只有水平方向拉伸
resize：vertical：只有垂直方向拉伸
拉伸起作用的前提是除overflow:visible;以外的overflow；

示例：可以拉伸的按钮
<button style="resize:both;overflow:hidden;">我是按钮</button>

文本域自带overflow：auto所以自带resize属性；
resize拖拽区域的大小17px×17px 也就是滚动条的尺寸；

ellipsis文字溢出省略：
text-overflow:ellipsis;
示例：

<button style="width:200px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;">我是一个按钮，宽度仅200像素</button>

5. 与锚点

锚点定位的触发：

url中的锚链和锚点；
可focus的锚点(如<a>或表单元素)处于focus状态；

应用：可实现纯HTML及CSS选项卡：
1. 将选项卡内容区div 1-4全部装入到一个div.box{overflow:hidden;}中；
2. 最外层div.box的宽高为单个选项卡(如div1)宽高；
不足：穿透性太强；只能适合单页应用；