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:
- Pseudo class with
:
Split, pseudo-element use: :
segmentation - 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:
- Who’s on top, look at the cascading horizontal Z-index, who’s on top
- 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
- Frame:
border-radius:10px
Set the rounded corners,Border-shadow :10px(right) 10px(bottom) 5px(shadow size) #888888
Set the shadow - Background:
background-image
,background-size
- Gradient: Linear gradient
Background - image: linear - gradient (XXX)
, radial gradient:Background - image: radial - gradient (XXX)
- 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)
- 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
- 3 d conversion:
rotateX(deg)
.rotateY(deg)
- Transition:
transition-property: width; Transition-duration: 1s; Transition-timing-function: linear; Transition-delay: 2s; (Since when)Copy the code
- 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
- Flex: I’ve already said that, but I won’t go into more
- Frame:
box-sizing: border-box
Include the padding inside margin and border border in width and height - 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:
- The root element, the HTML element
- The value of float is not None
- The value of overflow is not visible
- The display value is inline-block,table-cell,table-caption
- The value of position is absolute and fixed
Function:
- Organization elements are overridden by floating elements
- You can include floating elements
- Prevent margin overlap