Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

preface

Read the article and maybe the next offer will be yours. 💕

CSS review in general on the basis of one side, because of THE CSS is always a pity to die.

So sort out a list of factory CSS interview questions (their own experience + online factory face), to help me and everyone to deal with the future at a point in time. If we encounter new questions, we will keep updating them.

Each question is a summary of several articles, and has been verified and confirmed, but there is always a omission, if there is any question, please call me in the comments section.

The title

What is the difference between link and import?

  1. Link is a tag provided by HTML that can not only load CSS files, but also define RSS, rel connection properties, and so on. Import is a syntax rule provided by the CSS. Only the CSS can be loaded.
  2. In link mode, HTML loads CSS with the HTML body. With import, it waits until the entire HTML is loaded.
  3. Link Has no compatibility problem. Import CSS2.1 has compatibility issues (IE5-).
  4. JS controls the link tag, but not the import.

CSS preprocessing?

CSS preprocessors, do you still just nest?

How does PX convert REM? How does PX convert to VW?

Px to REM, do you still count?

Why do I initialize CSS styles

To ensure that pages in different browsers remain the same, taobao style initialization is as follows.

body.h1.h2.h3.h4.h5.h6, hr, p.blockquote.dl.dt.dd.ul.ol.li, pre, form.fieldset.legend.button.input.textarea.th.td { margin:0; padding:0; }
body.button.input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
h1.h2.h3.h4.h5.h6{ font-size:100%; }
address.cite.dfn.em.var { font-style:normal; }
code.kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul.ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:# 000; }
fieldset.img { border:0; }
button.input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }


Copy the code

The difference between normalize.css and reset.css

Reset.css resets all browser styles to maintain consistency. Normalize.css is to retain useful browser default styles, reset the reset style, and be more generic; Some bug fixes were also made.

CSS pixel, device pixel, DPR, PPI

CSS pixel: a virtual pixel in CSS logic, in px, with a value relative to the device pixel. Device pixel: physical screen pixel, fixed after factory, unit pt. DPR: device pixel/CSS pixel. PPI: Pixel value per inch, pixel density.

The difference between rearrangement and redrawing?

Redrawing does not necessarily lead to rearrangement, but rearrangement does lead to redrawing.

Rearrangement: Rearrangement is also called backflow. When a DOM change affects the element’s geometry (position + size), the browser needs to recalculate the element’s geometry to place it in the correct position on the interface. This process is called rearrangement.

Factors causing rearrangement:

  1. Initial page rendering (most expensive rearrangement)
  2. Add/remove visible DOM elements
  3. Change element position, size, content, font size.
  4. Change the window size.
  5. Enable CSS pseudo-classes.
  6. Set the style property.
  7. Query certain attributes, such as offsetWidth and offsetHeight.

Redraw: When the appearance of an element has changed, but the layout has not changed, redraw the appearance content of the element and weigh it.

Factors:

  1. Color, border-style, visibility, background, etc.

You might also say display and visibility, right? Display triggers rearrangement, visibility triggers redraw.

Flex: 1

Here’s what all the Flex abbreviations mean.

Flex: initial === flex: 0 1 auto, default. Flex: 1 === flex: 1 0% Flex: auto === flex: 1 1 auto, suitable for dynamic content adaptation space layout. Flex: 100px === flex: 1 1 100px Flex: 0 === flex: 0 0 0%, suitable for less scenarios, can be used for some replacement elements, such as pictures, etc. Flex: None === flex: 0 0 auto applies to non-newline content fixed small controls such as buttons.

Parameter 1: represents flex-grow and, if there is spare space, defines the enlargement ratio of the element. Parameter 2: represents flex-shrink and, if space is insufficient, defines the shrinking percentage of the element. Parameter 3: Represents flex-basis and defines the size of the element itself.

What do you know about grid layouts?

Typical learn to forget 🤦♂️, there is no popularity of the main compatibility problem. Zhang Xinxu ruan Yifeng

CSS box model

There are two types of CSS box models: standard model and IE box model.

Standard model: Includes content, padding, border, and Margin, and content does not include other parts. IE box model: also includes content, padding, border, margin, content includes border and padding.

Standard model: box-sizing: border-box; Box-sizing: content-box;

