At the beginning

These questions are very common in our interview questions, interviewers also like to ask, anyway, don’t be afraid to don’t panic, look over, Ori give!

HTML 5 new features

  • The Drag and drop API is available here for details

  • Semantic better content label (header, nav, footer, value, the article, section)

  • Audio and Video API(Audio and Video)

  • The Canvas (Canvas) API

  • Geographical Geolocation API

  • Local offline storage localStorage Stores data for a long time. Data is not lost after the browser is closed.

  • SessionStorage data is automatically deleted after the browser is closed

  • Form controls, Calendar, Date, time, email, URL, search

  • New technologies webWorker, webSocket, and Geolocation

Why semantic tags?

  • The structure of the page remains clear when styles are removed or lost
  • The reader will automatically parse the tag according to its semantics, presenting a more readable form of content (accessible)
  • Search engine optimization
  • Facilitate later development and maintenance

CSS selector priority

  • ! importantThe highest
  • Inline style 1000
  • ID selector 0100
  • Class selector/property selector/pseudo-class selector 0010
  • Element selector/pseudoelement selector 0001
  • Relational selector/wildcard selector 0000

Common inline elements, block-level elements, and inline block-level elements

  • Block-level elements: Always have a single row, and you can set the height and width. The width is 100% if not set. Common block-level elements are: H1-h6

    Hr (horizontal dividing line), DIV, P (paragraph), UL (unordered list), OL (ordered list), form(form)

  • Inline elements: On a line with other elements. Height, width, and padding cannot be set. Width and height is the height of the content, depending on its font size and graphics support structure, cannot be changed. You can set padding and margin-left and margin-right(top and bottom cannot be set). Common inline elements are: SPAN, input, A, B /strong(bold), I /em(italic), del(stripline), u(underscore)

  • Inline block-level elements: Combine the properties of block-level elements with inline elements, allowing you to set width (content width by default), as well as inner and outer margins. Common include: IMG, Button, Textarea, audio, video, etc

The box model

The box model is that we can think of the element as a box, which includesMargin, border, padding, content

The box model is divided into standard box model and IE box model (weird box model), which can be set by box-sizing. It has two properties to set these two models respectively. Content-box specifies the box model as standard box model, and border-box specifies the IE box model (weird box model).

Let’s talk about the differences between the two models:

  • Standard box model: Setting the height and width of elements is really setting the content (content) of the width and height we setwidthandheightIt’s just settingcontentThe width is high,paddingandborderThe value of theta is actually calculated separately.Box width =width+padding+border+margin
  • Weird box model: Set element width and height at the same timecontent,padding,borderThe sum of the three, the box margin plus the border and the content is equal to the width and height that we set.Box width =width(including padding+border)+margin

Here’s a graph to compare the differences between the two models:

The understanding of the landing

BFC is known as Block Formatting Context. A BFC box is laid out independently, and the layout of the child elements inside the box does not affect the outside elements. Two adjacent block-level boxes in the same BFC will collapse at the vertical (relative to the layout direction) margin.

How to trigger BFC?

The BFC can be triggered if the element meets any of the following criteria:

  • Body root element
  • Floating elements (attributes other than None)
  • Absolute positioning element (absolut,fixed)
  • displayforinline-block,table-cells,flex
  • overflowIn addition to visibleBeyond the value of the(Hidden, auto, Scroll)

What does the BFC do?

  • Use BFC to avoid margin overlap. As mentioned above, two elements in the same BFC box will overlap. To avoid overlapping margins, place elements in two different BFC containers.

  • The easiest way to do an adaptive two-column layout with BFC is to use Flex to trigger the BFC and implement a two-column layout. For the same reason, a three-column layout is also possible.

  • Clear float, this is a platitude of the problem, clear float methods also have many:

    • Extra tag method (add a new tag after the last float tag and set it to clear: both;) The downside is that meaningless tags are added and semantics are poor, so this is rarely used.

    • Parent adds overflow attribute (parent element adds overflow:hidden;) The disadvantage is that the box does not automatically wrap when there is too much content in it, and the overflow content will be hidden

    • Use after pseudo-element to clear float, it is probably intermediate, this method is recommended, but it is not supported well in earlier versions of IE (the industry cancer, Vue3 has been abandoned, who care)

      .clearfix:after{
        content: "";
        display: block;
        height: 0;
        clear:both;
        visibility: hidden;
    }
Copy the code

    • Use before and after double pseudo-elements to clear floats, which is also recommended. I feel like I’m using Flex most of the time now, and most browsers support Flex pretty well, so use a floating layout only when you’re compatible with older browsers.

      .clearfix:after,
.clearfix:before{
    content: "";
    display: table;
}

.clearfix:after{
    clear: both;
}
Copy the code

Rem and EM

  • Rem(font-size-of-the-root-element) : Rem sets the font size relative to the root element < HTML >. See the code below. We can change the font size of the root element to fit different mobile devices.

    // This module implements the mobile rem layout
