CSS Box model

• Box model

{width: 200px; height: 200px; border: 2px solid red;}

The width, height, which is usually set, refers only to the content area, not including border, padding, and so on. However, you can specify a box model area by setting the Box-sizing property, and the box-sizing has two values: Content-box and Border-box. By default, when the current box model box-sizing value is Content-box, the width height of the box model is set to the content width.

When manually setting the Box-sizing value to Boxder-box, the width height of the current box model represents the overall width and height of the content +padding value +border.

The following box all the width of the same, the difference is the left side set Box-sizing:border-box.

You can see the difference, the width of the left setting is 200px = content width (186px) + padding (5px * 2) +border;

The box-sizing is not set on the right, the default is Content-box, and the width is set to only 200px of the height of the content.

• Box-shadow box Shadows: Shadows are just decorations and don't occupy space

Blur Radius: Sets the range of content blur, the larger the value, the greater the range of the border blur,

Shadow Size: Sets the range of extra blur, the larger the value, the greater the blur range, and the number of negative values you can set

Color: Blur color, if not set will take font color

• Outline: Box border, decoration, do not occupy space

CSS Box model