Disclaimer: This article is a blogger original article, follow the CC 4.0 BY-SA copyright agreement, reproduced, please attach the original source link and this statement.
1. Principle box model
Calculates all the boxes in the space occupied by the browser
2. What is the box
html element as long as the position occupied by the browser [], are we calculate the box.
3. What position is calculated using a box model in the browser
Width: width height: internal height padding: padding border: border-width margins: margin
Box Category: Border box (ie default) and the contents of the box (Google by default)
border box taking up space in your browser = width * height
the contents of the box the space occupied by the browser = width + border-width + padding + height + margin
4. Summary
内容盒子：width height决定盒子容纳多少东西；随着其他变化；盒子在浏览器中占据的位置也变化。
边框盒子：width height决定盒子在父容器中占据的位置，其他变化只会改变盒子能容纳多少东西。
4. The shadow box
box-shadow values:
- none: no shadow
- length: shaded horizontal offset value of the first value defines the length of the element. Value, the shadow appears in the right element; negative value, the shadow appears on the left side of the element
- length: shadow vertical offset value of the second length values that define the element. Positive shadow appears on the bottom of the element; negative, the shadow appears at the top element
- length: Fuzzy value of the radius of the shaded three length values that define the element (if provided). The larger the value the more blurred shadow edges, if the value is 0, the shadow does not appear fuzzy edges. Do not allow negative
- length: fourth epitaxial shadow length values that define the element values (if provided). Positive, the shadow will be surrounded by extended; negative, the contraction in the shadows
- color: color define the elements of the shadow. If the value is not defined, the shadow color will take the current default text color nearest
- inset: the shadow type defined element within the shadow. The value is null, then the shadow of the shadow type outer element