摘要：为什么需要深入学习溢出机制在实际开发的过程中，内容溢出是经常见到的。溢出当一个盒子的内容子元素孙子元素等后裔超过盒子本身的大小的时候，就会出现溢出。这个时候属性决定如何处理溢出。
为什么需要深入学习CSS溢出机制？
在实际开发的过程中，内容溢出是经常见到的。如果不深入了解这个机制，你经常会碰到这样的问题：为什么这个元素没有受到祖先元素的overflow:hidden的影响？这里出现的滚动条是哪个元素的？如何消除这个滚动条？如何在指定的元素上增加滚动功能？
在这篇文章，我们将会从CSS标准出发，讨论CSS溢出机制的细节。
当一个盒子（block container box）的内容（子元素、孙子元素等后裔）超过盒子本身的大小的时候，就会出现溢出。这个时候CSS属性overflow决定如何处理溢出。这个css属性大家都知道，在这里不讨论了，在这里指出需要注意的几点：
overflow会影响所在元素的所有内容的裁剪、滚动，但是有一种情况例外："It affects the clipping of all of the element"s content except any descendant elements (and their respective content and descendants) whose containing block is the viewport or an ancestor of the element." 也就是说，overflow的所在元素必须是内容元素的直接或间接containing block，这时overflow属性才会影响这个内容元素。比如
当需要滚动条的时候，滚动条会放在border与padding之间。父元素产生滚动条以后，它产生的containing block的尺寸会减少，以便给滚动条腾出空间。
CSS3文档："When the viewport is smaller than the area of the canvas on which the document is rendered, the user agent may offer a scrolling mechanism." 即，visual viewport可以拥有滚动条。
在和
上的overflow属性存在冒泡现象: "UAs must apply the "overflow" property set on the root element to the viewport. When the root element is an HTML "HTML" element or an XHTML "html" element, and that element has an HTML "BODY" element or an XHTML "body" element as a child, user agents must instead apply the "overflow" property from the first such child element to the viewport, if the value on the root element is "visible". The "visible" value when used for the viewport must be interpreted as "auto". The element from which the value is propagated must have a used value for "overflow" of "visible". "可以推断出：
一般来说只有元素才能拥有滚动条（更准确地说，只有产生block container box的元素才能拥有滚动条）。但visual viewport是个例外。它虽然不是一个元素，但是也可以拥有滚动条。如果在和
上都没有设置overflow属性而使用默认值visible（大部分场景都是这样），那么，visual viewport的overflow就是auto：当网页中有内容超出visual viewport时，visual viewport上会出现滚动条。关于viewport的讨论在【响应式布局】initial containing block、viewport以及相关尺寸。
的最终overflow永远都是visible。也就是说，元素永远不可能拥有滚动条。
如果你想要为
设置非visible的overflow，需要先为设置一个非visible的值来冒泡，从而的overflow不会被冒泡。 小练习小练习：利用以上原理，使visual viewport和
都拥有横、竖滚动条，总共4个滚动条。不能使用overflow: scroll（这样就太简单了）。使visual viewport和
的最终overflow值都为auto，从而可以出现滚动条。触发visual viewport和
的溢出。通过【为内容设置一个更大的尺寸】来做到。代码+注释：
test
结果：
自己在chrome中打开以上代码，能更加清晰地看出是怎么做到的。
也可以通过absolute的方式来溢出initial containing block：
test
结果：
自己在chrome中打开以上代码，能更加清晰地看出是怎么做到的。如何看出某个滚动条是属于哪个元素的？
通过Chrome DevTools就可以看出滚动条的所属元素。
前面已经说过，滚动条的位置在元素的border与padding之间。当你使用Chrome DevTools选中某个元素，发现滚动条恰好在高亮区域（border）内部时，滚动条就属于当前元素。
要判断滚动条是否属于visual viewport，首先先将右边、下边的滚动条分别滚动到最下、最右（这一步很重要，它保证没有内容藏在滚动条下面）。然后，Ctrl+Shift+C选择右边或下边的滚动条，如果高亮的区域不包含这个滚动条，就说明这个滚动条不属于任何元素，也就是属于visual viewport。
https://developer.mozilla.org...
https://developer.mozilla.org...
获取或设置元素的内容被滚动的距离。这两个属性适用于所有Element。
如果想要获取visual viewport的滚动距离，除了这个方法以外，还有更多等效的方法。见【响应式布局】initial containing block、viewport以及相关尺寸。
参考资料css2.1标准。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/116954.html
摘要：影响着其中元素的尺寸和定位。在标准中，元素的称为。当的宽度高度使用百分数的值时，这个百分数的基准就是的尺寸。例子其中就溢出了的区域。造成以上不同的原因是，在桌面端的缩放和在移动端的缩放有不同的性质。这两个数值的单位是设备独立像素。 前言 本篇文章修改、整理自我以前写的一篇文章。 在阅读这篇文章之前，你需要了解设备像素、逻辑像素（设备独立像素）和CSS像素的区别，见我的前一篇文章理解设备...
摘要：但是究竟什么情况才会触发文本溢出，大部分人肯定没有探究过。也不会出问题，但是谁也没想到当时，居然生效了。使用对象截取片段后获取到的对象的才是内容的真正宽度。并不是内容区域的真正宽度也就是说当加是应为成立时才是触发真正的条件。 text-overflow:ellipsis是我们用来设置文本溢出的一个常用属性。 但是究竟什么情况才会触发文本溢出，大部分人肯定没有探究过。我以前也没有注意，反...
摘要：布局学习的主要目的是为了记住各种属性么，最重要的是理解的定位机制与盒子模型。它是一个独立的渲染区域，只有参与，它规定了内部的如何布局，并且与这个区域外部毫不相干。 css布局 学习css的主要目的是为了记住各种属性么？NO，最重要的是理解css的定位机制与盒子模型。 接下来，从布局的角度来学习css的定位机制和盒子模型，学习之前还是先来提几个问题 1.进行css布局前为什么要学习定位...
摘要：关于内联元素之前讨论的多是块级元素，而没有考虑到内联元素的情况。但巧合的是，在普通流定位中，内联元素宽度和高度规则却和块级元素绝对定位差不多，都只受内容大小影响。 我们知道，元素在没有设置宽高的情况下，默认的宽高值都为auto。而这个auto到底是如何让元素自动拥有宽高的呢，也就是说，元素的宽度和高度到底会受到什么因素的影响？本文将通过一个例子来对这一问题一探究竟，HTML结构和初始c...
阅读 3545·2021-11-16 11:45
阅读 2047·2021-11-08 13:23
阅读 2186·2021-10-11 10:59
阅读 2870·2021-09-27 13:36
阅读 2464·2019-08-30 15:54
阅读 2641·2019-08-29 16:58
阅读 2756·2019-08-29 16:56
阅读 1317·2019-08-26 13:52
