CSS Box model

First, the basic concept of CSS box model

Basic concepts: Margin, border, padding, content

1. The difference between the IE box model and the standard box model

Let's take a look at these two box models, which are essentially the same, and all contain the basic properties of the box model, but the difference between the two box models is the differences in the calculation of the width and height.

Standard box Model: width = content-width; height = content-height;

IE box Model: width = content-width + padding-left + padding-right + border-left + border-right;height = content-height+ padding-t op+ padding-bottom+ border-top+ Border-bottom;

So how do we set the standard for the box model?

The answer is an attribute box-sizing in CSS3 . This property has two parameters: Border-box (ie model) Content-box (Standard Model).

CSS Box model