How to calculate css box model size

The size of the standard box model is: "the width and height of the content, the padding size on both sides, the size of the borders on both sides"; while the size of the IE box model is directly: "the width and height of the content" , the width/height attribute set by the box is the overall size of the box itself. If it has padding or borders, it is achieved by reducing the content area.

The operating environment of this tutorial: windows7 system, css3 version. This method is suitable for all brands of computers.

(Recommended tutorial: CSS video tutorial)

The box model (Box Modle) can be used to layout elements, including actual content (content) and padding (padding), border (border) and margin (margin).

1. Classification of box models

The box model is divided into two types: ie box model (weird box model) and standard w3c box model .

2. Standard model and IE model Size calculation

#1. Standard box size calculation

The size of the box itself: the width and height of the content, the size of the inner margins on both sides. The size of the side border

The size of the box that the box occupies on the page: the width and height of the content, the inner margins on both sides, the outer margins on both sides of the border

2. The size of the IE box Calculate

The size of the box itself: the width and height of the content

The size of the box that occupies on the page: the width and height of the content and the margins on both sides

IE box Directly set the width/height attributes to the overall size of the box itself. If there are padding or borders, this is achieved by reducing the content area. For more programming-related knowledge, please visit:

Programming getting Started

! !

The above is the detailed content of How to calculate css box model size. For more information, please follow other related articles on the PHP Chinese website!