Show and hide elements

  • Purpose: To make an element disappear or appear on the page
  • Scenario: Similar to website ads, when we click close, it disappears, but when we refresh the page, it will reappear!

1.1 Display (key)

Display Sets or retrieves whether or how an object is displayed.

  • Display: none Hides objects
    • Features:After hiding, the location is no longer reserved.
  • Display: Block converts to block level elements and displays elements.

Actual development scenario: with the back JS to do special effects, such as the drop-down menu, the original no, after the mouse, display the drop-down menu, is very widely used

1.2 Visibility

Sets or retrieves whether an object is displayed

visibility: the visible; Visual objectvisibility: hidden; Hidden objectCopy the code
  • Features:After hiding, continue to retain the original position.

1.3 overflow spill

Retrieves or sets how to manage the content of an object when its content exceeds its specified height and width.

Attribute values describe
visible Do not cut content or add scroll bars
hidden Do not display content that exceeds the size of the object
scroll The scroll bar is always displayed whether the content is exceeded or not
auto Beyond the automatic display of the scroll bar, not beyond the scroll bar

Actual development scenario:

  1. Remove the floating
  2. Hide beyond content, hide away, do not allow content beyond the parent box.

1.4 Show and hide summary

attribute The difference between use
display Hide objects without reserving position With the back JS to do special effects, such as the drop-down menu, the original no, after the mouse, show the drop-down menu, is very widely used
visibility Hide the object and preserve the location Use less
overflow Just hide the parts that are out of size 2. Ensure that the contents in the box do not exceed the scope of the box