This is the 16th day of my participation in Gwen Challenge. See more details: Gwen Challenge!

Introduction to 👽

Percentage is a common attribute values of CSS, width/height/margin/padding a all the attributes you can use % as a value, but whether you can clearly tell various properties when using %, the reference basis for what? Let’s classify and summarize it.

👽 Category Introduction

👻 First class: parent-child identical class

The percentage in 🙋 child elements, with reference to the value of the parent element’s corresponding attribute, is also the easiest to understand and most common. For example, the child element sets width to 100%, meaning that the width of the child element is 100% of the parent element width.

🙋 has properties of width and height.

🙋 Example code:

  <body>
    <div class="outerBox">
      <div class="innerBox"></div>
    </div>
  </body>
Copy the code
.outerBox {
  width: 400px;
  height: 400px;
  border: 2px solid red;
  background-color: red;
  background-clip: content-box;
}
.innerBox {
  width: 50%;
  height: 50%;
  border: 2px solid black;
  background-color: black;
  background-clip: content-box;
}
Copy the code

🙋 is shown as follows:

The overall picture:

Parent: Child elements:

🙋 🙋 🙋 Additional thoughts:

If outer’s width is not set in the previous example, what is the value of the child element width:50%? Outer’s height is not set. How about the child element height:50%?

👻 The second category: parent-child similarity

🙋 When setting percentages for such attributes, the horizontal reference is the width of the parent element and the vertical reference is the height of the parent element. For example, if the child element is set to max-width:100% and min-height:100%, then the child element is set to max-width:100% and min-height:100%, respectively.

🙋 attributes of this class include max-width, max-height, min-width, min-height, top, bottom, left, reight.

🙋 Example code:

.outerBox {
  width: 400px;
  height: 400px;
  max-width: 800px;
  min-height: 200px;
  border: 2px solid red;
  background-color: red;
  background-clip: content-box;
}
.innerBox {
  max-width: 50%;
  min-height: 50%;
  border: 2px solid black;
  background-color: black;
  background-clip: content-box;
}
Copy the code

🙋 is shown as follows:

The overall picture:

Parent: Child elements:

👻 third class: classes that only look at the parent element width

🙋 when setting a percentage for such attributes, the reference object is always the width of the parent element. For example, the padding-left:100% and margin-top:100% of the child elements indicate that the padding-left and margin-top are 100% of the width of the parent element.

🙋 attributes of this class include all kinds of margin and padding.

🙋 Example code:

.outerBox {
  width: 400px;
  height: 400px;
  margin-left: 0;
  padding-top:0;
  border: 2px solid red;
  background-color: red;
  background-clip: content-box;
}
.innerBox {
  width: 50%;
  height: 50%;
  margin-left: 50%;
  padding-top: 50%;
  border: 2px solid black;
  background-color: black;
  background-clip: content-box;
}
Copy the code

🙋 is shown as follows:

The overall picture:

Parent: Child elements:

👻 The fourth kind, only look at their own classes

The biggest difference in percentage values for attributes like 🙋 is that instead of referring to the parent element, you refer to itself (width horizontally, height vertically).

🙋 The attributes of this class are border-radius.

🙋 Example code:

.outerBox {
  width: 400px;
  height: 400px;
  border-radius: 0%;
  border: 2px solid red;
  background-color: red;
  background-clip: content-box;
}
.innerBox {
  width: 100px;
  height: 50px;
  border-radius: 50%;
  border: 2px solid black;
  background-color: black;
  background-clip: content-box;
}
Copy the code

🙋 is shown as follows:

The overall picture:

Parent: Child elements:

🙋 🙋 🙋 Additional thoughts:

What about the percentage of the border-width set?