Front-end base--CSS box model

now many of the pages are made up of many "boxes", so how many friends who have touched the design of Web pages must have some knowledge of the CSS box model .

In order to better illustrate, first to give a popular example: in a warehouse put 10 cartons, each carton has a certain distance between each carton is a computer and there is a layer of foam between the carton and the computer to insulate against the shock (this assumes that cartons and computers are cubes), with this example for the background and then say box model.

In fact, a picture can be the CSS box model to express the image, online search a lot of:

           

As shown in: The box model in CSS usually consists of four parts: content, padding (padding), Border (border), boundary (margin).

Here the content is equivalent to the computer in the box, padding is equivalent to foam, the border is equivalent to cardboard boxes, the border is equivalent to the distance between each carton.

These four parts are explained:

Content: The contents of the box model can be text, pictures, tables and so on ;

Fill (padding): The Content and box border distance, can be split into Padding-top;padding-right;padding-bottom;padding-left;

Border (border): box border, can be split into border-top; Border-right; border-bottom; border-left;

Boundary (margin): The distance between the box and other adjacent elements can be split into margin-top; Margin-right; margin-bottom; margin-left;

Such as:

It is important to note that the dashed section represents the width and height (height) of the content stored in the box, which is the width and height of the computer in the previous case.

In general, you can set the width (that is, thickness) of the fill and boundary in four directions, and the border is set with a style (style), color, Width (width) of a few properties.

In CSS, it is assumed that all elements in a Web page are wrapped in a rectangular box, such as the usual Div, span, UL, Li, img, table, etc., which can be used in CSS for their contents (content), padding (padding), Borders (border) and borders (margin) are formatted.

if the margin for a box is 30px,border for 5px,padding and 20,width for 240,height to 160px, then the box actually occupies a space of width: (30+5+20) x2+240=350px, High (30+5+20) x2+160 =270px

Previous pages were laid out in tables, but there are many drawbacks to table layouts, which are limited to space, and the next chapter will describe the Css+div layout and the differences with other layouts that are easy to control and interact with.

Front-end base--CSS box model