CSS Learning (17th)-Box Model

CSS Learning (17th)-Box Model
I. theory:
1. CSS Box Model
A. Calculation of outer box size-height
Element space Height = content height + inner margin + border + margin
B. outer box size calculation -- width element space width = content width + inner margin + border + outer margin
C. Calculation of inner box size-height
Element Height = content height + inner distance + border
D. Calculation of inner box size-Width
Element width = content width + inner distance + border
2. box-sizing
A. Default Value of content-box
B. border-box elements maintain the traditional IE box Model
C. inherit enables the element to inherit the box model of the parent Element
D. This value is mainly used to control the total width of an element.

Ii. Practice:

1.

 

Hedaerleft mainfooter2.

 

 

Hedaerleft mainfooter 3.

 

 

Hedaerleft mainfooter 4.

 

 

Hedaerleft mainfooter