S1/developing commercial sites using HTML language and CSS/06-box model

Box model properties have border, padding, and margins.

1, Frame (border): corresponding to the box of the paper shell, he generally has a certain thickness.

2, Inner margin (padding): inside the border, is the distance between the content and the border, that is, the fill portion of the corresponding box, so also known as padding.

3, margin (margin): Outside the bounding box, outside the border around the gap, so also known as the boundary.

The box model, in addition to the border, padding, and margins, should also include the element content itself, so the complete box model is shown in the plane structure diagram.

Because the box is a rectangular structure, the border, padding, and margins of these attribute parts correspond to the upper ( top) ( bottom) left ( right ) 4 edges, which 4 The edges can be set differently.

The box model, in addition to the plane structure diagram, also includes three-dimensional three-dimensional structure diagram, from the top down, he said the hierarchical relationship is as follows.

1, the first is the box's main logo: border (border), located in the first layer of the box.

2, followed by the element content (contents), the inner margin (padding), the two are located on the second floor.

3, again is the previous focus on the background map (background-image), located on the third floor.

4, the background color (background-color) is located on the fourth floor.

5, the last is the entire box margin (margin).

The page content that is seen in the Web page is the final effect of the three-dimensional multi-layered overlay of the box model, from which we can see that if you set the background image and background color for a page element, the background image will be displayed above the background color.

Properties of the box model

1. Border

The border (border) has 3 properties, namely color,width(thickness), and style (style). When setting the border style in a Web page, it is often necessary to combine the 3 properties well to achieve a good page effect. When using CSS to set borders, use border-color,border-width, Border-style to set the color, weight, and style of the border.

/1/border-color

The Border-color is set in exactly the same way as the color property of the text or the background color Background-color property, and is the color used to set the border in hexadecimal, such as red #FF0000 .

Since the box model is divided up and down 4 border, so when you set the border, you can set the color of 4 borders in the order of the upper and lower left and right , or you can set the color of 4 borders at the same time. The settings for the Border-color property are shown in the following table.

Border-color property setting Method

Property	Description	Example
Border-top-color	Set the top border color	Border-top-color: #369;
Border-right-color	Set the right border color	Border-right-color: #369;
Border-bottom-color	Set the bottom border color	Border-bottom-colot: #FAE45B;
Border-left-color	Set the left border color	Border-left-color: #EFCD56;
Border-color	Set 4 borders to the same color	Border-color: #EEFF345;
	The top and bottom border color is #369 Left and right border color is #000	Border-color: #369 #000;
	The top border color is #369 Left and right border color is #000 The bottom border color is #F00	Border-color: #369 #000 #F00;
	The top, right, bottom, and left border colors are #369,#000,#F00,#00F	Border-color: #369 #000 #F00 #00F

S1/developing commercial sites using HTML language and CSS/06-box model