display

Elements can be transformed into various forms (block elements, inline elements, inline block elements, hidden)

• block
• inline
• inline-block
• none

The difference between block elements and inline elements

The width and height of a block element can be set. Both margin and padding are effective. A row is exclusive, and subsequent elements will wrap

The width and height of elements in a row cannot be set. margin and padding only take effect on the left and right, and the top and bottom are invalid. The content is as much as possible. All elements are arranged in a row, and there is not enough space to wrap

The width and height of the block elements in the row can be set. Both margin and padding have effects. When the width and height are not set, they are supported by the content. After setting the width and height, they only occupy the width and height area, and can be arranged in a row with other elements

width and height

Setting the width and height of an element can only be set to elements with block element attributes

You can use either a fixed value or a percentage

selector {
  width: 100px;
}
selector {
  height: 100px;
}

padding

Used to achieve the spacing between the element border and the internal content

selector {
  /* padding It can be set to the corresponding direction separately */
  padding-top: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  /* You can also write a separate attribute to represent four directions */
  /* Four directions */
  padding: 10px; 
  /* Up, down, left and right */
   padding: 10px 20px;
  /* Up, left, right and down */
  padding: 10px 20px 30px;
  /* Upper right lower left */
  padding: 10px 20px 30px 40px;
}

margin

Used to implement the outer margin between elements and adjacent elements

The usage method is consistent with the padding syntax

selector {
  /* margin It can be set to the corresponding direction separately */
  margin-top: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
  margin-left: 10px;

  /* You can also write a separate attribute to represent four directions */
  /* Four directions */
  margin: 10px; 
  /* Up, down, left and right */
  margin: 10px 20px;
  /* Up, left, right and down */
  margin: 10px 20px 30px;
  /* Upper right lower left */
  margin: 10px 20px 30px 40px;
}

Block element centered horizontally

If we want to center a block element horizontally, we can set a fixed width, and then add auto on the left and right

.box {
  width: 500px;
  margin:0 auto;
}

Layout Center (safe width)

The security width is to ensure that most user monitors can normally access the corresponding web pages. Now it is generally set to about 1200px  

.container {
  width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

This type of container only adds these attributes, and other attributes are added separately using the class list to prevent the pollution of the version center

Margin top parent pole transfer problem (penetration problem)

  If we nest element a with element b and add a margin top to element b, the effect of this margin top will be reflected in the parent element

Generally, this is called triggering BFC. We only need to add overflow:hidden to the parent element to solve it.

Border border

  The border realizes the decorative effect of web page elements. You can set the border of an edge separately or all. The setting method is similar to margin padding

selector {
  border: Width style color;
  boder-direction: Width style color;
  border-direction-attribute: Attribute value;
}

Background background

Used to set the background of elements with width and height attributes

Background color can write relevant color content

Background image needs to find the corresponding image with the help of url

selector {
  width: 100px;
  height: 100px;
  background-image: url('../img/xxx.jpg');
}

Tile

  Background repeat sets whether the background is tiled. It is tiled by default

• No repeat not tiled
• repeat-x x tile
• Repeat-y tile                                                                                                                        

position
    Background position sets the position of the background image                

•   The fixed value takes the upper left corner of the element as the origin, the right is the positive x direction, and the lower is the positive and negative y direction
• percentage
• left center right top center bottom

Is it fixed

Background attachment fixes the background image at the corresponding position of the element

• scroll
• fixed

background composite attribute

background: the color url('picture address') is fixed;