Finally figured out how percentages in CSS work!

By Dev

Have a dream, have dry goods, wechat search [big Move the world] pay attention to this in the early morning is still in the bowl washing wisdom.

In this paper, making github.com/qq449245884… Has been included, a line of large factory interview complete test sites, information and my series of articles.

Are you interested in how percentages work in CSS? Ever wonder why it can sometimes be messy and confusing? Anyway, I have, so sharing this article today is for me to deepen understanding, but also hope to help you.

What percentage?

As a percentage, you should obviously have a target as a reference source, which is usually the parent element. This is true, but it does not cover all cases. The correct answer would be containing blocks, i.e. blocks that contain our elements and need not be a direct parent element.

Consider the following example:

Code:

<div class="grandparent">
  <div class="parent">
    <div class="child"></div>
  </div>
</div>
Copy the code

.grandparent {
  position: relative;
  width: 200px;
  height: 200px;
  background: #eaeaea;
}

.parent {
  width: 100px;
  height: 100px;
  background: #aaa;
}

.child {
  position: absolute;
  width: 50%;
  height: 50%;
  top: 25%;
  left: 25%;
  background: red;
}

Copy the code

In the example above, I created three nested divs, which are three squares with the following characteristics

The outermost elementdivIs a light gray, size of4x4
The parent elementdivThe color is dark gray and the size is2x2
As well as the distribution of50%The size of the reddiv

If the percentage units come from the parent, then the size of the child should be 1/2 of that, but it’s not, and the size of the child is actually 1/2 of the parent, which is the grandfather. The reason is that the grandparent div is the true contain block of the child div, because the child has position: Absolute, corresponding to position:relative set in the grandparent.

Therefore, in order to determine which is the actual containing block of the element, it is entirely based on the element itselfpositionProperties.

However, for some attributes, the reference source of the percentage unit is neither the parent block nor the containing block, but it is itself — its element.

Percentage attribute

width/height

As seen in the example above, when an element assigns a percentage value to its width, width is based on the width of the containing block, and height is based on the height of the containing block.

padding

For padding, vertical (padding-top/padding-bottom) or horizontal (padding-left/padding-right) are calculated based on the width of the containing block.

Here’s an example:

<div class="parent">
	<div class="child"></div>
</div>
Copy the code

.parent {
  background: #eaeaea;
  width: 300px;
  height: 200px;
}

.child {
  display: inline-block;
  background: red;
  padding-top: 50%;
  padding-left: 50%;
}

.parent {
  position: relative;
}
Copy the code

IO/Khangnd /pen…

In this example:

The fatherdivThe size of6x4.
The childdivThe size of0, butpadding-top 和 padding-leftRespectively,50%

The result is that the child element is 1/2 the width of the parent element, which is a 3×3 square.

margin

The percentages of padding and margin (vertical and horizontal) are also calculated relative to the width of the contained block.

Here’s an example:

<div class="parent">
  <div class="child"></div>
</div>
Copy the code

.parent {
  background: #eaeaea;
  width: 300px;
  height: 200px;
}

.child {
  display: inline-block;
  background: red;
  width: 50px;
  height: 50px;
  margin-top: 50%;
  margin-left: 50%;
}

Copy the code

In this example:

The parentdivThe size of6x4.
margin-top 和 margin-leftRespectively,50%

As a result, the child element is positioned 3 units above and 3 units to the left of the parent element (1/2 the width of the parent element).

top/bottom/left/right

Top and bottom are calculated based on the height of the containing block, and left and right are calculated based on the width of the containing block.

Here’s an example:

<div class="parent">
  <div class="child"></div>
</div>
Copy the code

.parent {
  position: relative;
  background: #eaeaea;
  width: 300px;
  height: 200px;
}

.child {
  position: absolute;
  background: red;
  width: 16.67%;
  height: 25%;
  top: 50%;
  left: 50%;
}

Copy the code

In this case:

The parent div is 6×4 in size
The child elements are position: Absolute, top and left are 50% respectively

As a result, the child div is positioned 2 units from the top edge of the parent div (1/2 the height of the parent div) and 3 units from the left edge of the parent div (1/2 the width of the parent div).

transform: translate()

An amazing property for animations/transitions, which also supports percentage values. However, this attribute does not refer to the block it contains, but to itself.

Here’s an example:

<div class="parent">
  <div class="child"></div>
