October 2014 Xin Xing's explanation of css section 5

October 2014 Xin Xing's explanation of css section 5

This section describes the "box model" in css, that is, the "box model", which is usually used during layout. This "box model" is also called a "box model". in fact, the principle is the same. Its general principle is that it divides an HTML element into the following parts: margin, border, fill, and actual content, we can set some practical forms by setting these content.

*****************

1. the box model is divided into actual Content, Padding, Border, and Margin from the inside to the outside, the margin is filled.

2. Here is an image I am looking for to explain this box model:

.

3. here we will use text to describe that Content is the Content of the box. For example, we need to display text information. Padding is the area it guards, but its size is subject to border's constraints, while border is the border, and margin is the surrounding area of the border, that is, the distance between the box and external elements.

************

1. therefore, when calculating the width and height of an element, we take the width as an example. In fact, the width of content is multiplied by the width of padding by 2, and the width of border is multiplied by two, multiply the width of margin by 2.

2. we can directly use px to represent the width and height. The only special one is this border. We also need to specify some of its styles and colors, the first parameter is the size, the second parameter is the style (implementation or dotted line), and the third parameter is the color.

3. Code Demonstration:

#par{width:220px;    padding:10px;    border:5px solid gray;    margin:0px;}

4. In fact, it is easy to understand. Its box model is just a little more professional, and its understanding is very simple.

***************

1. the above is just a simple explanation of border. In fact, border has several attributes that can be set separately. First, border-style refers to the line drawing method of the border, you can use none to indicate no borders. You can use dashed to define a dashed box. You can use solid to define a solid box. You can use double to define a double box, you can also define borders with 3D styles, such as using groove to define a 3D groove border.

2. We can use border-width to define the border size. px or em can be used. We have mentioned these three options and we do not recommend them.

3. you can also use border-color to set the border color. It is meaningless to set border-color separately. You must set border-style before setting border-color.

4. these boundary attributes can accept one or four values. If they accept four values, they are implemented in the order of top right and bottom left. If they are three values, they are set to the top right and bottom right, if there are two values, the first value is used up and down, and the second value is used between the left and right. If there is a value, all boundaries use the same value.

5. code. The first step is the my.html code:

    2014 X-star CSS teaching summer edition    
     
Xinxing, blog Park, unlimited warmth

Then there is the css code:

p{border-size:9px ;  border-style: solid;  border-color: red green blue black;}

6. In fact, not only is it border, but padding and margin also accept one to four values. The usage is the same.

****************

1. This section mainly describes the layout, that is, the box model.

2. I hope I can make it clear enough.