What you need to know about CSS- Summary

Px, EM, REM, VW, VH

1. Px (pixel, pixel) :

Dots Per Inch (DPI) is a virtual unit of length used in a digital image of a computer system. If you want to convert PX to physical length, you need to specify the precision DPI(Dots Per Inch), which is usually optional during scanning and printing. The default value is 96dpi for Windows and 72dpi for Apple.

2. Em (unit of relative length, relative to the font size of the text in the current object) :

A unit of relative length, originally the width of the letter M, hence the name em. It is a multiple of the character width, similar to percentage, for example: 0.8em, 1.2em,2em, etc. Usually 1 em = 16 px.

Rem (root EM):

Grail layout – Twin wings layout

<div class="container">
   <div class="main">main</div>
   <div class="left">left</div>
   <div class="right">right</div>
</div>Copy the code

.container {
  width: 100%;
  min-height: 300px;
  padding: 0 60px;
  box-sizing: border-box;
}
.container > div {
    position: relative;
    float: left;
}
.left, .right {
    width: 60px;
    height: 100%;
}
.left {
    left: -60px;
    margin-left: -100%;
}
.right {
    right: 0;
    margin-right: -100%;
}
.main {
    width: 100%;
    height: 100%;
}Copy the code

2. The flex layout:

.container {
    width: 100%;
    min-height: 300px;
    display: flex;
}
.main {
    flex-grow: 1;
}
.left {
    order: -1;
    flex-basis: 60px;
}
.right {
    flex-basis: 60px;
}Copy the code

3. Absolute Layout:

.container {
    width: 100%;
    min-height: 300px;
    position: relative;
}
.container > div {
    position: absolute;
}
.left, .right {
    width: 60px;
    height: 100%;
}
.main {
    width: calc(100% - 120px);
    height: 100%;
    left: 60px;
}
.left {
    left: 0;
}
.right {
    right: 0;
}Copy the code

Streaming layout vs. responsive layout

4. CSS priority algorithm

• Element selector: 1
• Class selector: 10
• Id selector: 100
• Element tag: 1000

1. ! importantThe declared style has the highest precedence and is evaluated if it conflicts.
   
   
2. If the priority is the same, the style that appears last is selected.
   
   
3. Inherited styles have the lowest priority.
   
   

Five, CSS3 new pseudo class has those?

• P :first-of-type Selects the first element belonging to its parent element
• P :last-of-type Selects the last element belonging to its parent element
• P :only of type Selects an element that is unique to its parent element
• P :only-child Selects the only child element belonging to its parent element
• P :nth-child(2) selects the second child belonging to its parent
• :enabled :disabled Indicates that the form control is disabled.
• : Checked check boxes or check boxes are selected.

CSS3 new features

1. RGBA and transparency

2. background-image background-origin(content-box/padding-box/border-box) background-size background-repeat

3. Word-wrap (wrap long, indivisible words) word-wrap: break-word

4. Text-shadow: 5px 5px 5px #FF0000; (Horizontal shadow, vertical shadow, Blur distance, shadow color)

5. Font -face property: Define your own font

6. Rounded Corner (border radius) : The border-radius property is used to create rounded corners

7. Border image: border-image: url(border-.png) 30 30 round

8. Box shadow: box-shadow: 10px 10px 5px #888888

9. Media query: Defines two sets of CSS with different properties when the browser size changes

What are the methods of CSS optimization and performance improvement?

1. Avoid over-constraining

2. Avoid descendant selectors

3. Avoid chain selectors

4. Use compact syntax

5. Avoid unnecessary namespaces

6. Avoid unnecessary repetition

7. It is best to use semantic names. A good class name describes what it is, not what it looks like

8. Avoid!!! Important, you can select other selectors

9. Simplify rules as much as possible. You can combine duplicate rules from different classes

CSS animation

CSS’s transform, Transition and animation are separated into three parts. Transfrom mainly controls the deformation of elements without the concept of time control, while Transition and animation are the parts of animation. They can control the effect of an element switching between two or more states at a time.

1.transition

The transition properties:

• Transition-delay How long to delay the animation

• Transition-duration Specifies the duration of a transition animation

• Transition-property performs the corresponding properties of the animation, such as color, background, etc. You can use all to specify all properties

• Transition-timing-function Computes the trajectory of the animation over time. Common examples are Linear, ease, ease-in, ease-out, cubic- Bezier (…). And so on.

Transition related events

The transitionEnd event is emitted when the Transition animation ends. Usually we perform some method after the animation, such as moving on to the next animation effect or something. Animation methods in Zepto.js are handled using CSS animation properties, and the callback after the animation runs should be handled using this event.

2.animation

Although Transition already provides great animation effects, we can only control the transition from one state to another, not multiple states. Animation helps us achieve this. The premise of using animation is that we need to use @keyframes to define an animation effect. The rules defined by @keyframes can be used to control the various states in the animation process. The syntax is basically like this:

@keyframes W { from { left: 0; top: 0; } to { left: 100%; top: 100%; }}Copy the code

