css之overflow
哪些元素上有效?
首先 overflow
是应用到哪些元素上有效的,任意元素?
当然不是,它只能应用于块容器上。
那什么是块容器呢?
简单来说:除了
table
和可替换(置换)元素之外的块级元素都是块容器元素;
但是反过来说块容器元素一定是块级元素的吗?
当然也是 NO ,这是因为对于非替换的
inline-block
元素和table-cell
元素而言,他们是块容器元素但是却不是块级元素。
作用
overflow
属性指定了一个块容器元素在其内容溢出这个元素的时候,内容是否裁掉。
overflow的值
可以取的值有:
visible
(初始值) hidden
、 scroll
、auto
、inherit
。
下面分别介绍下他们的含义:
-
visible
这个属性表明内容不会被裁剪,所以说他可能超出渲染,也是初始值。
-
hidden
这个属性表明内容超出的部分需要裁剪掉。
-
scroll
这个属性表明超出内容不会裁剪掉,浏览器提供滚动机制来让用户看到超出内容,还有就是不管超出不超出,浏览器的滚动条背景都是要显示的。
-
auto
如果超出的话,应该有滚动条。
-
inherit
继承自他的父级元素(或者祖先元素)。
其他“作用”
overflow
的值为非visible
的时候可以生成新的BFC
(块级格式化上下文),常见的结果就是:消除浮动影响、左侧固定右侧自适应(不需要指定margin-left
)、margin
不再折叠等。overflow:hidden
搭配white-space:nowrap
、text-overflow:ellipsis
实现...
效果。overflow:hidden
可以让1px
(scale(0.5)
这种)显示的更加精细。overflow:hidden
可以解决移动端页面内容(一般文字内容相对多一点的时候效果更明显)会出现“进来左右方向缩小到一块”然后再变为正常布局的 bug ,这个 bug 会引起很明显的闪动效果。
疑问
在某些场景下就会遇到和上边所说的情况不一致的时候,下边来介绍下:
一个页面,什么样式都不设置,但是里边很多内容,此时应该是什么样呢?
首先,初始值是 visible
没错,也就是说所有元素的 overflow
的值都是 visible
的,也就是说没有元素设置 overflow:auto
,但是结果确是浏览器会出现滚动条;这是因为规范规定了在这种情况下浏览器需要表现的像是类似于给 viewport 的根元素设置了 overflow:auto
类似的效果。
overflow-x和 overflow-y混合使用时出现的问题
- 我们在平时解决’坍塌‘,’浮动‘等情况时,会很自然的想到使用
overflow: hidden
;但是将overflow-x
和overflow-y
混合使用时,则会出现一些难以把控的情况,请看代码;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#container {
margin-left: 100px;
padding: 20px 0 0 20px;
width: 100px;
height: 100px;
background-color: pink;
overflow-y: scroll;
overflow-x: visible;
}
.box {
width: 140px;
height: 200px;
background-color: #aaeeff;
}
</style>
</head>
<body>
<div id="container">
<div class="box"></div>
</div>
</body>
<script>
const sOverflowX = getComputedStyle(document.querySelector('#container')).overflowX
console.log(sOverflowX) // auto
</script>
</html>
- 当我们想要在y轴scroll,但是x轴’visible’,结果x轴确实‘auto’;
稍微总结一下
- … some combinations with ‘visible’ are not possible: if one is specified as ‘visible’ and the other is ‘scroll’ or ‘auto’, then ‘visible’ is set to ‘auto’ …。如果其中一个特性值被设置成了 ‘scroll’ 或 ‘auto’,而另一个特性指定值为
visible
,那么 ‘visible’ 会被设置成auto
。 - 当一个元素的 ‘overflow-x’ 或 ‘overflow-y’ 指定值为 ‘hidden’,另一个特性的指定值为 ‘visible’ 时, 该元素最终渲染使用的 ‘overflow-y’ 或 ‘overflow-x’ 值不同。IE6 IE7 IE8 使用 ‘hidden’,其它浏览器使用 ‘auto’。