探索CSS溢出机制

为什么要深入研究CSS溢出机制？在实际的开发过程中，经常会看到内容溢出的情况。如果不深入理解这个机制，你会经常遇到这样的问题：为什么这个元素不受祖先元素的overflow:hidden的影响？这里出现的滚动条是什么元素？如何去掉这个滚动条？如何在指定元素上添加滚动功能？在本文中，我们将从CSS标准出发，讨论CSS溢出机制的细节。当一个盒子（块容器盒子）的内容（孩子、孙子等后代）超过盒子本身的大小时，就会发生溢出。这个时候CSS属性overflow决定了如何处理overflow。这个css属性大家都知道，这里就不展开讨论了。这里有一些需要注意的地方：溢出会影响元素所有内容的裁剪和滚动，但有一个例外：“它会影响除任何后代元素（及其各自的内容和后代）之外的所有元素内容的裁剪其包含块是视口或元素的祖先。”也就是说overflow所在的元素一定是content元素的直接或间接包含块，那么overflow属性就会影响到content元素。比如，一般来说B的溢出会影响C，但是如果C是相对视口或者A定位的（比如使用position:absolute)，则C的显示不会受到B的裁剪和滚动的影响。当需要滚动条时，滚动条会放在border和padding之间。父元素生成滚动条后，它生成的包含块的大小会减小，以便为滚动条腾出空间。CSS3文档：“当视口小于渲染文档的画布区域时，用户代理可能会提供滚动机制。”也就是说，视觉视口可以有滚动条。和上的溢出属性冒泡：“UA必须将根元素上设置的‘溢出’属性应用到视口。当根元素是HTML“HTML”元素或XHTML“html”元素时，并且该元素有一个HTML“BODY”元素或一个XHTML“body”元素作为子元素，如果根元素的值为“可见”。用于视口的“可见”值必须解释为“自动”。从中传播值的元素必须具有“可见”的“溢出”使用值。means:theoverflowattributeofviewportisstolenfromorelement:如果的溢出不是'visible'（默认值），它是从偷来的；否则，它是从中偷来的。如果视口窃取的溢出是“可见的”，则将其视为“自动”（因为不可能在视口之外显示内容）。被盗元素的溢出设置为“可见”。可以推导出：一般来说，只有元素才能有滚动条（更准确地说，只有生成块状容器框的元素才能有滚动条）。但视觉视口是个例外。虽然不是元素，但也可以有滚动条。如果和都没有设置overflow属性，并且使用默认值visible（大多数场景都是这种情况），那么视觉视口的溢出是auto：当web中有内容时超出视觉视口的页面，视觉视口会出现滚动条。关于viewport的讨论在【ResponsiveLayout】initialcontainingblock，viewport和相关维度。的最终溢出总是可见的。也就是说，元素永远不能有滚动条。如果要给设置一个不可见的溢出，需要给设置一个不可见的值为bubble，这样的溢出就不会冒泡了。小练习小练习：利用上面的原理，让visualviewport和都有水平和垂直滚动条，一共4条滚动条。您不能使用overflow:scroll（这太简单了）。步骤：将visualviewport和的最终溢出值都设为auto，这样才能出现滚动条。触发视觉视口和的溢出。通过[为内容设置更大的尺寸]来做到这一点。代码+注释：