Seen in everyday life box is a box can hold one kind of thing, if a lot of things at home, you will need to install by category into different boxes. Web page content of the performance is the same, if the page is more content, but also want the page a cleaner, more beautiful, have a good user experience is also required by categories into different blocks, each carved out blocks can be seen as a box to hold things. And each HTML element can be regarded as a block, similar to what the box installed, so called box mode. In box model can be installed in addition to the content (text, images, etc.), refill may be a small box, so that a page layout is to use a plurality of boxes placed sequentially or combined into a nested page frame, then in the different boxes in into the corresponding web content.
How to define it in a box? How to put a box layout pages? Usually we use the "meaningless" tag <div> Define a box model, and then to declare properties through CSS box model attributes. It comprises a box width attribute (width) and height (height), the distance between the contents inside the box to the box frame i.e. filling (padding), the box itself has a border (border), and the other out of the box and the box frame there boundary between the (margin), as shown in FIG.
FIG 1 W3C box model
The box model declaration code is as follows:
File browser to open the HTML code comprising this effect shown in Figure 2:
FIG 2 W3C box model
When using CSS for page layout, box model is the cornerstone of the page layout. The example is a rectangular frame id <div> element declaration #box of this box by the element content, blank, and filled frame and other components. The use of the block width and height attributes to specify the width and height of the CSS 200px respectively, using the border attribute is added to the four sides of the border lines have a width of 5px defined blocks by the outer and inner margins 20px margin and padding properties are filling 10px distance, as shown in FIG.
FIG 2 W3C box model
Using the margin specified in the outer margins to set the distance between the other blocks, the purpose is to create an interior filled with a spacer between the content and the frame, so that the content is not mixed with the bezel. Defined CSS box model properties required as shown in Table 1.
Table 1 Properties CSS box model declaration
Box block external and internal filling margins distance are optional, default values of most elements are zero, but there are some elements there will be a default value other than 0, such as body, ul, h3, etc., will give the page layout bring inconvenience. margin and padding properties of elements can be set to 0, remove these default blank. On the web design, content often refers to text, images and other elements, but can also be a small box (DIV nesting). And real-life case is different, what real life is generally no larger than a box, or a box will be hold bad; and the CSS box resilient, there's something greater than the box itself up to it to stretch, but it is not It will be damaged. Only the width of the filling property, the thickness of materials to be understood that seismic life in a box. The frame has the size and color of the points, we can understand life as seen in the box thickness, and material of the box is made with what color. The boundary is the case with other things to keep much distance.