css溢出机制怎么使用

今天小编给大家分享一下css溢出机制怎么使用的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。
溢出
当一个盒子（blockcontainerbox）的内容（子元素、孙子元素等后裔）超过盒子本身的大小的时候，就会出现溢出。这个时候CSS属性overflow决定如何处理溢出。这个css属性大家都知道，在这里不讨论了，在这里指出需要注意的几点：
overflow会影响所在元素的所有内容的裁剪、滚动，但是有一种情况例外：”Itaffectstheclippingofalloftheeleme免费云主机、域名nt’scontentexceptanydescendantelements(andtheirrespectivecontentanddescendants)whosecontainingblockistheviewportoranancestoroftheelement.”也就是说，overflow的所在元素必须是内容元素的直接或间接containingblock，这时overflow属性才会影响这个内容元素。比如，一般来说，B的overflow会影响C，但是如果C是相对于viewport或者A定位的（比如使用了position:absolute），那么C的显示就不受B的裁剪、滚动的影响。
当需要滚动条的时候，滚动条会放在border与padding之间。父元素产生滚动条以后，它产生的containingblock的尺寸会减少，以便给滚动条腾出空间。
在和
可以推断出：
一般来说只有元素才能拥有滚动条（更准确地说，只有产生blockcontainerbox的元素才能拥有滚动条）。但visualviewport是个例外。它虽然不是一个元素，但是也可以拥有滚动条。如果在和
的最终overflow永远都是visible。也就是说，元素永远不可能拥有滚动条。
如果你想要为
小练习
小练习：利用以上原理，使visualviewport和
步骤：
使visualviewport和
触发visualviewport和
代码+注释：

*{
padding:0;
margin:0;
box-sizing:border-box;
}
html{
/*使html的尺寸始终与visualviewport相同（即使你缩放、调整浏览器窗口的大小），从而body可以设置一个比visualviewport还大的尺寸(110%)。
对于默认为block的元素可以省略width:100%;*/
width:100%;
height:100%;
/*非visible的值冒泡到visualviewport上，使visualviewport可以出现滚动条*/
overflow:auto;
border:15pxsolidred;
}
body{
/*使得body可以出现滚动条*/
overflow:auto;
/*body溢出html，从而溢出initialcontainningblock，从而溢出visualviewport，使得visualviewport出现滚动条。
当然，你也可以通过很多其他的方式来触发visualviewport的溢出，比如增大html元素，或者在body中弄一个position:absolute的p*/
width:110%;
height:110%;
border:15pxsolidgreen;
}
main{
/*main溢出body，使得body出现滚动条*/
width:110%;
height:110%;
border:15pxsolidblue;
}

以上就是“css溢出机制怎么使用”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注云技术行业资讯频道。

相关推荐: css能不能用像素单位

本文小编为大家详细介绍“css能不能用像素单位”，内容详细，步骤清晰，细节处理妥当，希望这篇“css能不能用像素单位”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。 css中能用像素单位；像素单位指的是相对于显示器屏幕分辨率而言的单位…