Does the BFC understand? And the IFC?

BFC Block Formatting Context Block Formatting Context.

BFC elements have the following characteristics:

  1. Are block-level elements.
  2. Is an isolated container, and the labels in the container do not affect the external labels.
  3. The vertical distance is determined by margin. The margins of two adjacent labels in the same BFC overlap.
  4. Float elements participate in height calculations.

Triggering BFC factors:

  1. The root element.
  2. Float element, float is not None.
  3. The overflow value is not visible.
  4. Display: Inline-block/table-cell/table-caption element
  5. Absolute position element, position: Absolute/fixed
  6. Elastic layout Flex, a direct child of grid layout.

It can help solve problems such as height collapse and margin overlap.

IFC Fully spelling Inline Formatting Contexts says Inline Formatting context. IFC application:

  1. Horizontally centered: When a block is horizontally centered in the environment, set it toinline-blockIt’s going to be generated in the outer layerIFCThrough thetext-alignIt can be horizontally centered.
  2. Vertical center: Create oneIFC, use one of the elements to expand the height of the parent element, and then set itvertical-align:middleOther inline elements can be centered vertically under the parent element.

What are the inheritable properties of CSS?

Inheritable property

  1. Font properties: font-size, font-family, font-weight, etc.
  2. Text properties: text-align, line-height, color, text-indent, word-spacing, letter-spacing, etc.
  3. Element visibility attribute: visibility.
  4. Cursor properties: CURSOR.
  5. Table layout properties: Caption -side, border-collapse, empty-cells.
  6. List attributes: list-style type, list-style image, list-style position.

Non-inheritable properties.

  1. display
  2. Text series attributes: vertical-align, text-decoration, text-shadow, white-space, etc.
  3. Box model attributes: Width, height, margin, padding, border, etc.
  4. Background properties: background and sub-properties background-color, background-image, etc.

How do browsers parse CSS selectors

Parsing from right to left avoids a large number of inconsistent and redundant CSS declarations.

CSS weight and Priority?

A priority is a weight assigned to a specified CSS declaration.

Weight rules:

The selector The weight
! important invincible
Inline style 1000
The ID selector 0100
Class selector, pseudo class, property selector 0010
Element selector 0001
Wildcards, relational selectors (+, >, ~), negation pseudo-classes (:not) 0000

When multiple CSS declarations have equal priority, the last declaration is applied.

Pseudo classes and pseudo elements?

Pseudo-classes: Used to add special effects to the selector. Usage: : pseudo – class – the name

pseudo-classes role
:active The element that is activated when the mouse is pressed and not released
:focus The element that gets the focus of the cursor, primarilyInput
:hover Suspended element
:link Links that have not been visited
:visited Links that have been visited
:first-child First child element
:last-child The last child element

Pseudo-element: Used to add special effects to certain selectors. Usage: : : pseudo – element – the name

pseudo-classes role
::before The element that is activated when the mouse is pressed and not released
::after The element that gets the focus of the cursor, primarilyInput
::first-letter The first letter of the text
::first-line The text first line

What new features are added to CSS3

Some selectors have been added.

The selector example Case description
element1 ~ element2 p ~ ul Select each UL element preceded by a fear element
[attribute^=value] a[src^=”https”] Select each A property whose SRC property value begins with HTTPS
[attribute$=value] a[src$=”.pdf”] Select each A attribute whose SRC attribute value ends in PDF
[attribute*=value] a[src*=”abc”] Select its SRC attribute value to contain each a attribute of ABC
:first-of-type p:first-of-type Select each p element that belongs to the first p element under the parent element
:last-of-type p:last-of-type Select each p element that belongs to the last p element under the parent element
:only-of-type p:only-of-type Select each p element that belongs to the unique P element of the parent element
:only-child p:only-child Select those belonging to the parent elementUnique child elementEach p element of the p element
:nth-child(n) p:nth-child(2) Select those belonging to the parent elementThe second child element is the p elementEach p element of phi
:nth-last-child(n) p:nth-last-child(2) Select those belonging to the parent elementThe penultimate two children are the p elementEach p element of phi
:nth-of-type(n) p:nth-of-type(2) Select each p element that belongs to the second P element of the parent element
:nth-last-of-type(n) p:nth-last-of-type(2) Select each p element that belongs to the penultimate two P elements of the parent element
:last-child p:last-child Select each p element that belongs to the last child of the parent element

