CSS

what ? Rem and VW, DPR

• Rem: Unit of font size relative to the root element for calculation
• Vw relative to the width of the window: 1vw is 1% of the window.innerWidth
• Device Pixel Ratio (DPR) is the ratio of physical pixels to individual pixels on the device

Font-size :14px; font-size:.875rem; }

Introduce the CSS box model

CSS, box model is divided into content, padding, border, margin four parts, and there are two kinds of box model, through box-sizing switch:

When set to content-box, it belongs to the standard box model. When set to width and height, only content is included, excluding padding and border. When set to border-box, it belongs to the IE box model. When set to width and height, content, padding and border are included.

How does the selector parse

The style system starts with the key selector and looks left for the ancestor elements of the rule selector, discarding the rule if there is no match, or moving left until the match is complete. Therefore, when writing styles, try to choose ID or class selectors as the key selectors, and reduce the style hierarchy, reduce consumption.

Selector priority

• @important has the highest weight, and important overrides important
• The inline style weight is 1000
• The ID selector weight is 0100
• Class selector, pseudo class selector, property selector weight 0010
• Element selectors and pseudo-element selectors have weights of 0001
• Wildcard > Inheritance > Browser default

The difference between pseudo-classes and pseudo-elements

• The pseudo-class is represented by a single colon. When an element is in a certain state, a style is added to the element, such as the hover of a tag.
• Pseudo-elements are represented by double colons, or sometimes single colons for compatibility with older browsers. The effect is == to create an element == that is not in the text stream and to style it, such as ::before, before the specified element.

Have you used flex layouts

• A Flex layout is an alternative to a floating layout. There are two main concepts in flex layout: containers and axes.
• The axis is divided into main axis and cross axis perpendicular to the main axis, which can be switched by flex-direction
• Then there is the container. The elastic box area is the container. Set the display of the container to Flex, and the elements inside become individual items, forming a Flex layout. Align-items controls how items are arranged on the cross axis, and flex-wrap controls how items are wrapped. For projects, you can use Flex-grow to control the scaling, Flex-shrink to control the scaling, and order to control the ordering of projects

Tell me the landing

BFC refers to formatting context. When an element forms a BFC, the layout of its internal elements does not affect the external elements, and the layout of the external elements does not affect the internal elements. It can be used to clear floats and solve problems such as margin overlap. The BFC is created for root elements, float elements, absolutely positioned elements, inline block elements, table class elements, and overflow non-visible elements.

Talk about clearing floats

Floating elements will cause the height collapse of the parent element and affect the layout, which can be solved in two ways:

Set the parent element to BFC, usually using overflow: hidden, the disadvantage is that element overflow will crop; Use the clear attribute, which prevents elements from being affected by floating elements and can be set as follows:

• Add empty elements with the disadvantage of adding no semantic tags

// single pseudo-element. Clearfix ::after {content: "; display: table; // Clear only works on block level elements. } .clearfix { *zoom: 1; .clearfix::before,.clearfix::after {content: "; display: table; } .clearfix::after { clear: both; } .clearfix { *zoom: 1; }Copy the code

Why zoom

The Zoom property is unique to Internet Explorer and is used to set or retrieve the zoom scale of an object. Setting this element triggers the HasLayout property, which, when true, is responsible for sizing and positioning the object itself and its child elements. At this point, the element expands and shrinks, recalculating the height, and resolving the height collapse problem.

What positioning is used

1. In relative positioning, the position of the element is set as relative. The element is positioned relative to its content box and still occupies the original position space.
2. Absolute position: Set the position of the element to absolute. The element is positioned relative to the padding box of the ancestor element whose position is not static. The element does not occupy the original position space.
3. Fixed position, set the element’s position to fixed, the element is positioned relative to the top of the browser window and does not occupy the original position.

How to solve the margin overlap

