New knowledge storeFront end from entry to groundFor attention, star and suggestions, update from time to time ~

You don’t see the total set: from scratch big front-end base building journey (simple, constantly updated ~) ten thousand word long catalogue, feel good, feel free to like it

Knock on the blackboard: as always, all examples in this article are hand-typed HTML examples, you can directly select the example to debug on the console, welcome 👏 and suggest to validate various ideas. It’s not easy, but if you think you’ve learned something new, I’m here to congratulate you

In addition, the distance and size of the picture on the left are adjusted this time. Reading should not be affected under the resolution of 1366 * 768

Width height percentage

When the height and width of an element are set to percentages, they are based on the height and width of the block-level object containing them, respectively. That’s what regular percentages mean.

<div class="container">
  <div class="inner">Note that there</div>
  <div class="divider">I'm the dividing line</div>
</div>
Copy the code
.container{
  width: 500px;
  height: 300px;
  border: 1px solid grey;
}

.inner{
  background: lightblue;
  text-align: center;
  width: 50%;
  height: 50%;
}
.divider{
  border-top: 1px solid lightblue;
  text-align: center;
}
Copy the code
Note that there
I’m the dividing line

Margin percentage

Assuming a block-level container 500px wide and 300px high, the block-level child elements define margin:10% 5%; What do you think the calculated values of top, right, bottom and left margin are?

Let’s actually look at it

<div class="container">
  <div class="inner">Note that there</div>
  <div class="divider">I'm the dividing line</div>
</div>
Copy the code
.container{
  width: 500px;
  height: 300px;
  border: 1px solid grey;
}

.inner{
  margin: 10% 10%;
  background: lightblue;
  text-align: center;
}
.divider{
  border-top: 1px solid lightblue;
  text-align: center;
}
Copy the code
Note that there
I’m the dividing line

The result is 50px 50px 50px 50px 50px, not 50px 30px 50px 30px

why

The definitive guide to CSS:

We believe that the normal flow of most elements will be high enough to contain the descendant elements (including from the outside), if an element of the up and down the outside is the height of the parent element percentage, can lead to an infinite loop, the parent element height increases, the increase of elements from the outside to adapt to the posterity, and accordingly, The upper and lower margins increase as the parent element height increases.

The percentage value of margin is calculated with reference to the width of the block it contains.

When the writing mode becomes vertical, the reference will be changed to the height of the containing block. Let’s change the CSS writing mode in the above example:

.container{
  width: 500px;
  height: 300px;
  border: 1px solid grey;
  writing-mode: vertical-lr;
}
Copy the code
Note that there
I’m the dividing line

30px 30px 30px 30px 30px

That is, the writing mode affects the margin percentage reference object.

Padding percentage

Ditto the I

Let me give you an example of the effect. Notice, this is a vertical example.

Note that there
I’m the dividing line

Compared to the previous example, the space on the left element is not enlarged, but the background area is enlarged because margin is changed to padding.

Therefore, the padding percentage is not relative to itself, but relative to the width of the nearest parent element when the writing mode is default landscape. The writing mode is writing-mode: vertical-lr; In vertical order, percentage height relative to parent element

Width and padding combined percentages

It’s easy to use one alone, but if you combine it, it could be a problem. Here I can’t help but ask:

Dude, have you ever heard of a box model?

  • Box-sizing: content-box; default width or height is set to the width or height of the content; border and padding are set separately

  • Box-sizing: border-box width or height is content + padding + border

Now let’s look at the chestnut, where the width of the inner element is set to 100% and the padding is set to 10%

<div class="container">
  <div class="inner"><div class="text">Note that there</div></div>
  <div class="divider">I'm the dividing line</div>
</div>
Copy the code
.container{
  width: 500px;
  height: 300px;
  border: 1px solid grey;
}
.inner{
  background: lightblue;
  text-align: center;
  width: 100%;
  padding: 10% 10%;
  box-sizing: content-box; // Add this because some environments are not standard box models by default}.divider{
  border-top: 1px solid lightblue;
  text-align: center;
}
.text{
  background: yellow;
}
Copy the code
Note that there

I’m the dividing line

