Introductions to the 0.

When we write CSS, we often use percentage assignment (%) for adaptation. Like the flow layout design pattern we most often use, the width of almost all columns is determined by %. Or, for example, the common problem of centering elements horizontally and vertically, we often use CSS code like this (Absolute +transform) :

.wrap {
  position:absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}
Copy the code

You know from frequent use that the first two 50% values refer to 50% of the width and height of the wrap’s positioned reference, while 50% in translate() refers to the wrap itself. There should be no doubt, but in these three simple lines of code, there are two different % values, one relative to the reference box. One is relative to itself. But do you think these are the only percentages in the CSS world? It’s not that simple, and I’ll give you a list of references for the % value under different circumstances, and listen to me.


1. The first category — location class

The CSS is divided into four kinds of positioning, the default value is static, relative positioning, absolute positioning and fixed positioning. Although the reference objects of % value of each type of positioning are different, I classify them into one category because they all have the special properties of positioning. Now I will discuss four different positioning classifications:

  • Static: the default value of position does not position the element, so the left, right and other position attributes cannot be effectively assigned, so there is no % value for the position function.
  • Absolute: As one of the most commonly used location attributes, Absolute do not know how many front small white dug countless pits, I believe you in the early learning process is hard. If the position value is %, then the relative element is the reference. If the position value is %, then the relative element is the reference. Left and right are relative to width, top and bottom are relative to height, so I don’t have to say much about that.
  • Relative: The value of the position is relative to one’s own width and height.
  • Fixed: This is a special positioning value because we know it is positioned relative to Windows, so the natural % reference is Windows.

2. The second type — box model

In a box model there are a lot of particularly common property values, you can use every day and see every day, these are: width, height, margin, border, padding, not to mention width and height, is relative to the parent box, focus on the margin and padding

  • Margin &padding: These two guys are special. If % is set, they refer to the width of the parent element!! Width of parent element!! ! Parent element!! Width!! Important things to say three times, if you don’t believe us we can try. It’s weird, but you really have to remember that you don’t want to develop it and think it’s a BUG. We can use this special property of padding to build a scale responsive image or video box like 16:9 or 4:3.
  • Border: border I don’t usually see people using % value, if you use % in development, please take my knee. This is actually the border-width, because the border is actually a shorthand property. Border-width: %; border-width: %; border-width: %;
  • -Howard: Border-radius. When we use this attribute, we usually give it four parameters, representing the four corners, respectively are the top left, top right, bottom right, bottom left, in clockwise order. In fact, border-radius can take up to eight values. The first four values and the last four values are separated by /. The front slash represents the horizontal radius of each corner, and the back slash represents the vertical radius of each corner. Examples are as follows:
Border - the radius: the top - left u-right | | | top - right bottom border - left/top - left - | | top - right bottom right | border - leftCopy the code

3. The third category — background values

  • Contain: contain: contain: contain: contain: contain: contain: contain: contain: contain: contain
background-size:100% 100%;
Copy the code

Therefore, the reference of background-size and border-RADIUS are both the width and height of the box itself.

  • Background-position: This property is similar to relative in that it also has the effect of positioning, so its reference object is the original box. However, this attribute is special, it is not referring to the width and height of the original box, but the remaining value obtained by subtracting the width and height of the background image from the width and height of the original box. More specifically, the values of the following two attributes are equivalent: “Center Center” and “50% 50%”, if you set the latter, the background image will be centered automatically, so you don’t need to transform the image like the positioning. It must have been a good previous generation that designed this property with its future applications in mind.

4. 4

  • Translate () : In the first module, translate3D () is translated. In CSS3, translate3D () is translated as translate3D (). This property is translated as a 2d offset in the specified direction, and its reference is its own width and height. The third property, Transform3D (), refers to the offset in the z-axis. Because z-index is auto by default, the % value does not work, which means that the percentage value given to translateZ() is meaningless.
  • Transform-origin: This property is used to change the origin of the element. It is identical to width and height, so I won’t go into detail here.
  • Scale () : Controls the scale of an element. The argument passed is usually a floating point number. It refers to the scale by which the element is enlarged or shrunk relative to itself.
  • Zoom: Zoom is not a transform property, it is a separate CSS property, the reason why it is discussed in the transform module, because it happens to have the same characteristics as scale(), its value can be either floating point or %, including the reference, are equivalent to scale().

5. The fifth category — fonts

  • Word-break: break-all; word-break: break-all; word-break: break-all; word-break: break-all;
  • Word-break: break-all; word-break: break-all; word-break: break-all; word-break: break-all;” If its attribute value is a unitless number, the final result is the product of that number and the font size of the element. This is our preferred method for setting the line-height, since the font size is inherited from the ancestor element, and the value set by this method is rarely unusual. But if our value is %, the final result is the given percentage value multiplied by the element’s last calculated font size.
  • The text text-indent: This property is used to set the first line of the indent. The longest we use is 2em, which means that the first line of the indent is two characters. The 2em here means that it is twice the font-size. If % is set, the parent element’s width is referenced. I think that’s a special case.

6. Conclusion

In order to strengthen your memory, I will summarize the different categories of reference objects as the main line:

  • Relative to the parent box:

The most common one should refer to the properties of the parent box, but there are some special cases that refer to the width of the parent box. Only this category needs to be discussed in two categories:

  • Relative to the box itself:

There are many attributes referenced by the box itself, and the referenced attributes are generally related to the box itself. Attribute values belonging to this category include: Relative in positioning; Border-radius in the box model; Background-size; Background-position in the background is special. Remember, it subtracts the width and height of your background image, which you can think of as the Flex property value in your Flex layout. In transform, translate(), transform-origin, scale(), and our zoom property, which is similar to transform, are all self-referential; The height of a line is related to its font size, so the reference is to its own font-size.

  • Relative to the positioning element:

The positioning element refers to its positioning object. Since relative is positioned relative to itself, I put it in the category relative to the box itself. Other attribute values can be regarded as positioning elements referring to them.

All the attributes listed in this article can refer to the MDN official website for specific properties of some attribute values. In fact, like the attributes listed above, we do not need to remember all of them, and it is difficult to remember all of them. Most of the time, we only need to test them in the browser to know who these CSS are referenced.

That leaves us with a small question: how do I make a square div with equal width and height if I use % instead of px?

It is not easy to write, I hope you can support a lot, if you have something to add, welcome to put forward in the comment area, thank you.


You know who the % in CSS is relative to? – Tencent Web front-end IMWeb team community




Wechat mini program Development -NEXT degree course registration hot, interested partners quickly click on the picture, understand the details of the course!