今天小编给大家分享一下CSS溢出机制怎么使用的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。
今天小编给大家分享一下CSS溢出机制怎么使用的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。
溢出
当一个盒子（blockcontainerbox）的内容（子元素、孙子元素等后裔）超过盒子本身的大小的时候，就会出现溢出。这个时候CSS属性overflow决定如何处理溢出。这个css属性大家都知道，在这里不讨论了，在这里指出需要注意的几点：
overflow会影响所在元素的所有内容的裁剪、滚动，但是有一种情况例外："ItaffectstheclippinGofalloftheelement'scontentexceptanydescendantelements(andtheirrespectivecontentanddescendants)whosecontainingblockistheviewportoranancestoroftheelement."也就是说，overflow的所在元素必须是内容元素的直接或间接containingblock，这时overflow属性才会影响这个内容元素。比如<B><C><C/><B/>，一般来说，B的overflow会影响C，但是如果C是相对于viewport或者A定位的（比如使用了position:absolute），那么C的显示就不受B的裁剪、滚动的影响。
当需要滚动条的时候，滚动条会放在border与padding之间。父元素产生滚动条以后，它产生的containingblock的尺寸会减少，以便给滚动条腾出空间。
在<html>和<body>上的overflow属性存在冒泡现象:"UAsmustapplythe'overflow'propertysetontherootelementtotheviewport.WhentherootelementisanHTML"HTML"elementoranXHTML"html"element,andthatelementhasanHTML"BODY"elementoranXHTML"body"elementasachild,useragentsmustinsteadapplythe'overflow'propertyfromthefirstsuchchildelementtotheviewport,ifthevalueontherootelementis'visible'.The'visible'valuewhenusedfortheviewportmustbeinterpretedas'auto'.Theelementfromwhichthevalueispropagatedmusthaveausedvaluefor'overflow'of'visible'."
可以推断出：
一般来说只有元素才能拥有滚动条（更准确地说，只有产生blockcontainerbox的元素才能拥有滚动条）。但visualviewport是个例外。它虽然不是一个元素，但是也可以拥有滚动条。如果在<html>和<body>上都没有设置overflow属性而使用默认值visible（大部分场景都是这样），那么，visualviewport的overflow就是auto：当网页中有内容超出visualviewport时，visualviewport上会出现滚动条。
<html>的最终overflow永远都是visible。也就是说，<html>元素永远不可能拥有滚动条。
如果你想要为<body>设置非visible的overflow，需要先为<html>设置一个非visible的值来冒泡，从而<body>的overflow不会被冒泡。
小练习
小练习：利用以上原理，使visualviewport和<body>都拥有横、竖滚动条，总共4个滚动条。不能使用overflow:scroll（这样就太简单了）。
步骤：
使visualviewport和<body>的最终overflow值都为auto，从而可以出现滚动条。
触发visualviewport和<body>的溢出。通过【为内容设置一个更大的尺寸】来做到。
代码+注释：
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width,initial-scale=1,user-Scalable=no">
<title>test</title>
<style>
*{
padding:0;
margin:0;
box-sizing:border-box;
}
html{
width:100%;
height:100%;
overflow:auto;
border:15pxsolidred;
}
body{
overflow:auto;
width:110%;
height:110%;
border:15pxsolidgreen;
}
main{
width:110%;
height:110%;
border:15pxsolidblue;
}
</style>
</head>
<body>
<main>
</main>
</body>
</html>
以上就是“css溢出机制怎么使用”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注编程网node.js频道。
--结束END--
本文标题: css溢出机制怎么使用
本文链接: https://www.lsjlt.com/news/93134.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0