css溢出机制怎么使用
今天小编给大家分享一下css溢出机制怎么使用的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。
创新互联建站主要从事成都网站建设、网站建设、网页设计、企业做网站、公司建网站等业务。立足成都服务离石,10余年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18982081108
溢出
当一个盒子(blockcontainerbox)的内容(子元素、孙子元素等后裔)超过盒子本身的大小的时候,就会出现溢出。这个时候CSS属性overflow决定如何处理溢出。这个css属性大家都知道,在这里不讨论了,在这里指出需要注意的几点:
overflow会影响所在元素的所有内容的裁剪、滚动,但是有一种情况例外:"Itaffectstheclippingofalloftheelement'scontentexceptanydescendantelements(andtheirrespectivecontentanddescendants)whosecontainingblockistheviewportoranancestoroftheelement."也就是说,overflow的所在元素必须是内容元素的直接或间接containingblock,这时overflow属性才会影响这个内容元素。比如
当需要滚动条的时候,滚动条会放在border与padding之间。父元素产生滚动条以后,它产生的containingblock的尺寸会减少,以便给滚动条腾出空间。
在和
上的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是个例外。它虽然不是一个元素,但是也可以拥有滚动条。如果在和
上都没有设置overflow属性而使用默认值visible(大部分场景都是这样),那么,visualviewport的overflow就是auto:当网页中有内容超出visualviewport时,visualviewport上会出现滚动条。的最终overflow永远都是visible。也就是说,元素永远不可能拥有滚动条。
如果你想要为
设置非visible的overflow,需要先为设置一个非visible的值来冒泡,从而的overflow不会被冒泡。小练习
小练习:利用以上原理,使visualviewport和
都拥有横、竖滚动条,总共4个滚动条。不能使用overflow:scroll(这样就太简单了)。步骤:
使visualviewport和
的最终overflow值都为auto,从而可以出现滚动条。触发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溢出机制怎么使用
本文路径:http://pwwzsj.com/article/pcgsgs.html