function remSize() {
  let deviceWidth = document.documentElement.clientWidth || window.innerWidth // Get the screen width
  if (deviceWidth >= 750) {
    deviceWidth = 750  // If the screen width on PC is larger than 750, set it to 750 directly
  }
  if (deviceWidth <= 320) {
    deviceWidth = 320  // Mobile screen width should not be smaller than 320
  }

  // The design is 750px
  // Set the width to half. Is 375 px.
  //1rem = 100px width of the design
  // Half width rem is 3.75rem
  document.documentElement.style.fontSize = (deviceWidth / 7.5) + 'px'

  // Set the default font size
  document.body.style.fontSize = 0.3 + 'rem'
}

remSize()

window.onresize = function () {
  remSize()
}
Copy the code

  • Em: sets the font size relative to its parent element. If 1em = 16px for the browser, the default font size for the browser is 16px. There are some problems with this unit, such as an element may inherit the font size of its parent, which in turn inherits the font size of its parent (nesting, 🐒). Therefore, the font size of an element in em may be affected by the font size of any of its parent elements.

Center row elements horizontally and vertically

Set the parent element to text-align and line-height

div {
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
}
Copy the code

Then all the inline elements in the div can be centered horizontally and vertically

Center block-level elements vertically and horizontally

1. Absolute positioning +margin: Auto

<! DOCTYPEhtml>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .parent {
      position: relative;
      width: 300px;
      height: 300px;
      background-color: hotpink;
    }

    .child {
      position: absolute;
      width: 100px;
      height: 100px;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
      background-color: pink;
    }
  </style>
</head>

<body>
  <div class="parent">
    <div class="child"></div>
  </div>
</body>

</html>
Copy the code

2. Absolute position +transform

Replace the child of the CSS code above with the following code

.child {
  position: absolute;
  width: 100px;
  height: 100px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: pink;
}
Copy the code

3. Use Flex layout

Change parent and child in the CSS code above to the following code, respectively

.parent {
  width: 300px;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: hotpink;
}
.child {
  width: 100px;
  height: 100px;
  background-color: pink;
}

Copy the code

4. Use grid layout

In the CSS code above, the parent and child are changed to the following code, which is not very compatible with browsers

.parent {
  display: grid;
  width: 300px;
  height: 300px;
  background-color: hotpink;
}

.child {
  width: 100px;
  height: 100px;
  justify-self: center;
  align-self: center;
  background-color: pink;
}
Copy the code

The above are some of the most common ways to center elements horizontally and vertically. They all have the same effect

Two columns of the layout

This is a simple layout, but it’s also a common interview question. Here are a few common ways to do this. First, write the layout

<body>
    <div class="content">
        <div class="left">
            <p>left</p>
        </div>
        <div class="right">
            <p>right</p>
        </div>
    </div>
</body>

Copy the code

And then we can set it in a couple of ways, but before we do that we have to set it

* {
    margin: 0;
    padding: 0;
}

Copy the code

The following layouts are fixed on the left and adaptive on the right

1. Use the float + margin – left

.left{
    background: pink;
    width: 200px;
    float: left;
}

.right{
    background: hotpink;
    margin-left: 210px;
}

Copy the code

2. Double left float +calc

.left {
  float: left;
  width: 200px;
  background-color: pink;
}

.right {
  float: left;
  margin-left: 10px;
  width: calc(100% - 210px);
  background-color: hotpink;
}

Copy the code

3. Use absolute positioning

.content{
    position: relative;
    width: 100%;
    height: 500px;
}

.left{
    background: pink;
    width: 200px;
    position: absolute;
}

.right{
    background: hotpink;
    position: absolute;
    left: 210px;
    right: 0;
}

Copy the code

3. Use Flex layout

.content{
    width: 100%;
    height: 500px;
    display:flex;
}

.left{
    background: pink;
    width: 200px;
    margin-right:10px;
}

.right{
    background: hotpink;
    flex:1;
}

Copy the code

4. The float and landing

Set overflow on the right: Hidden to trigger the BFC

.left {
  float: left;
  width: 200px;
  background-color: pink;
}

.right {
  margin-left: 210px;
  overflow: hidden;
  background-color: hotpink;
}

Copy the code

We can see that this is the case in all of the above representations

[Note: use the float method remember to clear the float], we have talked about several ways to clear the float above

Three column layout

The holy grail layout

<! DOCTYPEhtml>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
  <title>Document</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    .container {
      padding: 0 100px;
    }

    .middle..left..right {
      position: relative;
      float: left;
    }

    .left {
      width: 100px;
      height: 100px;
      background: red;
      margin-left: -100%;
      left: -100px;
    }

    .right {
      width: 100px;
      height: 100px;
      background: green;
      margin-left: -100px;
      right: -100px;
    }

    .middle {
      background: blue;
      width: 100%;
      height: 300px;
    }
  </style>
</head>

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

</html>

Copy the code

The other two versions, which use absolute positioning and Flex layout, are better understood. The code is posted below

Absolute location edition:

