CSS box model (an article that understands CSS models well)

 Reference:Http://www.aa25.cn/div_css/902.shtml

The CSS box model is the focus of this tutorial. The previous knowledge points can be well understood and mastered if you use table layout. The box model here is different from the table layout. To learn about web standards, you must first understand the box model, which is the core of Div layout. Traditional table formatting uses different sizes of tables and nested tables to locate typographical web content. After CSS formatting is used, the webpage is organized by nesting boxes and boxes of different sizes defined by CSS. This typographical web pageCodeConcise, separated from the content, easy to maintain, compatible with more browsers, and can be browsed normally than PDA devices.

Why is it a box? First, let's talk about the attribute names that we often hear in web design: content, padding, border, and margin all have these attributes.

We can think of it as a box opened above the reality, and then look down from the top down, the border is equivalent to the thickness of the box, the content is relative to the space of the objects in the box, and fill it, it is equivalent to a bubble filled in the box for shockproof purposes. The boundary is equivalent to setting up a certain amount of space around the box for easy removal. This makes it easy to understand the box model.

SoThe width of the entire box model in the page is composed of the Left Border + Left fill + content + right fill + Right Border + right border, the width defined in the CSS style is only the width of the content.This is where many friends are easy to mix up.

The boundary here is also called the outer margin and the outer patch; the padding is also called the inner margin and the inner patch.