Some percent related debugging experience sharing in CSS

Many CSS properties can be taken as a percentage value. Although formally, the percent value is the form of the number followed by the% (note that there is no space between the number and%), but in different use situations, its meaning will be many different. Therefore, the percentage value can be said to contain quite a lot of content.

Percent value is a relative value

To understand a percentage value such as 100%, the key point is to understand that the percentage must have its corresponding reference value. That is, a percentage value is a relative value, and any time you want to analyze its effect, you need to find its references correctly.

A CSS attribute value from definition to final actual use, there is a process. This involves concepts such as specified values (specified values), computed values (computed values), Used values (using values), Actual values (actual values), and you can imagine that the percent value is actually in the process, Converted to an absolute value (such as 100px) based on its reference calculation, and then applied. This is the meaning of the percent value.

For more information on the processing of CSS property values, you can view value processing.

What is the value of a percentage?

To put it simply, it is variability. This can derive from adaptive, responsive, and other seemingly useful things.

For example, a fixed-width box, and then hope that the box has an absolutely positioned, wide and box-like cover (as it is called ...), the following wording will be appropriate:

CSS code copy content to clipboard

. box{position:relative;width:100px;height:100px;}

. box_cover{position:absolute;width:100%;height:100%;left:0;top:0;}

The advantage of using the percent value here is that if you need to change the size of the box, you only need to change the width of the box, and the cover will automatically keep the size of the box.

Another example is the bootstrap grid system:

As you can see, a percentage value is used in the grid system to achieve the exact partitioning of the space. The percentage value is relative and adaptive, so the grid system can be used well in response design.

Common CSS properties for available percent values

Width & Height

Width and height When you use a percentage value, its references are the containing blocks of the elements (containing block, details). The width reference contains the widths of the blocks, and the height reference contains the heights of the blocks. In most cases, the containing block is the content area of the parent element (the contents of the box model).

I have written width:100% before; height:100% such code to implement the dimension and the parent element consistent. But I found that sometimes the width is in line with the meaning (100%), but the height is not effective. Take a look at the following example:

As you can see, whether a direct parent element (including a block) has a well-defined height definition affects the result when the height is a percentage value.

A detailed explanation for this is that when the height of an element uses a percentage value, the percent value is equivalent to auto if the containing block has no explicit height definition (that is, depending on the content height) and is not absolutely positioned. Auto is the initial default, so it looks like it's "expired."

If the element is the root element (), its containing block is the initial containing block (initial containing blocks) provided by the viewport (viewport), and the initial containing block is considered highly defined at any time and is equal to the viewport height. Therefore, the label's height definition percentage is always valid, and if you want to use a height percentage in it, you must first define the height. That's why the previous fixed footer article has HTML, body{height:100%, and This way of writing.

Margin & padding

These 2 properties are mixed properties and are illustrated by an example:

It can be analyzed that for margin and padding, the percentage value in any direction is the width of the containing block.

Why is it that the width of the containing block is taken as a reference in multiple directions? In my opinion, the width of the containing blocks is most useful in the layout of the block layouts (imagine Word entering text, wrapping to the edge of the width), and corresponding horizontal and internal margins must refer to the width of the containing block. Then consider the vertical direction of internal and external margins, if they do not have the same reference to the horizontal direction, it will be difficult to use because of inconsistencies. So, overall, unification takes the width of the containing block as a reference, and has the best usability.

Strictly speaking, the reference is the width of the containing block, as is the case when the style attribute is writing-mode to the default value. However, this attribute is rarely used, so it is not considered here.

Border-radius

You may have seen someone use the following code to turn a rectangle into just a circle (see this "right"):

CSS code copy content to clipboard

. circle{border-radius:50%;}

The explanation for this is that the percentage value defined for the Border-radius of an element is the size of the element itself. In other words, if the element width is 60px, the height is 50px (border-box size), then the result of border-radius:50% is equivalent to border-radius:30px/20px;

If you still wonder where the rounded corners are written, see MDN's description of Border-radius.

Background-position

The initial value of the background-position is the percent value of 0% 0%. The following is a sample usage:

The percentage value of the background-position, the reference is a subtraction computed value, by the location of the background map, minus the size of the background image, can be negative. In contrast to the above example, think about it, you should be able to feel, with this subtraction computed value as the reference, just can match our senses to the background map position understanding.

This property includes the horizontal and vertical positions, which are referenced by the width subtraction calculation and the height subtraction computed values respectively.

You may have noticed that the last example was written with 4 values (typically 2 values only). For its significance, check out the background-position of the consortium.

Font-size

The reference is the font-size of the direct parent element. For example, the font-size of a direct parent element of an element is 14px, whether it is directly defined or inherited, when the element defines font-size:100%, and the resulting effect is font-size:14px;.

Line-height

The reference is the font-size of the element itself. For example, the font-size of an element is 12px, then the effect of line-height:150% is line-height:18px;

Vertical-align

The reference is the line-height of the element itself (it's very relevant to the front, so I'm here). For example, the line-height of an element is 30px, the effect of vertical-align:10% is vertical-align:3px;

For this attribute I would also like to say that although vertical-align can use numbers, percent values, browser compatibility is significantly different and may require more hack when implemented across browsers. Therefore, I am personally inclined to use middle, and so on, relative to the less compatible difference between the key type of the value.

Positioning for bottom, left, right, top

The reference is the containing block of the element. Left and right are references to the width of the containing block, bottom and top are the height of the reference containing the block.

Transform:translate

A translation transformation that also uses percentages in both horizontal and vertical directions, with references to the dimensions of the transformed bounding box (equal to the border-box size of the element). For example, an element with a width of 150px and a height of 100px, the effect of defining transform:translate (50%, 50%) is Transform:translate (75px, 50px);.

You can also add that the Translate3d corresponds to a third dimension, but after testing, the last 3rd value is not allowed to use a percentage (otherwise the style definition is not valid). As for why not to refer to it, presumably because it is the mysterious third dimension of it ...

Other

If you want to know more percent values available in CSS properties and reference values, refer to mdn CSS percentage values.

Inheritance of percent values

Note that when the percent value is used for inheritable properties, only the absolute value calculated with the combined reference value is inherited, not the percentage itself. For example, the font-size of an element is 14px and the line-height:150% is defined, and then the next level of the element's inherited Line-height is 21px, and no longer related to the child element's own font-size.

Conclusion

It's hard to finally finish reading so many percent value usage, are you interested to use some? (?-?*)

My own view is that a percentage value is an effective way for a CSS to create a relationship between elements and elements, or between different attributes of an element. As long as you want to establish a correlation, you can consider using the percent value appropriately. Also, you can trust this percentage anytime you don't need to do any dynamic event processing or updates yourself.