<style>
  * {
    margin: 0;
    padding: 0;
  }

  .container {
    position: relative;
  }

  .left..right {
    top: 0;
  }

  .middle {
    margin: 0 100px;
    height: 300px;
    background-color: hotpink;
  }

  .left {
    position: absolute;
    left: 0;
    width: 100px;
    height: 100px;
    background-color: pink;
  }

  .right {
    position: absolute;
    right: 0;
    width: 100px;
    height: 100px;
    background-color: pink;
  }
</style>

Copy the code

Flex version:

<style>
  * {
    margin: 0;
    padding: 0;
  }

  .container {
    display: flex;
    overflow: hidden;
  }

  .middle {
    flex: 1;
    height: 200px;
    background-color: hotpink;
  }

  .left {
    order: -1;
    flex-basis: 100px;
    height: 100px;
    background-color: pink;
  }

  .right {
    flex-basis: 100px;
    height: 100px;
    background-color: pink;
  }
</style>

Copy the code

The renderings all look like this

Twin wing layout

<! DOCTYPEhtml>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>Document</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    .container {
      overflow: hidden;
    }

    .middle..left..right {
      float: left;
      height: 100px;
    }

    .left {
      width: 100px;
      background: pink;
      margin-left: -100%;
    }

    .right {
      width: 100px;
      background: pink;
      margin-left: -100px;
    }

    .middle {
      width: 100%;
      background: hotpink;
    }

    .inner {
      margin: 0 100px;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="middle">
      <div class="inner"></div>
    </div>
    <div class="left"></div>
    <div class="right"></div>
  </div>
  </head>

</body>

</html>

Copy the code

Flex version:

<style>
  * {
    padding: 0;
    margin: 0;
  }
  .container {
    display: flex;
  }
  .middle..left..right {
    height: 100px;
  }
  .middle {
    flex: 1;
    background-color: hotpink;
  }
  .left {
    order: -1;
    flex-basis: 100px;
    background-color: pink;
  }
  .right {
    flex-basis: 100px;
    background-color: pink;
  }
</style>

Copy the code

The difference between

The classic Grail layout uses the parent padding to make room for the left and right so as not to cover the middle, while the twin wings make a margin for the middle, limiting the inner content area so that the left and right shading does not affect the middle

For a three-column layout, flex layout is still the best solution, but grid layout is not as compatible, either way you can easily achieve a multi-column layout, and you can control the order. Middle can still be rendered first, regardless of Internet Explorer, flex layout is still the best solution.

Redraw and rearrange (reflux)

  • Redraw: Apply some CSS styles to elements without changing their shape. Such as visibility, color, background-color, outline, etc., will trigger redrawing and will not redraw the layout. Redrawing does not necessarily rearrange.

  • Rearrangement: Rearrangement is triggered when elements change shape, position, or the rendering tree needs to be recalculated. Like to set the display: none; The first rendering of a page, activating pseudo-class elements such as hover, adding and deleting DOM elements, moving element positions, and changing window sizes all occur. Rearrangement must be redrawn.

How to optimize?

  • Reduce the number of redraws and rearrangements: For example, if we change the style of an element, we can combine multiple changes into a single change

    const el = document.querySelector('.test')
el.style.margin = '5px'
el.style.paddingTop = '2px'
el.style.paddingBottom = '5px'

Copy the code

    Multiple style changes are made to the DOM element, and each change triggers a rearrangement (modern browsers have been optimized to merge into a single rearrangement). But older browsers still fire multiple times). So we need to merge

    const el = document.querySelector('.test')
el.style.cssText += 'margin: 5px; padding-top: 2px; padding-bottom: 5px; '

Copy the code

    Or just add a new style class to EL

    const el = document.querySelector('.test')
el.className += ' test2'

Copy the code

  • Modify DOM elements in batches:

    1. Take the element out of the document flow, hide the element with display: None, modify the DOM element, and redisplay with display: block. Hiding and showing DOM elements triggers a rearrangement, but modifying DOM elements does not, thus reducing the number of rearrangements

    2. Using document fragments document. CreateDocumentFragment ()

    const ul = document.querySelector("ul")
const fragment = document.createDocumentFragment()
for (let i = 0; i < 20; i++) {
    let li = document.createElement("li")
    li.innerHTML = "index: " + i
    fragment.appendChild(li)
}
ul.appendChild(fragment);

Copy the code

  • For complex animations, it is possible to set it to absolute positioning, out of the document flow, which would otherwise cause frequent rearrangements of its parent and subsequent elements

  • CSS optimization:

    1. Avoid using the Table layout

    2. Avoid inline styles

    3. Use less CALC expressions, which will trigger rearrangements frequently

    4. Set the animation on the element that is out of the document flow

  • Hardware acceleration using CSS3: The attributes that trigger hardware acceleration include transform, opacity, filters, and will-changewill-change reference

When does z-index expire

  • The position of the parent label is set to relative
  • When the z-index of the parent tag is set to be extremely small
  • The problem tag does not set an attribute other than position(except static)
  • The problem label is set to float

conclusion

Most companies like to ask a few CSS questions at the beginning, so we still need to pay attention to this one, here are common questions, it is necessary to master