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 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, and compatible with more browsers, such as 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.
Therefore, the width of the entire box model in the page is composed of the Left Border + Left fill + content + right fill + Right Border + right border, in css styles, the width defined by width is only the width of the content, which is easy to confuse with many friends.
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.