CSS box model

CSS box model is essentially a box that encapsulates the surrounding HTML elements. It includes four attributes: margin, border, padding and content.

How many types of CSS box models are there?

1. W3C Box Model (Standard Box Model)

1. In the standard box model, width refers to the width of the content area; Height refers to the height of the content area. 2. Box size under standard box model = Content + border + padding + margin

2. IE Box Model (Weird Box model)

1. Width refers to the total width of the content, border, and inner margin (content + border + padding); 2. Box size =width (Content + border + padding) + margin

Set the box model (CSS3 specifies the type of box model) :

Grammar:

box-sizing: content-box;
box-sizing: border-box;
box-sizing: inherit;
Copy the code

That is, box-sizing can specify the type of box model, content-box specifies the box model to W3C (standard box model), and border-box specifies the IE box model (weird box model).

Solve the compatibility problem of the styles in the two modes

Instead of adding padding to an element with a specified width, it is recommended that you try to add padding or margins to the element’s parent and child elements.