box model
Concept
: Each tag in css
is regarded as a matrix
, and
each matrix has a series of attributes from the inside to the outside
.
This series of attributes is called the box
model
Composition
: content padding border margin
Visual area after adding background color
: content + padding + border
1.
content content
Both width
and
height
are set for him
2. padding
inner margin
The distance from
the content
layer to
the border
There are four directions
padding-top/right/bottom/left.
It will increase the visible area by default
,
if you want to keep it the original size
: box-sizing: border-box
3.
border
Controlled by three properties
:
border-style
border style
border-width
border thickness
border-color
border color
It will increase the visible area by default
,
if you want to keep it the original size: box-sizing: border-box;
The border can be set separately: border-left/top/right/bottom-style/width/color
Border arc
: border-radius:50%
Can be set separately
: border-top/bottom-left/right-radius
4.margin
outer margin
There are four directions
margin -top/right/bottom/left
margin:auto
puts the container in the center of the current document flow