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

This article shows you some percentage-related debugging methods in CSS, which are concise and easy to understand, which will definitely brighten your eyes. I hope you can get something through the detailed introduction of this article.

The values of many css properties can be percentage values. Although formally speaking, percentage values are all in the form of numbers followed by% (note that there can be no spaces between numbers and%), but in different situations, their meanings can be many different. Therefore, the percentage value can be said to contain quite a wealth of content.

The percentage value is a relative value

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

There is a process for a css attribute value from its definition to its final actual use. This involves concepts such as Specified Values (specified value), Computed Values (calculated value), Used Values (used value) and Actual Values (actual value). It is conceivable that the percentage value will actually be converted to an absolute value (such as 100px) according to its reference calculation in the process, and then be applied. This is the meaning of the percentage value.

For more information about the handling of the value of the css attribute, see Value Processing.

The effect of percentage value?

To put it simply, it is variability. This can give rise to things that seem useful, such as adaptation, responsiveness, and so on.

For example, if you want a box with a fixed width and height, and then want the box to have an absolutely positioned cover with the same width and height as the box (let's call it that), the following would be appropriate:

CSS Code copies content to the 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 percentage value here is that if you need to change the size of the box, you only need to change the width and height of the box, and the cover plate will automatically keep the same size as the box.

Another example is Bootstrap's grid system:

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

Common css properties of available percentage values

Width & height

When percentage values are used for both width and height, their references are the containing blocks of the element (Containing Block, details). The width reference contains the width of the block, and the height reference contains the height of the block. In most cases, the containing block is the content area of the parent element (content in the box model).

I've written code like width:100%; height:100%; before to make the size consistent with the parent element. But I find that sometimes the width meets the meaning (100%), but the height has no effect. Look at the following example:

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

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

If the element is the root element (), its inclusion block is the initial inclusion block (initial containing block) provided by the viewport (viewport), and the initial inclusion block is considered to be highly defined and equal to the viewport height at all times. Therefore, it is always valid to define the percentage of the height of the label, and if you want to use the percentage of height in it, you must first clearly define the height. This is why there are words like html, body {height:100%;} in the previous fixed footer.

Margin & padding

These two attributes are mixed attributes, which are also illustrated by an example:

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

Why is the width of the containing block used as a reference in multiple directions? In my opinion, the width of the containing block is the most useful in the layout of the block (imagine entering text in word and wrapping lines after the edge of the width), corresponding to the horizontal margin must refer to the width of the containing block. Then consider the inner and outer margins in the vertical direction, if they do not take the same reference as the horizontal direction, they will be difficult to use because of inconsistency. Therefore, in general, unifying the width of the containing block as a reference will have the relatively best availability.

Strictly speaking, the reference is the width of the containing block, which is the case when the style attribute writing-mode is the default value. However, this attribute is rarely used, so I won't consider it here.

Border-radius

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

CSS Code copies content to the clipboard

.circle {border-radius:50%;}

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

If you are still wondering how to write the fillet with / here, please check out MDN's instructions for border-radius.

Background-position

The initial value of background-position is 0%. The following is an example of usage:

The percentage value of background-position, taken as a reference, is a subtractive value, which is obtained by subtracting the size of the area in which the background image is placed, which can be negative. Compared with the above example, if you think about it, you should be able to feel that taking this subtraction calculation as a reference can be in line with our sensory understanding of the location of the background map.

This property includes horizontal and vertical positions, which refer to the calculated values of width subtraction and height subtraction, respectively.

You may have noticed that the last one in the above example actually wrote four values (usually only two values are used). For more information about what it means, see the W3C background-position.

Font-size

The reference is the font-size of the direct parent element. For example, the font-size of the immediate parent of an element is 14px, whether this is directly defined or inherited, when the element defines font-size:100%;, the result is font-size:14px;.

Line-height

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

Vertical-align

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

With regard to this attribute, I would also like to say that although vertical-align can use numbers and percentage values, browser compatibility varies widely and may require more hack when implemented across browsers. Therefore, I personally prefer to use values of keyword types that have relatively little compatibility differences, such as middle.

Bottom, left, right, top for positioning

A reference is the containing block of an element. Left and right refer to the width of the containing block, and bottom and top refer to the height of the containing block.

Transform: translate

Translation transformations, which can also use percentages horizontally and vertically, are referenced by the size of the transformed bounding box (equal to the element's own border-box size). For example, an element with a width of 150px and a height of 100px defines the effect of transform:translate (50%, 50%) as transform:translate (75px, 50px);.

It can also be added that the translate3d correspondence has a third dimension, but, after testing, the last third value cannot be used as a percentage (otherwise the style definition is invalid). As for why it can not be referred to, it is probably because it is the mysterious third dimension.

Other

If you want to know more about the availability and reference values of percentage values in the css property, please refer to MDN's CSS percentage values.

Inheritance of percentage values

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

Conclusion

Percentage values are an effective way to establish relationships between elements or between different attributes of elements provided by css. As long as you want to establish a correlation, you can properly consider using a percentage value. Also, you don't have to do any dynamic event handling and updates yourself, and you can rely on this percentage at any time.

The above are some percentage-related debugging methods in CSS. Have you learned any knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow 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.