Small Analysis of CSS box models

Some time ago, from c/s to B/S, when B/S was mentioned, CSS could not be said, but CSS could not be used to drop the box model. When CSS was born, it had the concept of a box model. Most elements in a webpage can form a box model ,. The box model is nothing more than the size and position of the elements described. As long as you have mastered these two points, you can flexibly use the box model for layout. Is the basic element and attribute of the Box Model:

 

Is the basic model of a box model. Every element on the webpage can be described using a model.

 

Element: Element. Some are also called content.

Padding: padding. The default value is 0, which cannot be a negative value. The specific usage is as follows:

 
Padding: 10px 20px 30px 40px;/* set the top, right, bottom, and left values of the element's padding to 10, 20, 30, and 40 pixels respectively */padding: 10px 20px 30px;/* set the top, right, bottom, and left values of the element's padding to 10, 20, 30, and 20 pixels respectively */padding: 10px 20px; /* set the top, right, bottom, and left values of the element's padding to 10, 20, 10, and 20 pixels respectively */padding: 10px; /* set the top, right, bottom, and left of the element's padding to 10 pixels */
 

It can be seen that if you set both directions, you can set them based on the set value. If you only set the upper and right sides, the lower and left sides are the upper and right sides by default, if only one value is set, this value is used in all four directions. The other four values can also be set separately. The corresponding attributes are padding-top,Padding-right,Padding-bottom,Padding-left.

Margin: margin. The default value is 0. Different from the padding value, the value can be negative. The usage is the same as the padding value.

Border: border. It is used to set attributes such as border width, style, and color.

/* Set the element border style to solid, the color to black, and the width to 20 pixels */border-style: solid; border-color: black; border-width: 20px; /* set the Border width on the element to 15 pixels, the Left Border style to double lines, and the right border color to red */border-top-width: 15px; border-left-style: Double; border-right-color: red;
 

Note: If the context settings conflict, follow the settings below.CodeThe effect is that the upper border is 15 pixels, and the other side is 20 pixels. The same applies to other attributes.

Width: width. Indicates thatThe width of the element, not the width of the box.

Height: Height. Indicates thatThe height of the element, not the height of the box.

The box size should be calculated as follows:

Box width = width + padding-left + padding-right + border-left-width + border-Right-Width
Box Height = height + padding-top + padding-bottom + border-top-Width+ Border-bottom-Width

After learning about the above content, the box model is basically okay, And the CSS of the box model is almost the same. The rest is simply to organize and use some basic attributes reasonably. It is not difficult to bring up beautiful and elegant CSS styles for multiple exercises.