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:142063browse
Recommended: css video tutorial
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
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, ifAchieve the following renderings: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?
<!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.
Based on the usage experience in the project and the recommendations of w3c, it is recommended to set theFor more programming-related knowledge, please visit:box-sizing
attribute toborder-box.* { margin: 0; padding: 0; } div { box-sizing: border-box; }
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!