The @keyframes keyword is followed by the name of the animation, followed by a block that contains the various selectors for the animation progress. The blocks behind the selectors are still the various CSS style properties we see all the time.

Animation attributes:

• Animation-name Specifies the @keyframes name of the animation effect you want.

• Animation-delay Is the same as transition-delay.

• Animtaion-duration, like transition-duration, is the duration of the animation.

• Animation-direction Controls one direction of an animation. The default is normal, and if the above left ranges from 0% to 100%, the default is left to right. If the value is reverse, it goes from right to left

Since the animation provides control over the loop, there are also alternate and alternate-reverse values, which will reverse the animation direction at the beginning of each loop, albeit in a different starting direction.

Animation related events

Several states of the animation can be listened to by binding events:

• Animationstart the animationstart event, if delayed, will not be triggered until the animation actually starts, if not delayed, this event will be triggered when the animation effect is applied to the element.

• Animationend The event at which the animation ends, similar to transitionEnd. If there are multiple animations, this event will fire multiple times, as in the example above, this event will fire three times. If animation-rotund-count is set to infinite, this event will not be emitted.

• Animationiteration An animation cycles an end-of-life event. Unlike the previous event, this event is triggered at the end of each iteration instead of at the end of the entire animation. In an infinite loop, this event will fire indefinitely unless duration is 0

Nine, landing the

BFC stands for Block Formatting Context. It is a concept defined by the CSS2.1 specification regarding CSS rendering positioning. To understand what the BFC really is, let’s first look at what a visual formatting model is.

Overflow :hidden, float:left/right, position:absolute That is, each time you see these attributes, you represent the element and create a BFC.

The BFC is a separate container on the page, and the child elements inside the container do not affect the outside elements and vice versa. We can do a lot with this feature of the BFC.

Flex layout

The basic concept

Elements with a Flex layout are called Flex containers, or “containers” for short. All of its child elements automatically become container members and are called Flex items, or “items.”

The container has two axes by default: a horizontal main axis and a vertical cross axis. The starting position of the spindle (where it intersects with the border) is called main start and the ending position is called main end; The starting position of the intersecting axis is called cross start and the ending position is called cross end.

By default, items are arranged along the main axis. The main axis space occupied by a single project is called main size, and the cross axis space occupied is called cross size.

Container properties:

1. Flex-direction: property determines the direction of the main axis (i.e. the alignment of items)

3. Flex-flow: short form of flex-direction and flex-wrap properties

4. Justify -content: Defines the alignment of items on the main axis

• Flex-start (default) : left-aligned
• Flex-end: right-aligned
• Center: a center
• Space-between: both ends are aligned with equal intervals between items.
• Space-around: Equal spacing on both sides of each item. As a result, the spacing between items is twice as large as the spacing between items and the border.

5. Align -items: Define how items are aligned on the cross axis

• Flex-start: Alignment of the starting point of the cross axes.
• Flex-end: alignment of ends of crossed axes.
• Center: Alignment of the midpoint of the cross axis.
• Baseline: The baseline alignment of the first line of text of the project.
• Stretch (default) : If the height is not set or auto is set, the project will occupy the entire height of the container.

6. Align-content: Defines the alignment of multiple axes. This property has no effect if the project has only one axis

• Flex-start: align with the starting point of the cross axis.
• Flex-end: aligns with the end of the cross axis.
• Center: aligns with the midpoint of the intersecting axis.
• Space-between: aligned with both ends of the intersecting axes, with evenly distributed spacing between axes.
• Space-around: The spacing on both sides of each axis is equal. Therefore, the spacing between axes is twice as large as the spacing between axes and borders.
• Stretch (default) : Axis takes up the entire cross axis.

Project attributes

1. The order attribute defines the order of items. The smaller the value is, the more advanced it is. The default value is 0.
2. The Flex-shrink attribute defines the scale by which a project shrinks. The default is 1, that is, if there is insufficient space, the project shrinks.
3. The Flex-basis property defines the main size of the project before allocating extra space.
4. The flex attribute is short for flex-grow, flex-shrink, and flex-basis. The default value is 0 1 Auto.
5. The align-self property allows a single item to have a different alignment than other items, overriding the align-items property.

This property may take six values, all identical to the align-items property except auto.

Summary of Grid layout

Grid layout is a new layout in CSS that has strong control over the location and size of boxes and box contents. Unlike Flex, which focuses on a single axis, grid ADAPTS to multiple axes, so here’s a brief introduction.

The basic concept

Container attribute

Twelve, box – sizing

Hardware acceleration

Sometimes animations can cause the user’s computer to stall, and you can avoid this problem by using hardware acceleration in certain elements:

.block {
    transform: translateZ(0);
}
Copy the code

You won’t notice a difference, but browsers do 3D hardware acceleration for this element, which is useful until the special will-change attribute is fully supported.

(Continuously updated…)

reference

Talk about CSS3 length units (VH, VW, REM)

CSS classic layout – The Holy Grail layout

In-depth understanding of BFC

Flex layout tutorial: Syntax

, etc.