• The adjacent siblings margin-bottom and margin-top overlap.You can set one of them to BFC;
• Margin-top overlap of parent and child elements. You can add a border to the parent element – top | padding – top to separate elements, father and son can also be set for landing the parent element;
• The height of the parent element is auto, and the parent element is margin-bottom overlapping. In the solution of the second case, you can also set height, min-height, max-height to the parent element.
• No content element itself margin-top overlaps margin-bottom. Can be set to element border | padding | height

Why is there a gap between Li and Li? How to solve it

Li is inline elements, the browser will return | | Spaces between the inline elements TAB rendering for space, so the gap will be unable to select. Solution:

Write in the same line, because it is not beautiful, do not use; Left float, but swiper cannot be applied; Margin negative, the last element will have more negative margin, not suitable for large-scale use; To parent font size – is set to 0, but will need to li, the font – szie reset, and safari still have blank set negative word – spacing | letter spacing, and the character spacing within the li | text spacing is set to the default, It’s perfect at the moment.

Draw triangles with CSS

• The principle is to use the border of the bisect principle

.triangle {
  width: 0;
  height: 0;
  border-width: 100px;
  border-style: solid;
  border-color: tomato transparent transparent transparent;
}

Copy the code

Link hover failure after click

• The four pseudo-elements of a label have rules before and after, and the hover should be placed after visited, so it is ok to exchange the position of the two.

Implement single – and multi-line text overflow to add ellipsis

// line: p {overflow: hideen; text-overflow: ellipsis; white-space: nowrap; } p {position: relative; overflow: hidden; /* height/line-height */ height: 3em; The line - height: 1.5 rem; } p::after { content: '... '; position: absolute; bottom: 0; right: 0; background-color: #fff; }Copy the code

What are the different ways elements are hidden

plan	Occupy the space	Bind listening events
overflow: hidden	is	no
display: none	no	no
visibility: hidden	is	no
Opacity: 0	is	is
Positioning moves an element to a visible area, relative positioning, absolute positioning	no	no
Z – index negative	is	no
transform: scale(0, 0)	is	no

Why do I reset the style? Why don’t I reset the wildcard

Modern browsers style themselves, and in order to render the same style on the browser, the style needs to be reset.

Using wildcard resets is simple, but it overwrites some of the browser’s own valuable styles, and it requires traversing all the tabs. When a site is large and has many tabs, this can add a lot of overhead.

How to make Chrome display fonts below 12px

Chrome renders 12px and below to 12px by default. The solution is:

• Use its own property: -webkit-text-size-adjust: None, invalid in higher versions of Chrome
• Take the scale attribute: -webkit-transform: scale(0.5) and set the element to the block level element
• The use of pictures does not affect compatibility and aesthetics

TODO:Achieve a two-column layout

<div class="container">
  <div class="left">left</div>
  <div class="right">right</div>
</div>

Copy the code

Floating and landing

.container {
  overflow: hidden;
  *zoom: 1;
}
.left {
  float: left;
  margin-right: 20px;
}
.right {
  overflow: hidden;
  *zoom: 1;
}

Copy the code

flex

• Implementation: Flex: 1 has the ability to fill up the remaining space

.container {
  display: flex;
}
.right {
  margin-left: 20px;
  flex: 1;
}

Copy the code

The holy grail layout

• Features: Middle part written in the front, priority loading
• Implementation:
• Center width is set to 100% for self-adaptation
• Float center, left, and right. Add negative values for left and right so that all three are on the same line
• Add left and right inner margins to the parent container to make room for both sides
• Left, right set relative positioning, move to both sides

