Review the old to learn new CSS

BFC: Block Formatting Context

BFC layout rules

The internal boxes are placed vertically, one after the other
The vertical distance of the Box is determined by margin. Margins of two adjacent boxes belonging to the same BFC will overlap
The left side of the margin box of each box (block box and row box) touches the left side of the border box containing the block, even if there is a float
The region of the BFC does not overlap with the float box
A BFC is a separate container on a page, and the child elements inside the container do not affect the outside elements. And vice versa
When calculating the height of the BFC, floating elements are also involved

How do I create a BFC

Root element or any other element that contains it
Float element (float of element is not None)
Absolute positioning element (element with position as absolute or fixed)
Inline block (element hasdisplay: inline-block)
Table cells (elements havedisplay: table-cell, default HTML table cell properties)
Table title (element hasdisplay: table-caption, HTML table title default property)
Block elements with overflow and values that are not visible
Flexible box (Flex or inline-Flex)
display: flow-root
column-span: all

Landing the role of

Use BFC to avoid margin overlap
Adaptive two-column layout
Remove the floating

2. CSS3 is widely used

Transition: To make the movement more fluid

Transition: CSS properties, time spent, effect curve (default ease), delay time (default 0);Copy the code

Transition _animation-timing-function_

value	describe
linear	Specifies the transition effect from beginning to end at the same speed (equal to cubic-bezier(0,0,1,1)).
ease	Define the transition effect of slow start, then fast, then slow finish (cubic- Bezier (0.25,0.1,0.25,1)).
ease-in	Specifies the transition effect starting at a slow speed (equal to cubic-bezier(0.42,0,1,1)).
ease-out	Specifies the transition effect ending at a slow speed (equal to cubic-bezier(0,0,0.58,1)).
ease-in-out	Specify the transition effect with slow start and finish (equal to cubic-bezier(0.42,0,0.58,1)).
cubic-bezier(_n_,_n_,_n_,_n_)	Define your own values in the Cubic – Bezier function. Possible values are between 0 and 1.

Animation: To achieve action interaction

animation: name duration timing-function delay iteration-count direction;
Copy the code

