CSS Box Model

Inner margin, margin, border

Box model--border (i)

The border of the box model is the line around the content and the filter, which you can set its thickness, style and color (border three properties).

The following code is div to set the border thickness to 2px, the style is solid, the color is red border:

div{    border:2px  solid  Red;}

The above is an abbreviated form of the border code, which can be written separately:

div{    border-width:2px;    Border-style:solid;    border-color:red;}

Attention:

1. Border-style (border Style) common styles are:

Dashed (dashed line) | Dotted (point line) | Solid (solid line).

Box model--width and height

The width and height of the box model are not the same as the width and height of the object we normally speak, the width (width) and high (height) defined within the CSS, meaning the range of content outside the padding, so the actual width of an element (width of the box) = left border + Left box + Left padding + content width + right padding + Right Border + right edge.

The height of the element is also the same.

Box model--boundary

The distance between the element and other elements can be set using the boundary (margin). The boundary can also be divided into upper, right, lower and left. The following code:

div{margin:20px 10px 15px 30px;}

You can also write separately:

div{   margin-top:20px;   margin-right:10px;   margin-bottom:15px;   margin-left:30px;}

If the upper-right bottom-left boundary is 10px, you can write this:

div{margin:10px;}

If the upper and lower bounds are the same as 10px, and about the same 20px, you can write:

div{margin:10px 20px;}

Summary: The difference between padding and margin,padding in the border, margin outside the border.

You can set the distance between the element content and the border, which is called padding. Fills can also be divided into top, right, bottom, and left. The following code:

div{padding:20px 10px15px 30px;}

The order must not be confused. You can write the above code separately:

div{   padding-top:20px;   padding-right:10px;   padding-bottom:15px;   padding-left:30px;}

If the top, right, bottom, and left fills are 10px; you can write this.

div{padding:10px;}

If the upper and lower fills are the same as 10px, about the same as 20px, you can write:

div{padding:10px 20px;}

The sort of counterclockwise direction

CSS Layout model

Clear the basic concept of CSS box model, box model type, we can delve into the basic model of Web page layout. The layout model is the same as the box model, which is the most basic and core concept of CSS. But the layout model is based on the box model and differs from the CSS layout style or CSS layout template that we often say. If the layout model is this, then the CSS layout template is the last, the external representation.
The CSS contains 3 basic layout models, summarized in English as Flow, Layer, and Float.
In a Web page, elements have three layout models:
1. Flow model
2. Floating model (float)
3. Layers Model (layer)

What is the layout of these three layout models? The next few sections will give you a detailed introduction

CSS Box Model