A, the position:

1. Static: default

E.g. I’m in a relative position

This is absolute with the parent element

Fixed: fixed relative to the browser window

E.g. If you roll out of the area, you will sticky it to the target position

2. Box model

Margin = margin = margin

2. The border: border

3. Padding: Inside margin

4. The content: content

Pseudo class, pseudo element

1. A: Link: unaccessed link

2. A. visited B. visited C. visited D. visited

3. A: The link is active

4. A) hover B) link C) link D) link

5. P :before: Insert content before the

tag

6. P :after: Insert content after the

tag

The difference between the two:

  1. Pseudo class with:Split, pseudo-element use: :segmentation
  2. A pseudo-class is an additional style, and a pseudo-element is a virtual element

Flex layout

Properties on the container:

1. Flex-direction: Determines the direction of the spindle

. Container {flex - direction: row (level, starting at the left) | row - reverse (level, starting at right) | column (vertical, the starting point in) | column - reverse (vertical, beginning next); }Copy the code

2. Flex-wrap: Determine if line breaks are allowed

. Container {flex - wrap: nowrap (not a newline) | wrap (on the main shaft is beyond the line, the first line at the top) | wrap - reverse (beyond the newline on the spindle, the first line below); }Copy the code

3. Flex-flow: short for flex-direction and flex-flow

.container {
    flex-flow: <flex-direction> || <flex-wrap>;
}
Copy the code

4. Justify -content: Determines alignment on the main axis

.container { justify-content: Flex - start starting point (main shaft alignment) | flex - end (the end alignment) | center (center) | space - between (full-justified) | space - around (each project equal interval); }Copy the code

5. Align-items: Determines the alignment on the cross axis

.container { align-items: The flex - start starting point (cross shaft alignment) | flex - end (the end alignment) | center (center) | baseline baseline alignment (first line) | stretch (by default, fill the whole container height); }Copy the code

6. Align-content: Defines the alignment of multiple axes. It does not work if there is only one

.container { align-content: Flex - start starting point (cross shaft alignment) | flex - end (cross shaft end alignment) | center (midpoint cross shaft alignment) | space - between (full-justified) | space - around (equal interval alignment) | stretch (by default, Fill the entire container height); }Copy the code

Properties on the project

1. Order: indicates the order. The smaller the value, the higher the value

.item {
    order: <integer>;
}
Copy the code

2. Flex-basis: calculates whether the spindle has extra space

.item {
    flex-basis: <length> | auto;
}
Copy the code

3. Flex-grow: If you have extra space, scale it up. The default value is 0

.item {
    flex-grow: <number>;
}
Copy the code

4. Flex-shrink: shrinks if the space is insufficient. The default value is 0

.item {
    flex-shrink: <number>;
}
Copy the code

5. Flex: short for flex-grow,flex-shrink,flex-basis

. Item {flex: none | [< 'flex - turns' > < >' flex - the shrink '? | | < > 'flex - basis']} / /, for example: the item {flex - turns up: 1; flex-shrink: 1; flex-basis: 0%; }Copy the code

6. Align-self: Alignment of individual items

