preface

In the real world, box sizing is often a problem. With box-sizing, you don’t have to worry anymore. Therefore, cases are used to illustrate the function and difference of box-sizing attribute values. For CSS3’s box-sizing properties, see W3school. If there is an inappropriate description of the place also please give more advice.

The syntax of the box-sizing attribute

Like any CSS property, this property has three values that can be taken care of:

box-sizing: content-box|border-box|inherit;
Copy the code

The following examples are based on containers of fixed width and height.

Content-box (default)

The default value of the box-sizing property is content-box. Example:

 <ul class="box">
   <li class="box-item content-box"></li>
   <li class="box-item border-box"></li>
   <li class="box-item inherit"></li>
</ul>
Copy the code
.box {
    background: # 737373;
    height: 500px;
    padding: 20px;
    display: flex;
}
.box-item {
    background: white;
    list-style: none;
    width: 350px; / * note! Fixed width height */
    height: 350px;
    margin: 40px auto;
}
.content-box {
    box-sizing: content-box;
     / * note! padding: 20px; * /
     /* border: 2px solid red; * /
    background: burlywood;
}
Copy the code

The above running results are as follows:

  • Set up thepaddingandborderThe previous width and height were zero350px

Set up thepaddingandborderAnd then the width and the height are zero394px Conclusion:

When box-sizing is content-box, the padding and border attributes draw the inner margin and border of the element based on the width and height attributes

The width of the element = width + padding + border

Border-box

The Element-UI component library makes extensive use of the border-box value. Following the above case. For the second li, adjust its style as:

.border-box {
    box-sizing: border-box;
    border: 2px solid red;
    padding: 20px;
    background: darkorange;
}
Copy the code

Conclusion:

When set to the border-box value, setting the inner margin and border on the element does not affect the width and height of the element. This means that any inner margins and borders specified for the element will be drawn within the specified width and height.

Now the width of the element is equal to width.

inherit

Inherit the value of box-sizing from the parent element. If not set, the default is Content-box, which I won’t repeat here.

Complete code:

<template>
    <ul class="box">
        <li class="box-item content-box"></li>
        <li class="box-item border-box"></li>
        <li class="box-item inherit"></li>
    </ul>
</template>
<style scoped>
.box {
    background: # 737373;
    height: 500px;
    padding: 20px;
    display: flex;
}
.box-item {
    background: white;
    list-style: none;
    width: 350px;
    height: 350px;
    margin: 40px auto;
}
.content-box {
    box-sizing: content-box;
    padding: 20px;
    border: 2px solid red;
    background: burlywood;
}
.border-box {
    box-sizing: border-box;
    padding: 20px;
    border: 2px solid red;
    background: darkorange;
}
.inherit {
    box-sizing: inherit;
}
</style>

Copy the code

The above simple analysis of all the values and differences of box-sizing attribute. Box-sizing: border-box for fixed width and height elements, you don’t have to worry about the padding