What are the css box models?

css box model includes standard box model and IE box model. Detailed introduction: 1. The standard box model is the default box model of CSS. It defines the width and height of the element as the width and height of the content area. In the standard box model, the total width and total height of the element are equal to the width of the content area. and height plus the width of the padding, borders and margins; 2. IE box model is the box model used by the Internet Explorer browser. In the IE box model, the width and height of the element are defined as the width and height of the content area. Plus padding and border width.

The CSS box model means that in web page layout, the element is regarded as a rectangular box. This box contains content, padding, and borders. and margins. There are two types of CSS box models: standard box model and IE box model.

1. Standard box model:

The standard box model is the default box model of CSS, which defines the width and height of the element as the width and height of the content area. In the standard box model, the total width and total height of an element are equal to the width and height of the content area plus the width of the padding, borders, and margins.

2. IE box model:

The IE box model is the box model used by the Internet Explorer browser. In the IE box model, the width and height of an element are defined as the width and height of the content area plus the width of the padding and borders. In the IE box model, the total width and total height of an element are equal to the width and height of the content area, excluding the width of the margins.

To better understand the difference between these two box models, we can illustrate it with the following example:

HTML code:

html
<div>Hello World</div>
```
CSS代码：
```css
#box {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 1px solid black;
  margin: 10px;
}

In the standard box model, The total width and height of an element are equal to the width and height of the content area plus the width of the padding, borders, and margins. So, the total width of this element is 200px 2 * 20px 2 * 1px 2 * 10px = 282px, and the total height is 100px 2 * 20px 2 * 1px 2 * 10px = 172px.

In the IE box model, the total width and total height of an element are equal to the width and height of the content area plus the width of the padding and borders. So, the total width of this element is 200px 2 * 20px 2 * 1px = 242px, and the total height is 100px 2 * 20px 2 * 1px = 142px.

It can be seen that there are differences between the standard box model and the IE box model when calculating the total width and total height of elements.

In actual development, we can control which box model an element uses through the box-sizing property of CSS. The box-sizing property has two values: content-box and border-box. content-box is the standard box model, and border-box is the IE box model. The default value is content-box.

For example, if we want to use the IE box model, we can set the box-sizing property to border-box:

css
#box {
  box-sizing: border-box;
}

Summary:

There are two box models in CSS Types: Standard box model and IE box model. The standard box model defines the width and height of an element as the width and height of the content area, while the IE box model defines the width and height of an element as the width and height of the content area plus the width of the padding and borders. In actual development, we can control which box model an element uses through the box-sizing property of CSS.

The above is the detailed content of What are the css box models?. For more information, please follow other related articles on the PHP Chinese website!