Under standard box model, width: 100%; padding: 10% 10%; Box-sizing: border-box; width (); width (); width (); width (); width (); width (); width (); width (); width (); width (); You can go to the console and try it yourself, but I won’t give you any examples.

Percentage of top, left, right, bottom

Look at the picture

<div class="container">
  <div class="inner"></div>
</div>
Copy the code
.container{
  width: 500px;
  height: 300px;
  border: 1px solid grey;
  position: relative;
}

.inner{
  width: 200px;
  height: 100px;
  background: lightblue;
  top:10%;
  left: 10%;
  position: absolute;
}
Copy the code

It is obvious that left is relative to the width of the parent element and top is relative to the height of the parent element. Right relative to the parent width, bottom relative to the parent height.

## Translate percentage

Percentages are used in the translate function based on the width and height of the element itself.

Margin-left :-width/2; margin-top:-height/2; margin-left:-width/2; margin-top:-height/2; margin-left:-width/2; margin-top:-height/2

<div class="container">
  <div class="inner"></div>
</div>
Copy the code
.container{
  width: 500px;
  height: 300px;
  border: 1px solid grey;
  position: relative;
}

.inner{
  width: 50%;
  height: 50%;
  background: lightblue;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
Copy the code

The Translate attribute and the absolute and relative positioning attributes, plus the top and left values, can all shift an element, but there are subtle differences between the offsetLeft and offsetTop attributes.

Using absolute and relative positioning attributes plus top and left affects the values offsetTop and offsetLeft.

The offsetTop and offsetLeft of Translate are the same as elements without displacement, that is, the values of offsetTop and offsetLeft are fixed regardless of the value of translate.

Margin for the negative

  1. Negative margin – left margin – right
  • The element itself has no width and will increase its width
<div class="container">
  <div class="inner">The inner element is set to margin-right:-100px</div>
</div>
Copy the code
.container{
  width: 500px;
  height: 200px;
  border: 1px solid grey;
  margin-left: 100px;
}

.inner{
  height: 100px;
  background: lightblue;
  margin-left: -100px;
}
Copy the code
The inner elements are margin-left:-100px

  • The element itself has width, which creates displacement supplementsinnerElement width attribute
.inner{
  height: 100px;
  background: lightblue;
  margin-left: -100px;
  width: 100%;
}
Copy the code
The inner elements are margin-left:-100px

  1. Margin-top is negative, regardless of whether the height is set, it will not increase the height, but will produce upward displacement
.inner{
  height: 100px;
  background: lightblue;
  margin-left: -100px;
  width: 100%;
}
Copy the code
The inner elements are margin-top:-100px

  1. When margin-bottom is negative, it does not shift and instead reduces its CSS reading height.
<div class="container">
  <div class="inner">The inner elements are margin-bottom:-100px</div>
  <div>So here's the next element</div>
</div>
Copy the code
.inner{
  height: 150px; / / hereheightinto150px
  background: lightblue;
  margin-bottom: -100px;
  width: 100%;
}
Copy the code
The inner elements are margin-bottom:-100px
So here’s the next element

Now, what do you think happens when negative values go to negative percentages? Welcome to leave a message

Padding negative

Unfortunately, padding is not allowed to be negative

If you learn something new, please give me a like and let me know

This article contains: a journey of large front end foundation building from scratch (simple and profound, constantly updated ~)

Recommended reading:

  • Take you rolled a belongs to own the react project | webpack + Babel + typescript + eslint didn’t ridden a project of the couple must not to be missed, take you unlock fast development tips

  • In a few words with you to understand the “closure” | add usage scenario is very simple to explain why going?

  • Chaohuaxishi, re-introduction of inheritance and prototype chain has a picture of the truth

  • Reflow and Repaint, KFC and MC are mentioned at the same time every time. The relationship is almost as close as MC beside KFC.

  • Viewport and 1 px | tools: this is a 1 px, designer: no, I can’t, this is not a design but ready to quarrel with me

  • Edible “dry” CSS layout, pure Html example, can debug | horizontal, vertical, multiple columns can watch, adjustable, can be taken away, the only, no branch

  • Front end must master “CSS cascade context” explain | handmade sample, BaoJiao package will sister with cat, what do you want?

Reference Documents:

  1. CSS margin percentage
  2. [margin](