滚动条之 overflow
作者: dkvirus 发表于: 2018-07-05 14:40:59 最近更新: 2018-08-01 22:06:14

overflow 主要处理 滚动条。除此之外,还有一些神奇的功能,可以处理 文字省略号裁剪消除浮动解除坍塌

一、overflow 与滚动条

1. visilbe 和 hidden

div 是块级元素,默认宽度占一行,高度自适应。给它设置个宽度和高度,当 div 内容很多很多超出这个宽度和高度时,默认就会显示在 div 的外部。

overflow: visible; 就是不做任何处理,让多出的内容在 div 外部显示,这是 div 的默认设置;

如果不想要多出的内容在 div 外部显示,设置 overflow: hidden; 属性,该属性就像一把剪子,把超出 div 范围的内容全部裁减掉。

overflow图1

2. scroll 和 auto

overflow: scroll; 无论 div 的内容是否超出 div 的范围,都给 div 设置水平滚动条和垂直滚动条。这通常不是我们想要的,莫名其妙多两个滚动条显得很丑。

overflow: auto; 当 div 内容很少没有超出 div 范围时不显示滚动条,此时跟普通的 div 没有任何区别;只有当内容很多超多 div 范围才会显示滚动条。

overflow图2

3. overflow-x 和 overflow-y

overflow-xoverflow-y 是 css3 新增属性。有时候只想要设置一条滚动条时,使用该属性及其方便。

overflow-x: hidden 设置水平滚动条隐藏,垂直滚动条 auto。

overflow-y: hidden 设置垂直滚动条隐藏,水平滚动条 auto。下右图没有出现滚动条原因是:垂直滚动条隐藏,div 内文字默认是换行的,这样永远不会超出 div 的宽度,水平滚动条因此也不会显示。

overflow图3

4. 水平滚动

在上面的例子中会发现都是垂直滚动条,水平滚动条即便显示了,也无法滑动。这是因为 div 内文字默认是换行的,想要滑动水平滚动条,第一件要做的事就是设置 div 内部不换行,让所有内容都在一行显示,这样才能让内容超出 div 的宽度进而可以滑动水平滚动条。

1
2
overflow: auto;
white-space: nowrap;

overflow图4

5. 自定义滚动条样式

css 提供一些属性可以让用户自定义滚动条样式,在使用这些属性之前,先了解下滚动条的组成部分。

overflow图5

滚动条样式存在浏览器兼容问题,我使用的是谷歌浏览器,所以前面都加上了 ::-webkit- 前缀。

1
2
3
4
5
6
7
8
9
10
11
12
13
/* 滚动条宽度 */
::-webkit-scrollbar{
width: 8px;
}
/* 滑动滑块 */
::-webkit-scrollbar-thumb{
background-color:rgba(0,0,0,.3);
border-radius: 6px;
}
/* 滚动条轨道 */
::-webkit-scrollbar-track{
background-color:#ddd;
}

简单设置了几个滚动条属性,效果见下图。相对于原始的滚动条,是不是更加小清新了~

overflow图6

二、overflow 之 hidden 属性详解

1. 文字省略号

有时想让 div 内的文字在一行显示,多出的内容用省略号表示,在接触 css 之前我是用 js 实现的,先截取指定长度字符串,再拼接字符串与省略号。后来发现 css 竟然可以原生样式支持,很 nice~

1.1 单行文本省略号

overflow图7

1
2
3
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

分析下上面三句代码:white-space: nowrap; 让 div 内的文字不换行,全在一行显示,此时多出的文字就会在 div 外部显示;overflow: hidden; 截取超出 div 范围的内容,只显示 div 内部的内容;text-overflow: ellipsis; 将被隐藏的那部分用省略号代替。

1.2 多行文本省略号

上面介绍的是 单行文本省略号 写法,多行文本省略号写法如下:

1
2
3
4
display: -webkit-box;    
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
  • -webkit-line-clamp 限制在一个块元素显示的文本的行数。为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:
  • display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
  • -webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。

2. 裁剪

div 是块级元素,默认宽度占一行,高度自适应。如果父div内包一个子 div,父 div 的高度就由子 div 的高度决定。

但这并不是说不能给父 div 的高度设置固定值。如果父 div 设置高度固定值小于子 div 设置高度的固定值,子 div 就会超出父 div 的范围,如下左图;此时要想父 div 仍全部包裹子 div,给父 div 添加 overflow: hidden; 裁剪多余部分,见下右图。

overflow图8

3. 消除浮动

在做导航条的时候经常需要将 li 在一行显示,这时会对 li 设置 float: left 排列在一行(li 本身是块级元素,宽度自占一行),但是这时候会发现 li 的父元素 ul 的高度变成了 0(ul 也是块级元素,它的高度由内部 li 的高度撑起来,也就是默认 ul 的高度等于 li 的高度)。

造成这种情形的原因是:float: left 给 li 设置了浮动效果,脱离了文档流的范畴。可以想象成设置了 float: left 的 li 元素和原来的 ul 元素不在同一个图层了。

overflow图9

介绍几种消除浮动的做法。

  • 给 ul 元素设置 overflow: hidden; 属性可以消除浮动;
  • 给 ul 元素设置 display: inline-block; 属性可以消除浮动;
  • 给 ul 元素设置 float: left; 属性可以消除浮动。

4. 解除坍塌

overflow图10

左图:父 div 包含子 div。父 div 颜色是红色,子 div 颜色是蓝色。

现在想要做的效果:让子 div 距离父 div 顶部 50px 的距离,见上 右图

要做到这个效果,第一个想到的就是给子 div 设置 margin-top: 50px; 属性,但是结果并非我们所期待的那样,见 中间图,这种效果就叫做父 div 坍塌。明明是给子 div 设置的 margin-top 属性,可以页面效果确是父 div 往下移动了 50px。

如果解决这个异常效果??介绍几种解除坍塌的做法。

  • 给父 div 元素设置 overflow: hidden; 属性可以解除坍塌;
  • 给父 div 元素设置 display: inline-block; 属性可以解除坍塌;
  • 给父 div 元素设置 float: left; 属性可以解除坍塌。
首页
友链
归档
dkvirus
动态
RSS