A closer look at the css3 border-sizing property-CSS Tutorial-php.cn

A closer look at the css3 border-sizing property

青灯夜游

Release： 2020-12-23 10:45:31

forward

1956 people have browsed it

A closer look at the css3 border-sizing property

box-sizingFor changing the default used to calculate the width and height of elements CSS box model. It has three values: content-box, border-box and inherit. inherit refers to inheriting the box-sizing expression form from the parent element, which is no longer redundant.

1. Property explanation

`content-box`

The default value is also the box model in CSS2.1. When calculating width and height, border, padding and margin are not calculated. Height and width are just the content height.

`border-box`

css3Newly added. The width and height properties include content, padding, and borders, but not margins.

Calculation formula:

##width = width = border padding Content width
height = border padding content height

2. Consider the

margin

of the box model. From the above, we can know that it is

border-box margin is not calculated, but border and padding are calculated redundantly. Because border and padding are both part of the box model, but margin marks the distance between boxes . Therefore, the explanation of border-box is very common sense.

The question is, if
margin must be set sometimes, how to achieve free control to ensure compatibility? For example, we want to set up a box element that fills the entire page and is interfered with by margins. How should we do this?

Achieve the following renderings:

A closer look at the css3 border-sizing property

Code: Source code download

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>yuanxin.me</title>
  <style type="text/css">
    *{
      margin: 0;
      padding: 0;
    }
    #app {
      box-sizing: border-box; /* 指定计算方式 */
      margin: 10px; /* 外边距干扰 */
      /* 利用 css3 的 calc */
      width: calc(100vw - 2*10px);
      height: calc(100vh - 2*10px);
    }
  </style>
</head>
<body>
  <div id="app">
  </div>
</body>
</html>

Copy after login

So, when you need to calculate the margin, you can use with the four arithmetic operations (calc) in css3.

3. Usage suggestions

Based on the usage experience in the project and the recommendations of w3c, it is recommended to set the
box-sizing attribute to border-box .
* {
  margin: 0;
  padding: 0;
}
div {
  box-sizing: border-box;
}
Copy after login
For more programming-related knowledge, please visit:

Introduction to Programming! !
The above is the detailed content of A closer look at the css3 border-sizing property. For more information, please follow other related articles on the PHP Chinese website!