Summarize--visibility and display

The recent work used to show and hide--visibility and display, all of them two show hidden meaning, but there is a difference, then we first look at the effect of it.

When there is no effect, we show the source code

<! DOCTYPE html>"http://www.w3.org/1999/xhtml">"Content-type"Content="text/html; Charset=utf-8"/> <title></title> <style>body, table {font-size:12px; } Table {Table-layout:fixed; Empty-cells:show; Border-Collapse:collapse; Margin:0Auto;            } TD {height:30px;        width:556px; } H1, H2, H3 {font-size:12px; Margin:0; padding:0;            }. Table {border:1px solid #cad9ea; Color: #666; }. Table th {background-repeat:repeat-x;            height:30px;                }. Table TD,. Table TH {border:1px solid #cad9ea; padding:01em0; }. Table Tr.alter {background-color: #f5fafe; }    </style>class="Table"> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td>7</td> <td>8</td> <td>9</td> </tr> </table></body>
First, let's take a look at Visibility:hidden and visibility:visible.
<! DOCTYPE html>"http://www.w3.org/1999/xhtml">"Content-type"Content="text/html; Charset=utf-8"/> <title></title> <style>body, table {font-size:12px; } Table {Table-layout:fixed; Empty-cells:show; Border-Collapse:collapse; Margin:0Auto;            } TD {height:30px;        width:556px; } H1, H2, H3 {font-size:12px; Margin:0; padding:0;            }. Table {border:1px solid #cad9ea; Color: #666; }. Table th {background-repeat:repeat-x;            height:30px;                }. Table TD,. Table TH {border:1px solid #cad9ea; padding:01em0; }. Table Tr.alter {background-color: #f5fafe; }    </style>class="Table"> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr style="Visibility:hidden"> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td>7</td> <td>8</td> <td>9</td> </tr> </table></body>
The above code shows the effect on the page: Set the Visibility property to hidden, the second line disappears-that is, we say hide. However, the space on the page remains for that element.
Summarize Visibility Features:

 
  
 
  
   
 
    
 
     
visibility:visible--element Visible, default value
 
    
 
    
 
     
The visibility:hidden--element is not visible, but still retains the appropriate space for it. With this property, the HTML Element (object) is simply visually invisible (completely transparent), and the space it occupies still exists, that is, it still has a property value such as height and width.
 
    
 
    
 
     
visibility:collapse--works only on table objects, removing rows or columns without affecting the layout of the table. If this value is used on an object other than table, it behaves as hidden
 
    
 
    
 
     
visibility:inherit--inherit the visibility value of the ancestor element
 
    
 
    
 
     
JS's style.visibility--
Sets the element visibility property to hidden, hiding the element content, but occupying the space of the domain.
Sets the element visibility property to visible and displays the element content.
 
    
 
   
 
 
  
Then, look at Display:none and Display:block.
<! DOCTYPE html>"http://www.w3.org/1999/xhtml">"Content-type"Content="text/html; Charset=utf-8"/> <title></title> <style>body, table {font-size:12px; } Table {Table-layout:fixed; Empty-cells:show; Border-Collapse:collapse; Margin:0Auto;            } TD {height:30px;        width:556px; } H1, H2, H3 {font-size:12px; Margin:0; padding:0;            }. Table {border:1px solid #cad9ea; Color: #666; }. Table th {background-repeat:repeat-x;            height:30px;                }. Table TD,. Table TH {border:1px solid #cad9ea; padding:01em0; }. Table Tr.alter {background-color: #f5fafe; }    </style>class="Table"> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr style="Display:none"> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td>7</td> <td>8</td> <td>9</td> </tr> </table></body>
When the second line is set to Display:none, the second row disappears and the original position becomes the third row. When set to Display:block, it is displayed again.
Summary display:
Block
Behaves as a block-level element (typically exclusive row)
When display is set to block, all elements in the container will be treated as a separate block, like the <DIV> element, which is placed on the page at that point. (You can actually set the <span> display:block so that it can work like <DIV>.)
Inline
behaves as a row-level element (in general, does not monopolize a single row)
Setting display to inline will make its behavior as inline as the element---even if it is an ordinary block element such as <DIV>, it will also be combined to image <span> that output stream.
The 
 None: 
 element is not visible, and the corresponding position is not reserved for it 
 finally display is set: None, when the element is actually removed from the page, and the element underneath it is automatically padded. 
 
 Display uses 
 1, display default property values are block-level elements: 
 Adress,quote,body,xmp,center,col,colgroup,dd,dtr,div, 
 Dl,dt, Fieldset,form,hn,hr,iframe,legend,listing,marquee, 
 Menu,ol,p,plaintext,pre,table,td,th,tr,ul 
 2, Display default property value is the element of none: 
 Br,frame,nextid,tbody,tfoot,thead 
 3, the display property of the LI element is the default value: List-item 
 4, Other elements the Display property defaults to inline 
 
 Display Properties 
 
 Changing the display property of an element will have an effect on the surrounding elements: 
 1, add a new row after the element with the property value set to block 
 2, Deletes a row from the row of the element with the property value set to inline 
 3, the element with the hidden property value set to None, and frees the physical space that the element occupies in the document, which, for other elements, is equivalent to the element that does not exist, so that the position of the element is replaced by another element 
 
 Display:none; 
 When this property is used, various property values, such as the width and height of the HTML element (object), are "lost"; 
Display:none:
1, js read element attribute value
If the element is hidden in the style file or in the page file code directly with Display:none, after loading the page, without using the JS setting style to make the element display, the JS code will not be able to get some properties of the element correctly, such as offsettop, Offsetleft and so on, the returned value will be 0, the value can be obtained correctly after the element is displayed by JS setting style.display.
2, SEO need to pay attention to optimization
The use of Display:none hidden elements will not be Baidu and other search site retrieval, will affect the site's SEO, in some cases can use left:-100000px to achieve the same effect.
3. Style files
If the display:none style of the element is set by a style file or <style>css</style>, the JS setting style.display= "" does not make the element display, You can use block or inline equivalents instead. There is no problem with setting the style= "Display:none" directly on the element
Style.display
Sets the element display property to block, which wraps after the element.
Setting the element display property to inline will eliminate the element wrapping.
Sets the element display property to None, hides the element content, and does not occupy the space of the domain.
Summarize--visibility and display