1. New features of CSS3

Implement rounded corners (border-radius)

Box-shadow

Text-shadow

Linear gradient

Transform

Media query, multi – column layout

2. The difference between link and @import in CSS

Link is an HTML tag, while @import is provided by CSS.

When the page is loaded, link is loaded at the same time, and the CSS referenced by @import waits until the page is loaded. Import can only be identified in IE5 or above, while link is an HTML tag, which has no compatibility problems.

Link style has a higher weight than @import.

3. Introduce the CSS box model

In theory, there are four boxes: Content Box, padding Box, border Box, and Margin Box. In fact, the padding-box was only supported by Firefox, and now it is not supported. Margin Box is even worse

Calculation method:

Content box: width of box model = width of content border box: width of box model = width of content + padding + borderCopy the code

CSS Switchover mode

Box-sizing can be set, content-box for standard model, border-box for IE modelCopy the code

4. What are CSS selectors?

selector

1. Id selector (# myID)

2. Class selector (.myClassName)

3. Tag selector (div, H1, P)

4. Adjacent selector (H1 + P)

5. Subselector (UL > LI)

6. Descendant selector (Li A)

7. Wildcard selector (*)

8. Attribute selector (a[rel = “external”])

9. Pseudoclass selector (A: hover, Li :nth-child)

*5. Which attributes can be inherited?

inheritance

  1. Font-size font-size -family color, text-indent;

  2. Non-inheritable style: border padding margin width height;

6, CSS3 new pseudo class has those?

P :first-of-type Selects the first element belonging to its parent element

Elements.

P :last-of-type selects the last element belonging to its parent element

Elements.

P :only-of-type Selects the value that is unique to its parent element

Elements.

P :only-child Selects each of the unique child elements that belong to its parent element

Elements.

P :nth-child(2) selects each of the second child elements belonging to its parent

Elements.

:enabled :disabled Controls the disabling status of form controls.

: Checked check boxes or check boxes are selected.

7. How to calculate the priority algorithm?

Priority algorithm rules: Priority nearest principle, under the case of the same weight, the nearest style definition shall prevail;

! important > id > class > tag

Important has a higher priority than inline, but inline is higher than ID

8. Why clear the float? How to clear?

Problems caused:

(1) The height of the parent element cannot be separated, affecting elements at the same level as the parent element

(2) Non-floating elements at the same level as floating elements follow

(3) If the first element is not floating, then the elements before the element need to float, otherwise it will affect the structure of the page display

Solutions:

① Use clear to clear the float

.son {        
    clear: left | right | both | auto   
}Copy the code

② Add an extra tag after the parent element

<div class="parent">... <div style="clear:both;"></div>
</div>Copy the code

③ Use after pseudo-class on parent element

#parent:after {    
    content: ' ';   
    clear: both;    
    height: 0;    
    display: block;
}Copy the code

④ Use overflow to clear float

#parent {    
    overflow: auto;    
    display: inline-block;
}Copy the code

9. Several methods to achieve vertical centralization

<div class="parent">    
    <div class="son"></div>
</div>Copy the code

(1) margin: auto

.parent { width: 400px; height: 400px; position: relative; .son { position: absoulte; left: 0; right: 0; top: 0; bottom: 0; margin: auto; }}Copy the code

Margin-left, margin-top negative value method (need to know the child element width, height)

