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’。
631
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
