这篇“css溢出机制的简介”除了程序员外大部分人都不太理解，今天小编为了让大家更加理解“css溢出机制的简介”，给大家总结了以下内容，具有一定借鉴价值，内容详细步骤清晰，细节处理妥当，希望大家通过这篇文章有所收获，下面让我们一起来看看具体内容吧。
成都创新互联服务项目包括林芝网站建设、林芝网站制作、林芝网页制作以及林芝网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，林芝网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到林芝省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！
css是什么意思
css是一种用来表现HTML或XML等文件样式的计算机语言，主要是用来设计网页的样式，使网页更加美化。它也是一种定义样式结构如字体、颜色、位置等的语言，并且css样式可以直接存储于HTML网页或者单独的样式单文件中，而样式规则的优先级由css根据这个层次结构决定，从而实现级联效果，发展至今，css不仅能装饰网页，也可以配合各种脚本对于网页进行格式化。
为什么需要深入学习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 blockis the viewport or an ancestorof the element." 也就是说，overflow的所在元素必须是内容元素的直接或间接containing block，这时overflow属性才会影响这个内容元素。比如
当需要滚动条的时候，滚动条会放在border与padding之间。父元素产生滚动条以后，它产生的containing block的尺寸会减少，以便给滚动条腾出空间。
在和
上的overflow属性存在冒泡现象: "UAs must apply the 'overflow' property set on the root elementto the viewport. When the root element is an HTML "HTML" element or an XHTML "html" element, and that element has an HTML "BODY" elementor an XHTML "body" element as a child, user agents must insteadapply 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 viewportmust be interpreted as 'auto'. The element from which the value is propagated must have a used value for 'overflow' of 'visible'. "
可以推断出：
小练习
小练习：利用以上原理，使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。
感谢你的阅读，希望你对“css溢出机制的简介”这一关键问题有了一定的理解，具体使用情况还需要大家自己动手实验使用过才能领会，快去试试吧，如果想阅读更多相关知识点的文章，欢迎关注创新互联行业资讯频道！
网站栏目：css溢出机制的简介
文章来源：
http://cdkjz.cn/article/gscooi.html
