[关闭]
@EncyKe 2015-12-09T01:58:46.000000Z 字数 2570 阅读 2993

CSS:溢出特辑

前端 CSS


1. 基本属性

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

overflow-x:水平隐藏,垂直增加滚动条;
overflow-y:垂直隐藏,水平增加滚动条;

使用前提:

2. 滚动条

出现条件:

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

自定义滚动条:

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

3. 与绝对定位和BFC

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

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

常见布局:

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

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

避免失效:

4. 与拉伸和文字省略

resize拉伸元素尺寸:

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

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

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

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

5. 与锚点

锚点定位的触发:

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

添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注