css box model
Introduction In a
web page, all elements will generate a rectangular box, which can be called an element box.
It describes how much space an element occupies in the document layout. Moreover, each frame affects the position and size of other element frames
. All the web pages we see are constructed from these element frames.
And this is what we call the box model.
Box model which usually contain the following elements
width / height
width and height of the element
content
content box model among the
padding
padding, content refers to the distance to the border of the
border
frame
margin
margins, the distance between the two elements
Content The content of the
box refers to content, which is the content we put in the box model.
In general, the width and height we set refer to the width and height of the content.
width/height
In normal rendering mode, width and height refer to the width and height of the content.
In the weird box rendering mode, width and height refer to the value of content+padding + border
padding
inner margin, which refers to the distance between content and the inner border.
The values in four directions can be set:
upper
padding-top
right
padding -right
down
padding-bottom
Left
padding-left
can also be abbreviated
padding: 10px;
the values in the four directions of upper right, lower left are all 10px
padding: 10px 20px; top
and bottom are 10 and left and right are 20
padding: 10px 20px 30px;
top is 10px, left and right are 20px, bottom is 30
padding :10px 20px 30px 40px; The
upper is 10px, the right is 20px, the lower is 30px, and the left is 40px.
In many cases, you can use the abbreviation as much as possible to use the abbreviation
margin
. It refers to the distance between the two box models. The
margin is also divided into four
Margin-top
margin-right
margin-bottom
margin-left
can also be set by abbreviation in each direction . The usage is the same as padding.
Common way of writing:
margin:0 auto; the
element is centered on the left and right in the browser. The
margin collapses the
upper and lower positions of the two elements When, the margin collapse will occur. The larger value is the
border
border, the
border-style
border style
border-width border-width
border width around the box model
border-color
border color
abbreviation: border:
border: 1px solid red;
weird box model
weird box model originally came from IE browser
through css to open weird box model
box-sizing: border-box
weird box model features
set width And height is the actual width and height occupied