CSS skillfully uses the percent value of the margin/padding to achieve a high degree of self-adaptation (more for placeholder, to avoid flicker)

A basic but easily confusing CSS point of knowledge

This article relies on a basic but easy to confuse CSS knowledge Point: When the margin/padding take 百分比 the form of the value, whether it is left/right, or top/bottom , are for reference 父元素的width !

Highly adaptive placeholder

Suppose there is such a scenario:

As shown, there is a container for the picture, the picture is square (in order to facilitate the use of squares, in fact, as long as the fixed length-width ratio). In the PC-side good, the container's width and height are written to die how many px, so that even if the picture can not be loaded out of the container will not be variant. But on the mobile side, because the resolution of the various models is too large, write dead px is absolutely impossible, after all, by percent to achieve adaptive:

1. The width of the container is set to 50%, so that a row of two containers, each occupying a screen width of half, no problem.

2. The width of the picture is set to 100% to take the width of the container, no problem.

3. Container height can not be set ah, because the container width of the reference is not the same, and the demand is the height and width of the same, so can not be achieved by setting a percentage for the height of the container, it only depends on the content of the height of the open.

4. The height of the container is the height of the picture, if the picture is a square, then the height of the picture and the width of the picture, which is consistent with the width of the container, it seems no problem, right? In fact, before the browser load the picture, the height of the picture is zero, there is no way to open the container, as shown in:

This way, even if the picture is loaded quickly, the container in the picture before and after the loading will have a variant of the process, which is commonly known as "flashing", and if the picture can not be loaded, the overall layout is even more ugly. Now the problem has come out, is how to do not rely on the picture itself can be the height of the container open.

set the padding-bottom/top of a container

The key to solving an adaptive height using the percent value of margin/padding is that the percent reference of the container margin/padding is the width of the parent element, and the percentage of the width of the container is the width of the parent element, which is consistent with the two attributes. It is easy to unify the values of the two properties. The optimization scenario is this: set the Padding-top/padding-bottom value (in percent) to the container that matches the width.

  #container  {width:  50%; //the width of the parent element is half background-color: red; Span class= "Hljs-rule" >//only for easy demonstration}.placeholder {padding-top:  50%; Span class= "Hljs-rule" >//with width:  50%; The value of  

<div id="container" class="placeholder"></div>

As a result, the visual effect of the container is as follows:

The container's box model is as follows:

As can be seen from the box model, although the container content height is 0, but because of the content width consistent with the padding, so the overall visual effect seems to be open. This scenario browser compatibility is very good, the only drawback is that the container cannot be set max-height properties, because max-height only the content height can be limited, but not limit padding (I thought the settings box-sizing: border-box; can let max-height the limit padding, but the test is invalid, Clear friend trouble tell the reason).

set margin/padding open container for child elements/pseudo elements

From the above scheme to see the reason for the failure is that the height of the max-height container is padding, and the content height of 0, max-height can not function. The only way to optimize this is to use the content height to open up rather than padding, which is very similar to the scheme used to eliminate floats: add a child element/pseudo element to the container, and set the margin/padding of the element/pseudo element to 100%, The actual height corresponds to the width of the container, so that the height of the container can be held to the same width. Because the addition of child elements is inconsistent with HTML semantics, it is more recommended to use pseudo-elements (: After) to implement this scenario.

#container{Width  50%; position: relative; background-color: red; overflow: hidden; //need to trigger BFC eliminate margin folding problem}.placeholder: after {content: display: block; margin-top:  100%; //margin percent relative to parent element width calculation}        

<div id="container" class="placeholder"></div>

At this point the visual effect is no different from the previous one, focusing on the box model of the container at this time:

As you can see, the contents of the container are at the same height as the content width, and my mother never has to worry about my inability max-height to limit the height of the container.
In addition, the use of margin will need to consider the problem of margin folding (reference), padding no such annoyance.

How to add content inside a container

The above scheme only mentions how to open containers without relying on container content, so how do you add content (Pictures, text, etc.) to a container after you open it?
The simple answer is to use position: absolute; :

#container{Width 50%;PositionRelativeBackground-color:RedOverflow hidden; //need to trigger BFC eliminate margin folding problem}.placeholder: after {content: display: block; margin-top:  100%; //margin percent relative to parent element width calculation} img {position:  absolute; top: 0; width:  100%;               /span>          

<div id="container" class="placeholder"> <img src="http://img.arrayhuang.cn/product/miya-1060079/multiple/[email protected]_415w_415h_1c_0i_1o_1x.jpg" /></div>

The effect is as follows:

Post-RepairHow does a wide and high-consistency adaptation work?

Some friends may ask, the above mentioned is the width and height of the same situation, if not inconsistent what to do? In fact, the focus of self-adaptation is that the width of the element must maintain a fixed ratio, for example, the width of the uniform ratio is 1:1, the width is high twice times that is 2:1, as long as the ratio is clear and fixed, then only need to modify the corresponding margin/padding The percentage value can be adjusted to different width and height ratios.

Summarize

The essence of adaptive is the width, which makes up for the defect that the margin/padding设置百分比 element height cannot be adaptively aligned with the element width.

Reference: use the percent value of margin/padding to achieve a high degree of self-adaptation (more for placeholder, to avoid flicker)

CSS skillfully uses the percent value of the margin/padding to achieve a high degree of self-adaptation (more for placeholder, to avoid flicker)