Some new styles have been added.

attribute describe
border-radius Rounded corners
box-shadow shadow
border-image Picture drawing border
background-clip The background is displayed from the property value (border-box/padding-box/content-box)
background-origin Setting the background origin
background-size Resize the background
word-wrap Word break
text-overflow Text overflow setting (Clip/Ellipsis)
text-shadow Text shadow
text-decoration Text decoration
transform Elements pan, rotate, scale, and tilt

New RGBA and HSLA expressions for colors, custom FONT-face for fonts, gradients for backgrounds, Transition/Animation for animations, Flex/Grid for layouts, and media queries.

What are the position properties

static/relative/absolute/fixed/sticky

“Sticky” combines “relative” and “fixed”, indicating that when the roll reaches the threshold, it is “relative” and “fixed”.

Vertically centered layout

The vertical center layout takes different measures depending on whether the elements are negative in width and height.

<html>
  <head>
    <style>
      html.body {
        width: 100vw;
        height: 100vh;
      }
      .container {
        position: relative;
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box"></div>
    </div>
  </body>
</html>
Copy the code
  1. Absolute positioning + margin (width and height only)
.box {
  width: 50px;
  height: 50px;
  margin: auto;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: black;
}
Copy the code
  1. Absolute positioning + margin negative (width and height only)
.box {
  width: 50px;
  height: 50px;
  margin-left: -25px;
  margin-top: -25px;
  position: absolute;
  left: 50%;
  top: 50%;
  background: black;
}
Copy the code
  1. Absolute positioning + Transform (fixed width height and variable width height have the content)
.box {
  width: 50px;
  height: 50px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: black;
}
Copy the code
  1. Flex (Parent element must have width height, child element has no limit on width height)
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
.box {
  width: 50px;
  height: 50px;
  background: black;
}
Copy the code
  1. Grid (Parent element must have width, child element has no limit on width)
.container {
  display: grid;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
.box {
  width: 50px;
  height: 50px;
  background: black;
}
Copy the code
  1. Table + vertical-align
<html>
  <head>
    <style>
      html.body {
        width: 100vw;
        height: 100vh;
      }
      .container {
        display: table;
        width: 100%;
        height: 100%;
      }
      .box {
        display: table-cell;
        text-align: center;
        vertical-align: middle;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box">Multiline text multiline text multiline text multiline text multiline text multiline text multiline text multiline text</div>
    </div>
  </body>
</html>
Copy the code

Remove the floating

Adding an empty div after floating elements or adding pseudo-elements, for example, is most commonly used to solve height collapse.

div::after { display:block; // Clear only works on block elements content:""; clear:both; height:0; overflow:hidden; }Copy the code

Three column layout

A three-column layout is usually fixed at both ends and adaptive in the middle. Here are a few ways.

  1. Liquid layout

Principle: the two sides of the box float, the middle box should be placed last, left and right position arbitrary. Note: The sum of the width of the left and right sides must be less than the width of the parent container, otherwise the right side box will be squeezed into the second row.

<html>
  <head>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      html.body {
        width: 100vw;
        height: 100vh;
      }
      .container {
        width: 100%;
        height: 100%;
        overflow: hidden;
      }
      .left {
        width: 200px;
        height: 100%;
        float: left;
        background: #7474BF;
      }
      .right {
        width: 120px;
        height: 100%;
        float: right;
        background: #348AC7;
      }
      .middle {
        height: 100%;
        background: #203A43;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="left"></div>
      <div class="right"></div>
      <div class="middle"></div>
    </div>
  </body>
</html>
Copy the code
  1. Absolute positioning layout

Principle: Both sides of the box absolutely positioned, out of the document flow. Note: All child elements are also out of the document flow, resulting in poor availability and validity.

<html>
  <head>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      html.body {
        width: 100vw;
        height: 100vh;
      }
      .container {
        position: relative;
        width: 100%;
        height: 100%;
      }
      .left {
        position: absolute;
        top: 0;
        left: 0;
        width: 200px;
        height: 100%;
        background: #7474BF;
      }
      .right {
        position: absolute;
        top: 0;
        right: 0;
        width: 120px;
        height: 100%;
        background: #348AC7;
      }
      .middle {
        margin: 0 100px;
        height: 100%;
        background: #203A43;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="left"></div>
      <div class="right"></div>
      <div class="middle"></div>
    </div>
  </body>
</html>
Copy the code
  1. Elastic layout

How it works: The parent element sets Flex and the middle box sets Flex: 1. Note: Compatibility issues with IE11+

<html>
  <head>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      html.body {
        width: 100vw;
        height: 100vh;
      }
      .container {
        display: flex;
        width: 100%;
        height: 100%;
      }
      .left {
        width: 200px;
        height: 100%;
        background: #7474BF;
      }
      .right {
        width: 120px;
        height: 100%;
        background: #348AC7;
      }
      .middle {
        flex: 1;
        height: 100%;
        background: #203A43;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>   
    </div>
  </body>
</html>
Copy the code
  1. Grid layout

The parent element sets the grid, and the three boxes are grid-template-rows and grid-template-columns. Note: Compatibility issues with IE10+

<html>
  <head>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      html.body {
        width: 100vw;
        height: 100vh;
      }
      .container {
        display: grid;
        width: 100%;
        height: 100%;
        grid-template-rows: 100%;
        grid-template-columns: 200px auto 120px;
      }
      .left {
        background: #7474BF;
      }
      .right {
        background: #348AC7;
      }
      .middle {
        background: #203A43;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>   
    </div>
  </body>
</html>
Copy the code
  1. Table layout

Principle: Set the parent element to table, set table-layout: fixed. Indicates that the column width is determined by its own width rather than calculated automatically. Set display: table-cell to table cells for all boxes. Set the left and right sides to a fixed width, and set the middle width to 100% fill the remaining width. Note: Poor expansibility, if the layout is changed greatly later, there will be many changes.

<html>
  <head>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      html.body {
        width: 100vw;
        height: 100vh;
      }
      .container {
        display: table;
        width: 100%;
        height: 100%;
        table-layout: fixed;
      }
      .left {
        display: table-cell;
        width: 200px;
        background: #7474BF;
      }
      .right {
        display: table-cell;
        width: 120px;
        background: #348AC7;
      }
      .middle {
        display: table-cell;
        width: 100%;
        background: #203A43;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>   
    </div>
  </body>
</html>
Copy the code
  1. The holy grail layout

Principle: The parent element uses padding to reserve the position of the left and right elements. All three boxes float. The left box is positioned by margin negative value and left offset. The right box is positioned by margin negative and right offset. Note: the chalice will break if the browser is enlarged or narrowed, and the layout will be distorted if the width of the middle box is smaller than that of the left box.

<html>
  <head>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      html.body {
        width: 100vw;
        height: 100vh;
      }
      .container {
        height: 100%;
        padding: 0 120px 0 200px;
      }
      .left {
        position: relative;
        float: left;
        width: 200px;
        height: 100%;
        margin-left: -100%;
        left: -200px;
        background: #7474BF;
      }
      .right {
        position: relative;
        float: left;
        margin-left: -120px; 
        width: 120px;
        height: 100%;
        right: -120px;
        background: #348AC7;
      }
      .middle {
        position: relative;
        float: left;
        width: 100%;
        height: 100%;
        background: #203A43;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="middle"></div>
      <div class="left"></div>
      <div class="right"></div>   
    </div>
  </body>
</html>
Copy the code
  1. Twin wing layout

Principle: On the basis of the Grail layout, add a layer of DOM wrap without relative positioning. Note: multi-layer DOM structure increases the computation of rendering tree generation.

<html>
  <head>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      html.body {
        width: 100vw;
        height: 100vh;
      }
      .container {
        height: 100%;

      }
      .left {
        float: left;
        width: 200px;
        height: 100%;
        margin-left: -100%;
        background: #7474BF;
      }
      .right {
        float: left;
        margin-left: -120px; 
        width: 120px;
        height: 100%;
        background: #348AC7;
      }
      .middle {
        float: left;
        width: 100%;
        background: #203A43;
      }
      .main {
        margin: 0 120px 0 200px;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="middle">
        <div class="main"></div>
      </div>
      <div class="left"></div>
      <div class="right"></div>   
    </div>
  </body>
</html>
Copy the code

CSS Draws a triangle

The main idea is to set the height and width to 0, the border3 sides to transparent, and set the triangle pointing according to your needs.

.border {
  width: 0;
  height: 0;
  border-top: #4285f4 solid;
  border-right: transparent solid; 
  border-left: transparent solid;
  border-width: 85px;
}
Copy the code

How to implement text overflow ellipsis

Single-line text overflow

div {
  width: 100px;
  height: 40px;
  line-height: 40px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
Copy the code

Multiline text overflow

div {
  width: 100px;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
Copy the code

How does CSS implement parallax scrolling

Parallax rolling: refers to the multi-layer background at different speeds, forming three-dimensional motion effect.

CSS can be implemented in two ways: background-attachment: fixed and Transform: translate3D

background-attachment

Set whether the background image is fixed or scrolls with the rest of the page. The values are fixed, scroll, local.

  1. Fixed means the background is relative toviewportFixed. Even if an element has a scrolling mechanism, the background does not scroll with the element’s content.
  2. Scroll is the background with respect to thetaThe element itselfFixed, rather than scrolling along with its contents.
  3. Local indicates the background relative toContent of the elementFixed. If an element has a scrolling mechanism, the background will scroll with the content of the element.

Background images using background-attachment: fixed can produce a fixed background, elements moving visual effect.

transform: translate3d

The principle of

  1. Transform-style: preserve-3D and Perspective: 1px, the child elements in the container will be in the 3D space.
  2. The child element sets the value of translateZ so that the distance of the element from the screen is different, so that scrolling up and down the translateY is different.
<html>
  <head>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      html {
        height: 100vh;
        overflow: hidden; / / the parcel3The content of the D element is set to hidden, which disables scrolling. }body {
        perspective: 1px;
        transform-style: preserve-3d; 
        height: 100%;
        overflow-y: scroll;
        overflow-x: hidden;
      }
      .container {
        width: 100vw;
        height:200vh; / / tobodyScroll}.one {
        width: 100px;
        height: 100px;
        transform: translateZ(-1px);
        background: #7474BF;
      }
      .two {
        width: 100px;
        height: 100px;
        transform: translateZ(-2px);
        background: #348AC7;
      }
      .three {
        width: 100px;
        height: 100px;
        transform: translateZ(-3px);
        background: #203A43;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="one">one</div>
      <div class="two">two</div>
      <div class="three">three</div>   
    </div>
  </body>
</html>
Copy the code

requestAnimationFrame

RequestAnimation is similar to setTimeout, except that setTimeout is called after a specified millisecond, and due to the event loop, the actual execution is always later than the specified time, resulting in a less smooth animation. RequestAnimationFrame depends on the screen refresh rate. Currently, most screens refresh at 60HZ, which means that 1000/60 = 16.67ms refresh once. Animation implementation is smoother and smoother than setTimeout. RequestAnimationFrame also pauses for invisible elements, which saves CPU overhead.

How does Chrome implement text less than 12px

  1. If you use ZOOM, you can find compatibility problems in can I Use.
  2. Use transform: Scale. This property applies to block level or inline block elements.

How does the CSS improve performance?

  1. If most CSS files are submitted in small quantities, merge the CSS files.
  2. Split public CSS files.
  3. Extract the first screen key CSS (14.6KB limit) for inline rather than external import.
  4. The CSS that is not needed on the first screen is loaded asynchronously.
  5. The packaging tool compresses the style files.
  6. Do not use @import to import CSS, because it will destroy parallel downloads, lead to parallel synchronization, and increase the time. If a CSS file is imported from another CSS file, you can load another CSS file only after the parsing of the current CSS file is complete.
  7. Sprite image, compressed image, Icon can be base64.
  8. Reduce unnecessary rearrangement and redraw operations.

Responsive design

Responsive design means that pages can respond and adapt to user behavior or devices.

Meta header is required for mobile processing

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

Responsive layout is achieved by combining media query + percentage + REM + VW/VH.