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

Today, the editor will share with you the relevant knowledge about what the endless cycle in CSS is. It is detailed and logical. I believe most people still know too much about it, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.

First, start with the answer why height:100% is invalid.

As we all know, if the element does not have a formatted height value, the height percentage height of the child element does not work. It is common that height:100% is invalid, but the width does not have this problem. Therefore, a question often asked by newcomers is: "Why does my div set height:100% but does not have an effect?"

I don't know if you have ever thought about such a question.

Then, a peer came up with a seemingly reasonable explanation, that is, "if the parent element height:auto and no other formatting height, the child element supports height:100%, is likely to have a high degree of endless loop."

What do you mean?

For example, in an element, there is an image whose vertical-align is bottom and the height is 192 pixels. In this case, the height is 192 pixels. Suppose a child element is inserted and the height is set to 100%. If the height:100% can be calculated at this time, the child elements should also be 192 pixels. But, ah, our parent element height value is auto, isn't it now that the height of the child element of height:100% will become 384 pixels, and the height of the parent element will double again? It's an endless cycle!

In fact, this explanation is wrong, and we must not be misled.

The evidence is that there is a similar scenario for the width, but there is no endless loop. For example, in the following example, the parent element takes the maximum width, and then there is an inline-block child element with a width of 100%:

The red background is the parent .box {display: inline-block; white-space: nowrap; background-color: # cd0000;}. Text {display: inline-block; width: 100%; background-color: # 34538b; color: # fff;}

If you follow the explanation of the "high dead loop" above, there should also be a "width dead loop" here, because the subsequent inline-block element should make the width of the parent element further larger as we understand it. But, in fact, no, the width range may exceed your expectations:

The width of the parent element is the sum of the width of the picture plus text.

Seeing is believing, you can click here: there is no demo in the width dead loop.

Second, why there is not an endless cycle

This requires an understanding of the basics of browser rendering. First, download the document content, load the style resources for the header (if any), and then render the DOM content in top-down, outside-in order. To apply this example, there is an order in which the parent elements are rendered first, and then the child elements are rendered. Therefore, when rendering to the parent element, the width:100% of the child element is not rendered, so the width is the width of the image plus text content. When rendering to the child element of text, the width of the parent element is fixed, and the width:100% is the width of the parent element that has been fixed. What if the width is not enough? Overflow is fine, and the overflow attribute is created for this purpose.

By the same token, if height supports 100% of any element, there will be no endless loop, similar to the width, static rendering, once in place.

This leads to another question, the parent selector. Have you ever wondered what would happen if CSS supported the parent selector?

One of the consequences is that the original rendering is destroyed, and the child element can affect the rendering of the parent element, so, the "endless cycle" begins, page rendering will appear a variety of endless cycles, many existing CSS rules will be subverted, infinite width repeated rendering and other problems will arise. This is why the parent selector is so loud, but it is slow to support it.

In fact, in CSS, there are many examples of non-endless cycles, let me give you another very interesting one!

Third, CSS padding percentage, scroll bar and "endless loop"

If the padding attribute value of CSS is a percentage value, it is calculated relative to the width both horizontally and vertically, which buries a hidden danger that seems to be an "endless loop". Let's just look at an example.

A div has the following CSS:

.box {width: 200px; height: 199px; overflow: auto;}. Child {padding: 50%;}

Container width 200px high 199px, child element padding:50%, at this time, the width and height of the child element should all be 200px, but if the height is 200px, the parent element will appear scroll bar, because the parent element height 199px is not enough 200px, but if the parent element appears scroll bar, the width of the parent element content box will be subtracted by the width of the scroll bar. For example, the width of the parent element is 17 pixels under window 7. At this time, the natural width and height of the child element should also be reduced, which should be 183px, but After changing to 183px, the height is smaller than the 199px of the parent element, the scroll bar disappears, and the width of the child element returns to 200px, so a seemingly endless cycle begins.

However, in fact, the final rendering is one-time, and if the parent and child elements are given a background color respectively, the result is as follows:

You can see the "magic" scene shown above, that is, the width of the padding:50% element is not the content box width of the parent element.

As a result, the width of the parent element is the same as the original 200px, but the child element is 183px, with seemingly incomprehensible spaces on the right and below.

Seeing is believing, you can click here: CSS padding percentage value "endless cycle" does not exist demo

This is the effect of a rendering mechanism of CSS.

This example also further proves that in CSS, if it is purely static rendering, there is no such thing as an endless loop!

For example, we CSS: hover an element, let it go away from the mouse, according to reason, far away, should not be executed: hover rendering to return to the original place, in fact, far away, will not continue to perform rendering.

IV. Infinite Loop in CSS

In fact, there are keywords related to "endless loop" in CSS, called infinite, Infiniti, infinite meaning, which appears in CSS3 animation and can make animation loop infinitely, but "infinite loop" is not the same as "endless loop".

These are all the contents of the article "what is the endless cycle in CSS?" 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.