value	describe
_ [animation – name] (https://www.w3school.com.cn/cssref/pr_animation-name.asp “CSS 3 animation – the name attribute”) _	Specifies the name of the KeyFrame to bind to the selector.
_ [animation – duration] (https://www.w3school.com.cn/cssref/pr_animation-duration.asp “CSS 3 animation – duration attribute”) _	Specifies the time, in seconds or milliseconds, to complete the animation.
_[animation-timing-function](https://www.w3school.com.cn/cssref/pr_animation-timing-function.asp “CSS3 Animation – timing – function properties “) _	Specifies the speed curve of the animation. (Same as rules of transition)
_ [animation – delay] (https://www.w3school.com.cn/cssref/pr_animation-delay.asp “CSS 3 animation – delay attribute”) _	Specifies the delay before the animation begins.
_[animation-iteration-count](https://www.w3school.com.cn/cssref/pr_animation-iteration-count.asp “CSS3 Animation – iteration – count property “) _	Specifies how many times an animation should play.
_ [animation – direction] (https://www.w3school.com.cn/cssref/pr_animation-direction.asp “CSS 3 animation – the direction attribute”) _	Specifies whether the animation should take turns playing backwards.

CSS 3 @ keyframes rules

To create animations in CSS3, you need to learn the @Keyframes rule.

The @keyFrames rule is used to create animations. By specifying a CSS style in @KeyFrames, you can create an animation that changes gradually from the current style to the new style.

Internet Explorer 10, Firefox, and Opera support the @KeyFrames rule and animation property.

Chrome and Safari require the prefix -webkit-.

Note: Internet Explorer 9, and earlier versions, do not support the @KeyFrame rule or animation property.

@keyframes myfirst { from {background: red; } to {background: yellow; } } @-moz-keyframes myfirst /* Firefox */ { from {background: red; } to {background: yellow; }} @-webkit-keyframes myfirst /* Chrome */ {from {background: red; } to {background: yellow; } } @-o-keyframes myfirst /* Opera */ { from {background: red; } to {background: yellow; }}Copy the code

For optimal browser support, you can also always define 0% and 100% selectors.

@keyframes myfirst { 0% {background: red; left:0px; top:0px; } 25% {background: yellow; left:200px; top:0px; } 50% {background: blue; left:200px; top:200px; } 75% {background: green; left:0px; top:200px; } 100% {background: red; left:0px; top:0px; }}Copy the code

To keep the CSS animation on the last frame, add it directly

animation-fill-mode: forwards;
Copy the code

shadow

Box-shadow: horizontal shadow position Vertical shadow position blur distance Shadow size shadow color Shadow direction of shadow (default is from inside out, inset is from outside in)Copy the code

The shadow effect I usually use

Box-shadow: 0px 0px 20px 0px Rgba (0, 0, 0, 0.1);Copy the code

Border with rounded corners

border-radius: n1, n2, n3, n4; The radians of the four angles, you can also fill in oneCopy the code

3, link and @import comparison

Link is imported from HTML and @import is imported from CSS
Link loads CSS synchronously in the browser load page; Load the @import CSS after the page is loaded
Priority Link > @import
@import is a syntax added by css2.1, which can be recognized only by IE5+. Link has no compatibility problems

4. How many ways are there to center a block level element horizontally? What are they?

Horizontally centered:

Select the element using the selector,

Margin :auto;

2. Set the relative position of the parent element and the child element position: absolute. Left: 50%; At the same time, the margin-left value is -(half the width of the child element), because the top value is set relative to the left of the box, so to center the box, we need to move the width of the box up by half.

3. Add display:flex to parent element; justify-contet:center;

Vertically centered:

1. Add display:flex to parent element; aiign-items:center;

2. Set the relative position of the parent element and the child element position: absolute. top: 50%; Meanwhile, the margin-top value is -(half of the height of the child element). Since the top value is set relative to the top of the box, the center can only be achieved by moving half the height of the box upwards.

3. This method is similar to the first method, set display:flex in the parent container; Align-self: center;

4. Add a child element to the parent container, and set its height to half of the height of the box. In effect, set a hidden block element, and “squeeze” the block element that is actually displayed into the vertical center;

5. Set the parent element to relative position and the child element to absolute position. Set the top,bottom,left and right values of the child element to 0. This enables vertical + horizontal centering of block elements

6. Set the parent container to display: table-cell. vertical-align: middle;

5. The CSS hides the scroll bar on the mobile phone

To hide scrollbars, apply the following CSS:

.element::-webkit-scrollbar {display:none}
Copy the code

6. CSS controls the text and displays ellipses beyond the part

If you implement a single line of text that overflows to display ellipses, you probably know how to use text-overflow:ellipsis. Of course, you also need to add width to allow partial browsing.

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
Copy the code

But this property only supports single line text overflow ellipsis display, if we want to implement multi-line text overflow ellipsis display. Next, focus on the multiline text overflow display ellipsis, as follows.

Implementation method 1:

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
Copy the code

Application scope: This method is applicable to WebKit browsers and mobile terminals because WebKit CSS extension attributes are used.

Note:

-webkit-line-clamp is used to limit the number of lines of text displayed on a block element. To achieve this effect, it needs to combine the other WebKit properties. Common combination attributes:
display: -webkit-box; Properties that must be combined to display the object as an elastic stretchable box model.
-webkit-box-orient Specifies the attribute that must be attached to set or retrieve the arrangement of child elements of a flex box object.

Implementation method two:

p{position: relative; line-height: 20px; max-height: 40px; overflow: hidden; } p::after{content: "..." ; position: absolute; bottom: 0; right: 0; padding-left: 40px; background: -webkit-linear-gradient(left, transparent, #fff 55%); background: -o-linear-gradient(right, transparent, #fff 55%); background: -moz-linear-gradient(right, transparent, #fff 55%); background: linear-gradient(to right, transparent, #fff 55%); }Copy the code

Scope of application: This method is applicable to a wide range, but the text does not exceed the line will also appear ellipsis, can be combined with JS optimization method.