CSS common knowledge points


Three characteristics


Conflict: proximity principle


  1. text

  2. front

  3. Line start

Row height inheritance

body {
    //The child element is 1.5 times its own
    font: 12px/1.5

div {
    font: 24px


If the selectors are the same


Different selector

Inheritance (*) < element selector < class selector < ID selector < inline selector < importance

The style inherited by the child selector is always 0

A default style blue + underline

Weight superposition

Inherit 0 0

Element selector 0 1

Class selector 0 0 1 0

ID selector 0 1 0 0

Inline selector 1 0

Box model




Padding (inner margin)

Padding: top right bottom left

Margin (outer margin)

margin-button: 20px;

//Horizontally centered, provided the box has a height
margin: 0 auto

//In line elements are centered horizontally
//Add to parent element
text-align: center

//Collapse occurs when both child and parent elements have margins
//1. Defines the top border for the parent element
border: 1px solid transparent 
//2. Defines the inner margin for the parent element
padding: 1px
//3. Add overflow to parent element

Eliminate inner and outer margins

    padding: 0
    margin: 0

Rounded border

border-radius: 10px
//Square - > circle
border-radius: 50%;
//Rectangle - > ellipse rectangle
border-radisu: height/2px

Shadow effect

//Box shadow: h-shadow, v-shadow, blur, speak, color, inset


Standard flow is used up and down, and floating is used left and right

Only the current standard flow will be affected, and the previous standard flow will not be affected


top align

Auto wrap

Wrap when parent element is out of space

Inline block

Added flow with inline block specific

Eliminate floating

The height of the parent container cannot be determined, and the content floats

Solution: let the child open the parent container


Flex layout horizontal distribution

  display: flex;
  flex-wrapper: wrap;

.container > .item{
  flex: 1; -> 1 0 0%
  width: 44%; ->  Horizontal distribution of two
  min-width: 44%
  max-width: 44%;

Suspension button

    height: 80rpx;
    width: 80rpx;
    position: fixed;
    bottom: 50rpx;
    right: 20rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9;