Shulou(Shulou.com)06/01 Report--

Today, the editor will share with you the relevant knowledge points about how to use the css spillover mechanism. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article.

Spillover

An overflow occurs when the contents of a blockcontainerbox (child elements, grandchild elements, etc.) exceed the size of the box itself. At this point, the CSS property overflow determines how to handle the overflow. This css attribute is well known, so I won't discuss it here. I'll point out a few points that need to be noted here:

Overflow affects the cropping and scrolling of all the contents of the element, but there is one exception: "Itaffectstheclippingofalloftheelement'scontentexceptanydescendantelements (andtheirrespectivecontentanddescendants) whosecontainingblockistheviewportoranancestoroftheelement." That is, the element of the overflow must be the direct or indirect containingblock of the content element for the overflow attribute to affect the content element. For example, generally speaking, the overflow of B affects C, but if C is positioned relative to viewport or A (such as using position:absolute), then the display of C is not affected by B's cropping and scrolling.

When a scroll bar is needed, it will be placed between border and padding. After the parent element generates a scroll bar, the size of the containingblock it produces is reduced to make room for the scroll bar.

There is bubbling in the overflow attribute on and: "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'."

It can be inferred:

Generally speaking, only elements can have scroll bars (more precisely, only elements that produce blockcontainerbox can have scroll bars). But visualviewport is an exception. Although it is not an element, it can also have a scroll bar. If you do not set the overflow property on and and use the default value of visible (as is the case in most scenarios), the overflow of visualviewport is auto: when there is content in the page that exceeds visualviewport, a scroll bar appears on the visualviewport.

The final overflow will always be visible. That is, an element can never have a scroll bar.

If you want to set a non-visible overflow, you need to set a non-visible value to bubble so that the overflow will not be bubbled.

A little exercise

Small exercise: use the above principles to make visualviewport and both have horizontal and vertical scroll bars, a total of 4 scroll bars. You can't use overflow:scroll (this is too easy).

Steps:

Make the final overflow values of both visualviewport and auto so that scroll bars can appear.

Triggers an overflow of visualviewport and. Do this by [setting a larger size for the content].

Code + comments:

Test

* {

Padding:0

Margin:0

Box-sizing:border-box

}

Html {

/ * make html always the same size as visualviewport (even if you zoom and resize the browser window), so that body can set a size larger than visualviewport (110%).

Width:100%;*/ can be omitted for elements that default to block

Width:100%

Height:100%

/ * non-visible values are bubbled to the visualviewport, so that the visualviewport can appear scroll bars * /

Overflow:auto

Border:15pxsolidred

}

Body {

/ * enable body to appear scroll bar * /

Overflow:auto

/ * body overflowed html, which overflowed initialcontainningblock, and overflowed visualviewport, resulting in scrollbars in visualviewport.

Of course, you can trigger the overflow of visualviewport in many other ways, such as increasing the html element, or getting a position:absolute padded / in body.

Width:110%

Height:110%

Border:15pxsolidgreen

}

Main {

/ * main overflows body, resulting in scrollbars in body * /

Width:110%

Height:110%

Border:15pxsolidblue

}

These are all the contents of the article "how to use the css spillover mechanism". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.