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;