Summary of the method of CSS element hiding

Time:2020-3-29

This is the problem that Tencent will encounter in its 2020 school recruitment interview

1.visibility: hidden;

2.display: none;

Same point: all tags are hidden, and the corresponding tags still exist in the DOM structure

Difference:

After the label is set to display: none, it will not occupy the original location of the label, and will trigger the re flow.

Label visibility: after hidden, it still occupies the original position and triggers redrawing.

Lenovo: V-IF and v-show

Same point: you can control the display and concealment of labels.

1、 Difference in essential methods of realization

  • V-IF is to dynamically add or remove DOM elements into the DOM tree
  • The essence of v-show is to use the display attribute of the tag to control the visibility and none
  • V-IF = “false” the tag cannot be obtained in DOM
  • V-show = false can still get the tag in DOM

2、 Differences in compilation

  • V-show is actually controlling CSS
  • The V-IF switch has a local compile / unload process. During the switch process, the event monitor and subcomponents inside the reconstruction are properly destroyed

3、 Compiled conditions

  • V-show will compile, with the initial value of false, but the display is set to none, but it also compiles
  • If the initial value of V-IF is false, it will not be compiled

Four, performance

  • V-show only compiles once, and then controls CSS,
  • Because V-IF is constantly destroyed and created, the performance of v-show is better

3.opacity: 0;

CSS3 property, set 0 to make an element completely transparent

4.position: absolute;

Set a large left negative positioning so that the element is positioned outside the visible area