CSS common knowledge points

Time:2021-12-30

Three characteristics

Lamination

Conflict: proximity principle

Inheritance

  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
}

priority

If the selectors are the same

Inheritance

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

Border

border: 

Content

Padding (inner margin)

Padding: top right bottom left

Margin (outer margin)

margin-button: 20px;
left,right,top

//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
//Solution
//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
box-shadow:

float

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

characteristic

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

Flex layout horizontal distribution

.container{
  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

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

Recommended Today

K8s deploy the Apollo configuration center

Deployment environment 1、mysql 10.10.10.26Account root password 123Apollo config internal address 10.43 twenty-two point two two 1、 Create data The Apollo server requires two databases: Apollo PORTALDB and Apollo configdb. We have prepared SQL files for the creation of databases, tables and sample data respectively. We only need to import the database.1. Create Apollo PORTALDBImport through […]