"CSS Black Tech 2" css percent for high placeholder adaptation (margin/padding)

| lead in many scenarios, we need to set the container aspect ratio, to achieve adaptive placeholder, skillfully use margin/padding can let us achieve our needs

Basic points of knowledge

This article relies on a basic but easily confusing CSS knowledge point: When the padding/margin takes the form as a percentage, either left/right, or top/bottom, is the parent element's width is the reference!

Ha,top/left with the width of the parent element is good to understand, but Top/bottom not with height more in line with our expectations? There are doubts very simple, see official explanation :

Give me a chestnut.

We have a page, such as, if the PC is good to do, the width of the container is written dead how many px, so 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:

1. A row of 2 columns of the container width set 50%, so that a row of two containers, each of the 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 loading speed, there will be a highly open process, if the picture is not loaded successfully, it is worse, the entire page structure may have problems, this will certainly be tested by the students reported bug

Now the problem is obvious, is how to use the picture can open the container height, and is highly controllable, such as the aspect ratio is a 1:2 or something

Setting Padding-top/bottom for a container

Cheer up, as mentioned above , the percentage value of Padding-top/bottom is dependent on the width of the parent container, so that the width and height of the container can be unified with the same reference (the width of the parent element)

For example, the picture aspect ratio is 1:1, with 2 containers on one line

The visual results are 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. We've reached our original dream .

This scenario browser compatibility is very good, the only drawback is that the container can not set the max-height property, because max-height can only limit the content height, and can not limit padding!! , the following item:

This head chart is the size set by the aspect ratio, but you also need to consider the situation of the horizontal screen, such as:

We are not easy to take the dog!!

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

The box model from the above scenario shows that the reason for the max-height failure is that the height of the container is padding , and the content height is 0,max-height cannot function. The only way to optimize this is to use the content height to open up instead of padding, which is very similar to the scheme for removing floats: Adding a child element/pseudo-element to the container and pading/margin the element/pseudo-element Set to 100% so that the actual height corresponds to the width of the container, so that the height of the container can be held to the width of the desired aspect ratio (1:1). Because the addition of child elements is inconsistent with HTML semantics, it is more recommended to use pseudo-elements : After to implement this scenario.

Let's take a look at the box model at this time:

Perfect, it can be seen that the contents of the container height and content width consistent, mother no longer have to worry about I can not max-height to limit the height of the container.

That's the same thing on the above project. Max-height Pain points cannot be set

In addition, the use of margin will need to consider the problem of margin folding (reference code BFC related),padding no such annoyance.

Ha, the container will give you, to add content to the container, but can not add extra height, it can only use position:absolute ~

Finally, the sass is as follows:

 //placeholder is controllable height: false (cannot control min-height, but no redundant structure) True (can control min-height, but increase structure) @mixin Proporbox ($arg: 1, $type: false, $ele: ': Before ')  { position :  relative ;             @if $type = = true {&#{$ele }{: ;  display :  block ;  width :  100% ;         Padding-top :  percentage ($arg) ; } @else  { Padding-top :  percentage ($arg) ; }  

"CSS Black Tech 2" css percent for high placeholder adaptation (margin/padding)