.parent { width: 400px; height: 400px; position: relative; .son { position: absolute; width: 100px; height: 160px; left: 50%; top: 50%; //margin-top: translateY(-50%); //margin-left: translateX(-50%); margin-top: -80px; margin-left: -50px; }}Copy the code

(3) the flex layout

.parent{    
    display: flex;    
    align-items: center;    
    justify-content: center;
}Copy the code

④ table-cell(Not separated from document flow)

.parent {    
    display: table-cell;    
    vertical-align: middle;    
    text-align: center;
}Copy the code

10, CSS preprocessor (SASS/LESS/Stylus/PostCSS)

These are CSS-like languages that webpack compilation can turn into browser-readable CSS and give CSS more power. Common functions:

File splitting: Cut large files into smaller files for easy maintenance

Selector nesting: It is easier to see the hierarchy

Variable: Easier to unify the visual style, easy to replace the overall style

Looping statements

11. Know which CSS animations to animate

Transition -- Transition: Property duration timing-function delay; Animation: keyframe-name duration timing-function delay iteration-count direction; Transform -- Static attribute functions such as Translate, scale, rotate, skew, opacity, etcCopy the code

12. Principles of REM layout

Concept:

Em: Units relative to the parent element

Rem: A relative unit of CSS, a unit of size relative to the HTML root element, which is essentially proportional scaling.

Vw, VH: Screen width /100, screen height /100

Principle:

They are generally width-based, dividing the screen width into 100 pieces and converting to a percentage layout. But Google Chrome supports a minimum font size of 12px, so you can divide the screen into 10 parts to calculate.

Set the font size of HTML elements = screen width / 100

document.documentElement.style.fontSize = document.documentElement.clientWidth / 100 + 'px';Copy the code

Edit the preprocessing function according to the size of the design drawing

$ue-width: 640; /* The width of the ue graph */ @function px2rem($px) {@return #{$px/$ue-width*100}rem;
}

p {  
    width: px2rem(100);
}Copy the code

13. What are the values of display? Explain their role?

Inline (default) -- Inline None Hide block-- Block display table-- table display list-item-- List of items inline-block row block levelCopy the code

14. The value of position?

Static (default) : Arranges documents according to normal document flow; Relative: does not leave the document flow, refers to its static position by top, bottom, left, right; Absolute: The reference to the nearest non-static parent element is located with top, bottom, left, and right; Fixed: A fixed reference to the viewable window. * * * *Copy the code

15. What is the principle behind creating a triangle with pure CSS?

width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid #ff0000;Copy the code

Common compatibility issues

Margin and padding are different by default for different browser tags.

{margin:0; padding:0; }Copy the code

IE6 double margin bug: After the block property tag float, margin is displayed in IE6 larger than the set margin.

display:inline; Convert it to an inline property.Copy the code

Progressive recognition, the gradual elimination of parts from the whole. First, the clever use of the “9” mark separates Internet Explorer from all situations. Then, use “+” again to separate IE8 and IE7 and IE6, so that IE8 has been independently identified.

{
    background-color:#f1ee18; / All recognition /
    .background-color:#00deff\9; /IE6, 7, 8 recognize /
    +background-color:#a200ff; /IE6, 7 recognition /
    _background-color:#1e0bd1; Identify * / / IE6
}Copy the code

Set the small height label (usually less than 10px). In IE6 and IE7, the height is higher than the set height.

Set overflow:hidden for tags out of height; Or set the line height to be less than the height you set.Copy the code

In Internet Explorer, you can obtain a custom attribute using the method of obtaining a general attribute or using getAttribute() to obtain a custom attribute. In Firefox, you can only use getAttribute() to obtain custom attributes.

Solution: Use getAttribute() to obtain custom attributes.Copy the code

In Chrome’s Chinese UI, text smaller than 12px will be forced to display at 12px by default, by adding the CSS property -webkit-text-size-adjust: None; To solve.

Hover styles no longer appear after a hyperlink is visited, and hyperlink styles visited by a click no longer have hover and active.

L-v-h-a (love hate): A :link {} A :visited {} A :hover {} A :active {}Copy the code

17, display:none and visibility: hidden?

Display: none Do not display the corresponding elements, no space is allocated in the document layout (backflow + redraw) visibility: hidden the corresponding elements, and retain the original space in the document layout (redraw)Copy the code

18. What happens when position is superimposed on display, overflow, and float?

The display attribute specifies the type of box the element should generate; The position attribute specifies the positioning type of the element; The float property is a layout that defines in which direction the element floats.

Similar to priority mechanism: position: Absolute /fixed has the highest priority, float has no effect with them, display value needs to be adjusted. Float or Absolute positioned elements, can only be block elements or tables.

19. BFC specification (Low chance of meeting in an interview)

The BFC specifies how the internal Block Box is laid out.

Positioning scheme:

The internal boxes are placed vertically, one on top of the other.

The vertical distance of Box is determined by margin, and the margins of two adjacent boxes belonging to the same BFC will overlap.

The left side of the margin box of each element touches the left side of the border box containing the block.

The region of the BFC does not overlap with the float box.

The BFC is a separate container on the page, and the child elements inside the container do not affect the outside elements.

When calculating the height of the BFC, floating elements are also involved in the calculation.

The BFC is triggered when one of the following conditions is met

The root element, which is HTML

Float is not none (default)

Overflow is not visible (default)

The display value is inline-block, table-cell, and table-caption

The value of position is absolute or fixed

20. What are the ways to optimize CSS and improve performance?

Avoid over-constraining

Avoid descendant selectors

Avoid chain selectors

Use compact syntax

Avoid unnecessary namespaces

Avoid unnecessary repetition

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

Avoid!!! Important, you can select other selectors

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

21. What is the principle of full screen scrolling? What CSS properties are used?

Principle: Similar to the rotation, the whole elements are always arranged, assuming that there are 5 full-screen pages to be displayed, then the height is 500%, and only 100% is displayed, the rest can be positioned by the Y-axis through transform, and overflow: hidden can also be realized through margin-top; Transition: all 1000ms ease;Copy the code

What’s the difference between a double colon and a single colon in ::before and :after? Explain what these two pseudo-elements do

The single colon (:) is used for CSS3 pseudo-classes, and the double colon (::) is used for CSS3 pseudo-elements. ::before is a pseudo-element defined in the presence of a child element before the body content of the element. It doesn't exist in the DOM, it exists only in the page. The pseudo-elements :before and :after are new to CSS2.1. At first, the pseudo-element prefix used a single colon syntax, but as the Web evolved, the CSS3 specification changed the pseudo-element syntax to use double colons, becoming ::before ::afterCopy the code

23. How to make the font on the page clearer and thinner with CSS?

When used, antialiased, greyscale smoothing does not work on Windows, but it does on IOS devices.

24 and the position: fixed; How to deal with invalid under Android?

<meta name="viewport" content="Width =device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>Copy the code

25, display:inline-block when a gap is displayed?

Font-size :0; letter-spacing :0; word-spacing: spacing

26, What is the difference between the style tag after and before the body?

Page loading from top to bottom is, of course, style loading first.

Since the browser parses the HTML document line by line, parsing to the style sheet written at the end (either inline or in the style tag) causes the browser to stop rendering, wait to load and re-render after parsing the style sheet. In IE on Windows, you can get FOUC (page flicker caused by style failure)

The OVERFLOW property defines what happens to the content of the overflow element content area.

If the parameter is scroll, the scroll bar must appear.

The scroll bar appears when the child element is larger than the parent element when the parameter is auto.

If the argument is visible, the overflow appears outside the parent element.

Overflow hide when parameter is hidden.

28, describe CSS Sprites

Include all images involved in a page into a large image, and then use the combination of BACKground-image, background-repeat and background-position of CSS to locate the background. Using CSS Sprites can well reduce the HTTP request of the web page, thus greatly improving the performance of the page; CSS Sprites can reduce the number of bytes in an image.

What is the difference between rGBA and opacity?

Opacity is inherited from the parent element, while any descendant element of an RGBA set element does not inherit opacity. Opacity applies to any element and its contents

Rgba is superior to opacity, of course, as long as it is related to color, it can be set using RGBA.