.item { align-self: Auto (default, inherits parent element's align, If there is no equivalent to stretch) | flex - start starting point (cross shaft alignment) | flex - end (cross shaft end alignment) | center (midpoint cross shaft alignment) | baseline (the first line of text alignment) | stretch (fill the whole container height); }Copy the code

Fifth, vertical middle way

1. Flex: align – items: center

2. Word-break: height: XXXPX

3. Vertical-align :middle If the display is inline-block

4. Given the height of the parent element, set the child element to:

position:relative
top:50%
transform:translateY(-50%)
Copy the code

Six, solve 1px

Why can’t 1px be generated?

The current mobile mainstream screen has a DPR of 2 or 3. For example, if you want to display 1px, you should actually write 0.5px. This is supported on ios, but not on Android.

How to solve it?

1. Using pseudo-elements:

.div::after { content: ''; width: 200%; height: 200%; position: absolute; top: 0; left: 0; border: 1px solid #bfbfbf; border-radius: 4px; - its - transform: scale (0.5, 0.5); The transform: scale (0.5, 0.5); -webkit-transform-origin: top left; }Copy the code

Pros and cons: Can be rounded, but will affect the clearance float

2. Set the viewport scale value + REM

1. When the DPR = 2

<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">
Copy the code

2. When the DPR = 3

< meta name = "viewport" content = "initial - scale = 0.3333333333333333, the maximum - scale = 0.3333333333333333, Minimum - scale = 0.3333333333333333, user - scalable = no ">Copy the code

HTML {font-size:16px},div{width:2rem}, width=32px

Font-size :16px HTML {font-size:16px},div{width:2rem; Font-size :10px},span{font-size:2em}, span{font-size:2em}, span =20px

Advantages and disadvantages: this method is suitable for new projects, old projects too much modification

7, The cascading context z-index

Cascading context: Some elements are stacked together for some reason

Stack order: positive z-index > z-index =0 > Inline or InlineBlock box > Float Box > Block box > Negative Z-index > Stack context (background/border)

The golden Rule:

  1. Who’s on top, look at the cascading horizontal Z-index, who’s on top
  2. Coming from behind, when the level of the stack is the same as the stack order, the following element overrides the previous element

CSS3 new features

  1. Frame:border-radius:10pxSet the rounded corners,Border-shadow :10px(right) 10px(bottom) 5px(shadow size) #888888Set the shadow
  2. Background:background-image,background-size
  3. Gradient: Linear gradientBackground - image: linear - gradient (XXX), radial gradient:Background - image: radial - gradient (XXX)
  4. Text effect:

Text-shoadow: text shadow effect

Box-shadow: Box shadow effect

Text-overflow: text overflow effect

Word-wrap: allows line breaks

Word-break: word break, keep-all(between words),break-all(within words)

  1. The 2 d transformation:
Rotate (30deg)// positive values rotate clockwise, negative values rotate anticlockwise scale(2,3)// width doubles, The height is three times skeW (30DEg, 20DEg)// it is tilted 20 degrees to the X axis and 30 degrees to the Y axisCopy the code
  1. 3 d conversion:rotateX(deg).rotateY(deg)
  2. Transition:
transition-property: width; Transition-duration: 1s; Transition-timing-function: linear; Transition-delay: 2s; (Since when)Copy the code
  1. Animation:
animation-name: myfirst; (animation name) animation-duration: 5s; (duration) animation-timing-function: linear; Animation-delay: 2s; (when to start) animation-iteration-count: infinite; Animation-direction: alternate; Animation-play-state: running; animation-play-state: running; (Running or not)Copy the code
@keyframes myfirst (查 看) {0% {background: red; } 25% {background: yellow; } 50% {background: blue; } 100% {background: green; }}Copy the code
  1. Flex: I’ve already said that, but I won’t go into more
  2. Frame:box-sizing: border-boxInclude the padding inside margin and border border in width and height
  3. Multimedia query: If the width is smaller than XX, change it to XXXX

Nine, three column layout

The holy grail layout

Fixed width on both sides, adaptive in the middle with the middle child set to 100% width and the left and right child set to a fixed width (negative margin stays on the same line)

The downside: As the browser wireless gets narrower, the Holy grail is broken

Twin wing layout

Starting point: To solve the drawbacks above

To keep the middle div from being obscured, create a child div directly inside the middle div to place the content, and use margin-left and margin-right to leave space for the left and right columns of the div

Ten, landing the

Definition:

Also called block-level formatting context, used to lay out a chunk of the rendering area of a block-level box, with a set of rendering rules that determine how its children are laid out and how they interact with other elements

Triggering conditions:

  1. The root element, the HTML element
  2. The value of float is not None
  3. The value of overflow is not visible
  4. The display value is inline-block,table-cell,table-caption
  5. The value of position is absolute and fixed

Function:

  1. Organization elements are overridden by floating elements
  2. You can include floating elements
  3. Prevent margin overlap