css box model and some properties

The box model is also called the box model (Box Model) contains content (content) padding (padding)

border (border) margin (margin)

The innermost box is the actual content of the element, that is, the element box immediately outside the element box is the padding.

Next is the border (border) and then the outermost layer is the outer margin (margin) The whole constitutes the box model

All sides are set in order, top, right, bottom and left have different units or percentages

If the four sides of the square are equal, set one

h1 {padding: 10px 0.25em 2ex 20%;}
h2 {padding: 10px} four sides
em 1em is equal to the length of the current font 2em is equal to the length of the two fonts
If a word is 3px then 2em is 6px

ex An ex is the x-height of a font. (x-height is usually half the font size.)

Just want to set the left padding can be written like this

h3{
padding-left: 10px;
}

h3{
padding:0 0 0 10px;
}

This code is to set all the padding but the top, right and bottom are set to 0;

The front is 0, no need to write the unit

The margin margin is transparent, it is not that it will not block other elements around it, but other modules will be next to the margin

If they are both floats to the left: left will be next to the margin

css has an absolute positioning you can make the element go where you specify

The absolute position is relative to the absolute position of a div. The default is body

The position attribute specifies the positioning type of the element

Absolute positioning and floating float cannot be used at the same time
. The position of an absolutely positioned element is relative to the nearest positioned ancestor element. If the element has no positioned ancestor element, its position is relative to the original containing block.

position:absolute generates an absolutely positioned element The position of the element is specified by the "left", "top", "right" and "bottom" properties

<html>
<head>
<style type="text/css">
h1.gf
{
position:absolute;
left:150px;
top:150px
}
</style>
</head>

<body>
<h1 class="gf">150px from the left side of the page, 150px from the top of the page</h2>

</body>

</html>

You can use the border border to draw triangles

<!DOCTYPE html>
<html>
  <head>
    <style>
        .sanjiao {
            width : 0;
            height: 0;
            border : 100px solid transparent;
            border-top : 100px solid blue; /*Here you can set the top, bottom, left, right triangles of the border*/
        }
    </style>
  </head>
  <body>
    <div class="sanjiao"></div>
  </body>
</html>

css box model and some properties

Guess you like