Home > Article > Web Front-end > A closer look at the css3 border-sizing property

A closer look at the css3 border-sizing property

青灯夜游forward: 2020-12-23 10:45:142046browse

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>

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;
}

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!

css css3 继承盒子模型外边距内边距 margin padding border

Statement：

This article is reproduced at:cnblogs.com. If there is any infringement, please contact admin@php.cn delete

Previous article：How to control css font positionNext article：How to control css font position

See more

A closer look at the css3 border-sizing property

1. Property explanation

content-box

border-box

margin

Related articles

`content-box`

`border-box`