Understand the HTML box model and the HTML Box Model

Understand the HTML box model and the HTML Box Model

In the layout of HTML, there is a very important model, that is, the box model. In the box model, the TAG content is understood as an item, the css style is understood as a box containing this item. Generally, block-level labels have the characteristics of the box model. You can set this box in css, in order to achieve my own layout purpose, I have drawn a simple figure here, only write the inner padding and the outer margin, because I feel that other attributes are easier to understand with text and code. similarly, in the process of learning this, you should be diligent in code testing and testing. Otherwise, it is very difficult to grasp the knowledge.

Box Model

First, the box, what is the box that contains the content, that is, the first black box. The box and the content (orange) are filled in green ), the spacing between the box and the box is called the margin (margin) (purple), the box has a border (border) (blue), and the three parts have four attributes, for example, the padding values of padding-top, padding-left, padding-right, and padding-bottom affect the content location, it should seem clear (poor plotting ability ).

After the box is introduced, let's briefly talk about the various attributes to facilitate testing and learning. I am not as careful as I described the labels later, because I have limited capabilities and some things I can understand, however, the expression may not be so vivid, so we can just look at a little test.

Border (border)

The border of the box model has its width, line type, and color. The Code is as follows:

Div {

Border-width: 2px;

Border-style: solid;

Border-color: red;

}

This code can also be abbreviated

Div {

Border: 2px solid red;

}

Border-style (border style), common three, dashed (dotted line), dotted (DOT line), solid (solid line)

Border-color (border color). The color of all settings is the same. You can use English names or hexadecimal values of colors.

Border-width (border width) is generally followed by the pixel value, but there are also type values thin, medium, thick, but it is very infrequent.

As mentioned before, border also has four attributes. Therefore, if you need to set a border for only one edge, instead of four sides, do not write border during the setting, it is border-bottom.

Box model calculates the width or height

Sample css style sheet code:

Div {

Width: 200px;

Height: 100px;

Border: 1px solid red;

Margin: 10px;

Padding: 20px;

)

So the calculation of the div block width should be from the outside to the inside, two margins + two borders + two inner fills + one content tag, the answer should be 2 * 10px + 2 * 1px + 2 * 20px + 200px = 262px. This is the full width of the box model, and the height is the same as that.

Box Model Filling

The padding between the element content and the border can be set separately. The padding can be set in two code settings to demonstrate separately.

Complete code Filling

Div {

Padding-top: 20px;

Padding-right: 10px;

Padding-bottom: 15px;

Padding-left: 30px;

}

Clockwise fill (the order is the same as the above Order, top right bottom left)

Div {

Paddng: 20px 10px 15px 30px;

}

The effect of this implementation is the same as that of the full version above.

If the upper-right lower-left padding is the same, it can be abbreviated as

Div {

Padding: 20px;

}

If the upper and lower fills are the same (10px), the left and right fill is the same (20px)

Div {

Padding: 10px 20px;

}

The outer spacing is the same as the inner padding, but the padding is changed to margin. All the abbreviations set above are applicable, so we will not repeat them.