The main content of this chapter is to use CSS to control the “visibility” of elements. Speaking of visibility, some unconventional CSS methods have been provided before, such as clip, z-index, opacity, etc. In this chapter, we will explore the display: None and visibility: hidden properties.

1. Display and implicit elements

For an element whose display evaluates to None, that element and its descendants are all hidden (remember this concept, and contrast the term visibility). You can think of the current element as “missing” from the DOM document flow, but not really, the node still exists in the document flow, so the V-show in vue corresponds to the CSS display value, and the V-if completely removes the node, running a little too far and getting back to business. When an element is set to display: None, the element cannot be clicked and the space it occupies disappears. In general, this is true, but one special case needs to be ruled out here, as follows:

<form>
    <input id="hide" type="submit" style="display:none"/>
    <label for="hide">Click to trigger submission</label>
</form>
Copy the code

In this case, the form element is indeed unclickable, but clicking on the label tag can still trigger a click event because it is bound to an element with the ID “hide”, so it is ok to say that it cannot be clicked, but the element’s click event is still preserved and can be triggered by other means.

Display: None Explicit and hidden control does not affect the implementation of the CSS3 animation, but it will affect the effect of the transition animation, so if you want to use transition, use visibility.

In addition to the animation effect, display: None affects the count queue of CSS. For example, if 10 lists are counted from 1, setting display to None on the second list causes the counter to ignore the current element, and the third list is counted at 2.

2. Visibility and visibility of elements

When it comes to the visibility attribute, many people simply think that the hidden difference between display: None and visibility:hidden is that the hidden element does not occupy any space, while the hidden element space remains. This is where we usually distinguish between the two and make a difference. In addition to hiding space, visibility has many interesting properties that are even different from display. Let’s take a look.

First, the biggest distinction between visibility and display is that the parent element sets the visibility: The underlying reason why the child element is hidden after hidden is that the child element will inherit the parent element’s visibility:hidden. Therefore, when we need to hide the parent element and display the component element, we only need to change the inherited visibility of the child element to the default visible attribute. This is impossible on elements with display: None set. Let’s test this theory with an example

list1
list2
list3
list4

Verify that visibility itself occupies space

The children of the visibility element simply inherit the parent element’s visibility and therefore have no effect on CSS counts, unlike display: None. At the same time, the transition supports the visibility attribute, so when using the transition animation, you can use the visibility:hidden to enable elements to fade in and out to control the visibility.

The content of this chapter skips the part about color and background in chapter 9 of the original work. The next chapter contains some miscellaneous attributes of the original work, including the skipped part, and you can click on it if you are interested.

Never forget why you started, and your mission can be accomplished.

You can also scan the QR code to enter the blogger’s fan group (708637831). Of course, you can also scan the QR code to reward and directly keep a handsome blogger.