</div>
Copy the code

.parent {
  background: #eaeaea;
  width: 300px;
  height: 200px;
}

.child {
  background: red;
  width: 100px;
  height: 50px;
  transform: translate(50%, 50%);
}

Copy the code

In this case:

The parentdivThe size of6x4.
The childdivThe size of2x1, the use ofThe transform: translate (50%, 50%)

As a result, the child div is positioned 0.5 units from the top edge of the parent div (1/2 its own height) and 1 unit from the left edge of the parent div (1/2 its own width).

background-size

The background-size attribute takes the complexity of percentage cells to a new level

The percentage value of this attribute refers to the background location area, similar to the include block, but with the following three factors added:

Content-box only blocks
Block with content and padding (padding-box)
Block with content, padding, and border (border-box)

These three values are given by background – origin, specific see MDN: developer.mozilla.org/zh-CN/docs/…

Here’s an example:

<div class="parent">
  <div class="child"></div>
</div>
Copy the code

.parent {
  background: #eaeaea;
  width: 300px;
  height: 200px;
}

.child {
  background-image: url(https://d2fltix0v2e0sb.cloudfront.net/dev-rainbow.png);
  background-size: 50% 50%;
  background-repeat: no-repeat;
  background-color: red;
  width: 50%;
  height: 50%;
}
Copy the code

In this example:

The parent div is 6×4 in size
The child div is 3×2 in size, no padding, and no border
A DEV logo(1:1 ratio) is used as the background image for the child div, with the background size attribute set to 50% 50%

As a result, the background image is stretched to a size of 1.5 x 1.

background-position

Like background-size, the percentage of the background-position property depends on the background location area.

In this example:

<div class="parent">
  <div class="child"></div>
</div>
Copy the code

css

.parent {
  background: #eaeaea;
  width: 300px;
  height: 200px;
}

.child {
  background-image: url(https://d2fltix0v2e0sb.cloudfront.net/dev-rainbow.png);
  background-size: 50% 50%;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-color: red;
  width: 50%;
  height: 50%;
}


Copy the code

In this case, you use the same image and layout as before. When we change the value of background-position, we see some changes:

If there is no value (the default is 0 0), the background image will be in the upper left corner.
Using background-position: 0 50%, the background image is positioned in the left center.
Using background-position: 50% 50%, the background image is positioned in the center.
Using background-Position: 100% 100%, the background image is positioned in the lower right.

Note: Background-position: 0 50% is the abbreviation below

background-position-x: 0
background-position-y: 50%

Obviously, there is some calculation behind the percentage of this attribute, and not just the distance from the child to the top and left edge of the image. Through some research and testing, it appears that the background-position property relies on the following calculation before producing an actual value.

Offset X = (width of container – width of image) * background-position-x Offset Y = (height of container – height of image) * background-position-y

In this case:

Container as childdiv
The width/height of the image isbackground-sizeResults.

font-size

For font size, the percentage value refers only to its immediate parent block.

Here’s an example:

<div class="grandparent">
  font-size: 13px
  <div class="parent">
    font-size: 26px
    <div class="child">font-size: 50%
  </div>
</div>
Copy the code

In this example, I use the same layout as in the first example, with the font size assigned as follows.

grandparent 13px
parent 26px
child 50%

We can clearly see that the font size of child is now the same as that of Grandparent, which is 1/2 the size of Parent.

IO/Khangnd /pen…

After ~~, I have been working on the project for the last week, so I can go to bed after 2 o ‘clock. This article has been sorted out intermittently. Now it is 3 o ‘clock in the night on September 20th.

The bugs that may exist after code deployment cannot be known in real time. In order to solve these bugs, I spent a lot of time on log debugging. Incidentally, I recommend a good BUG monitoring tool for youFundebug.

Original text: dev. To/KHGND/under…

communication

Have a dream, have dry goods, wechat search [big Move the world] pay attention to this in the early morning is still in the bowl washing wisdom.

In this paper, making github.com/qq449245884… Has been included, a line of large factory interview complete test sites, information and my series of articles.

Finally figured out how percentages in CSS work!

What percentage?

Percentage attribute

width/height

padding

margin

top/bottom/left/right

transform: translate()

background-size

background-position

font-size

communication

Related Posts

Brush the front end of the warp note (8)

Vuejs source code anatomy – written at the beginning

How to use common modifiers in Vue