This article introduces to you the article content about the usage of border-sizing attribute in CSS. It has a good reference value. I hope it can help friends in need.
box-sizing is used to change the default CSS box model used to calculate the width and height of elements. It has three values: content-box, border-box and inherit. Inherit refers to inheriting the box-sizing form from the parent element, which is no longer redundant.
## 1. Attribute 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-boxcss3
New. The width
and
properties include content, padding, and borders, but not margins.
Calculation formula:## 2. Consider the
margin of the box model. From the above, we can know that even
border-box is the same
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
Achieve the following effect diagram:
Code:
Source code download<!DOCTYPE html> <html lang="en"> <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> <p id="app"> </p> </body> </html>
So, when you need to calculate the margin (margin), you can use
with the four arithmetic operations (calc) in css3. ## 3. Usage suggestionsBased on the 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; } p { box-sizing: border-box; }
How to use pure CSS to implement a dynamic train
What are the css selectors? Comprehensive summary of css selectors (with code)
###The above is the detailed content of Usage of border-sizing attribute in css. For more information, please follow other related articles on the PHP Chinese website!