<div class="container"> <div class="center fl">center</div> <div class="left fl">left</div> <div class="right fl">right</div> </div> .container { padding: 0 200px; }. Fl {float: left}. Center {width: 100%; // Take up all the width of the container. background-color: cyan; } .left, .right { position: relative; width: 220px; height: 400px; } .left { margin-left: -100%; // Negative values return left to center left: -220px; Background-color: pink; } .right { margin-left: -220px; right: -200px; background-color: brown; }Copy the code

• Disadvantages:
• The relative positioning of left will still occupy center space, and if center is smaller than left, the left will drop to the next row
• One column is too long, and the background for the other two columns is not automatically filled in

Twin wing layout

• Features: Compared to the Holy Grail layout, one more layer of structure is implemented:

<div class="container"> <div class="center fl"> <div class="content"></div> </div> <div class="left fl"> <div class="right fl"></div> </div> .container { min-width: 660px; }. Fl {float: left; float: left; float: left; float: left; float: left; } .center { width: 100%; Height: 500 px; background-color: cyan; } .content { margin: 0 220px; }. Left,. Right {width: 220px; height: 400px; } .left { margin-left: -100%; background-color: pink; } .right { margin-right: -220px; background-color: brown; }Copy the code

Compare the two layouts

The similarity is to achieve the effect of rendering important parts first, but the difference is that the two-wing layout solves the problem that the left side of the Grail layout might fall off, but it has an extra layer of DOM nodes.

Achieve multi-column contour layout

• Features: the child elements in the parent element of the same height layout, implementation scheme is as follows:

Positive padding works against negative margin

• Implementation: Based on the holy Grail layout, add positive padding-bottom and negative margin-bottom values to the child element, and set overflow trim on the parent element

.center,
.left,
.right {
  padding-bottom: 9999px;
  margin-bottom: -9999px;
}
.container {
  overflow: hidden;
}

Copy the code

• Advantages:
• Fixed grail layout where one column is too long and the other two columns do not automatically fill in the background
• Simple structure and strong compatibility
• Cons: Overflows can be cut

Using background images

• Implementation: Tiled vertically with pictures
• Advantages: simple method, strong compatibility
• Disadvantages: Not suitable for fluid layout

Using the border

• Implementation: Left add width equal to right border, right add value equal to left width margin-left

Have known what kinds of pictures

species	volume	The characteristics of	scenario
BMP	larger	nondestructive	Ordinary images
GIF	smaller	Support for animation and transparency	The dynamic image
JPEG	Is larger than the GIF	colorful	photo
PNG-8	Smaller than the GIF	Does not support animation, can be transparent	Non-moving picture
PNG-24	tiny	The compression	Non-moving picture
SVG	larger	Scaling without distortion	Logo and Icon
WebP	tiny	Compatibility is poor	Ordinary images
base64	larger	String encoding	Do not send HTTP requests

What are the style optimizations

1. Loading performance:

• CSS compression to reduce volume
• Reduce the use of @import, which imports styles that need to be loaded after the page is loaded. Link is recommended

2. Selector performance

• Do not use wildcard selectors and consume performance
• Select key selectors and reduce hierarchy
• ID is the key selector and does not require additional layers on the left
• Replace element selectors with class selectors

3. Rendering performance:

• Reduce the use of floating, positioning
• Elimination control rule
• Use Sprite to reduce the number of requests
• Inheritance properties are not specified twice
• Do not nest more than three selectors

4. Out of style

• Separate styles from the same attributes and consolidate them into the same class to improve maintainability
• Style and structure are separated and introduced externally

A little bit about backflow and redraw

Backflow: Backflow occurs when changes to the DOM structure cause the DOM geometry to change. Process: Since the structure of the DOM has changed, it is necessary to start from the DOM generation step, through the style calculation, layout tree generation, layer tree creation, and then to generate the drawing list and the display display of the entire rendering process, which is very expensive. Redraw: Redraw occurs when DOM changes result in style changes that do not affect geometry properties. Process: Since there is no change in DOM geometry, the location information of elements does not need to be updated. Therefore, when redrawing occurs, the stage of survival layout tree and layer tree establishment will be skipped, and the drawing list will be directly generated, and then the following series of operations such as partition and bitmap generation will continue.Copy the code