The functions and differences of display, visibility and overflow

display, visibility, overflow The functions and differences of the three

display

html You can classify elements into inline elements 、 There are three kinds of block elements and inline block elements ,
 Use display Attribute can transform the three at will 

    none  Hide objects   ** After hiding , No more places .**
    display:inline; Convert to inline elements 
    display:block; Convert to block element 
    display:inline-block; Convert to inline block elements 
 There are many more values , But not often , Such as  table  etc. 

In line block feature

Support all styles
Width and height can be set , If not set , The width and height of the block element in the row is the width and height of the content
Don't monopolize a line , Display line by line with other inline elements
The default arrangement is from left to right
Code wrap , There will be a gap between the block elements in the row
Hidden elements

visibility

visibility：visible ; Objects are visible

visibility：hidden; Object hiding

characteristic ： After hiding , Keep the original position .

overflow

visible The default value is , Overflow content will not be pruned , It will appear outside the element box

hidden Do not show overflow

scroll Scroll bar to display the overflow content in the element , Show scroll bar even if there is no overflow

auto Automatically handle overflows , If it overflows, the scroll bar is displayed , If there is no overflow , The normal display is

overflow: hidden  Do not show overflow 
overflow: hidden  Only the overflow part is hidden , For parent elements 
overflow: hidden  Often used for text overflow , Element overflow in document stream 

display:none  This element will not be shown 
display:none  It will hide all the elements , For element itself 
display:none  Commonly used in drop-down boxes , Box out of document flow , Such as JD navigation drop-down box