Thinking about the method of hiding content in CSS

is reading "Proficient in CSS", a lot of styles need to use the content to hide, such as no content, the mouse hover to show the content. The common method in the book is to hide the elements from the edge of the screen with Text-indent:-1000em, Margin-left:-1000em, and Display:none and Visibility:hidden, Overflow:hidden can also be hidden, then what are the pros and cons of these usages?

1.display:none;

Search engines may think that the hidden elements are spam and ignored, which is not conducive to SEO; screen readers ignore hidden elements.

2.visibility:hidden

You can implement the display of the hidden element in the foreground, but its location is not preempted by the elements behind it.

3.overflow:hidden

.elmhidden { display:block; overflow: hidden; width: 0; height: 0; }

As shown above, set the width and height to 0, and then more than partially hidden, which is a more reasonable way to hide.

4.text-indent:-1000em, Margin-left:-1000em

This kind of hiding way can produce unknown effect under different browsers.

In general, the use of CSS hiding:
1, the text of the hidden
2, Hidden hyperlinks (alternative black chain)
3, to the statistical code hidden
4, hide beyond the picture
5. CSS Hidden scroll bar
6. css to hide div layers

Using CSS hiding methods
1, use display:none; to hide all information (no white space occupy)
2. Use Overflow:hidden to hide overflow text or pictures
3, using Overflow-y:hidden; and Overflow-x:hidden controls whether the scroll bar is hidden or not

How to reprint other hidden content:

{display:none;/* Do not occupy space, cannot click */}
/********************************************************************************/
{Visibility:hidden;/* Occupy space, cannot click */}
/********************************************************************************/
{position:absolute; top: -999em;/* Do not occupy space, cannot click */}
/********************************************************************************/
{position:relative; top: -999em;/* Occupy space, cannot click */}
/********************************************************************************/
{position:absolute; visibility:hidden;/* Do not occupy space, cannot click */}
/********************************************************************************/
{height:0; overflow:hidden;/* Do not occupy space, cannot click */}
/********************************************************************************/
{opacity:0; Filter:alpha (opacity=0);/* occupy space, you can click */}
/********************************************************************************/
{position:absolute; opacity:0; Filter:alpha (opacity=0); */* Do not occupy space, you can click */}
/********************************************************************************/
{ 
zoom:0.001;
-moz-transform:scale (0);
-webkit-transform:scale (0);
-o-transform:scale (0);
Transform:scale (0);
/ * IE6/IE7/IE9 not occupy space, ie8/firefox/chrome/opera occupy space. Can not be clicked * /
} 
/********************************************************************************/
{ 
Position:absolute;
zoom:0.001;
-moz-transform:scale (0);
-webkit-transform:scale (0);
-o-transform:scale (0);
Transform:scale (0);
/ * Do not occupy space, cannot click * /
} 

Thinking about the method of hiding content in CSS