@EncyKe
2015-12-09T01:58:46.000000Z
字数 2570
阅读 3455
前端
CSS
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>
趋于一样的宽度;
出现条件:
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
缺失;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;
对IE 7+等,触发BFC:overflow:hidden/scroll/auto;
,即overflow:visible;
会使父级元素塌陷;
.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
声明当做包含块; 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>
锚点定位的触发:
<a>
或表单元素)处于focus状态;应用:可实现纯HTML及CSS选项卡:
1. 将选项卡内容区div 1-4
全部装入到一个div.box{overflow:hidden;}
中;
2. 最外层div.box
的宽高为单个选项卡(如div1
)宽高;
不足:穿透性太强;只能适合单页应用;