How CSS hides div and HTML content

CSS hidden div box and HTML content method

How to use CSS styles to hide content in HTML without affecting the use of code features.

We often want to hide some content, such as the site to add Third-party statistics Display icon, how to hide through the CSS, but does not affect the site statistics, how to make the picture as a background, but the text does not show, how to hide and so on. DIVCSS5 to share with you.

One, ordinary hidden Web page content

CSS style Word: display:none

If we want to hide a piece of statistical code, but do not want to show the statistical Code icon, but does not affect the statistical function, we can use this CSS style word display:none (the word meaning does not show object and object content).

CSS code:

. Tongji{display:none}

HTML fragment:

Hide Content

Description: This div css hides, will hide object div and object content, but the function is not affected. For search engines, whether you this style is used in the label or to this example generally separate CSS and HTML, search engines will not read and index your hidden content, for the Hidden keyword friends, do not use this CSS hidden way to hide the keyword or anchor text links, or just a futile.

Second, the picture does the background, hides the picture the text, but does not affect a hyperlink anchor text

We usually encounter, we want to picture as the object background, content with text + hyperlink to do optimization, while also want to hide text, hyperlinks are not affected, so as to optimize the Web page, that does not affect the aesthetic and achieve the results of search engine optimization.

Key CSS styles used: text-indent:-9999px

div CSS Hidden content style method

In general, CSS hidden uses are as follows:

1, the text of the hidden

2, hide the hyperlink (alternative black chain)

3, the statistical code to hide

4, Hidden beyond the picture

5, CSS hidden scroll bar

6, CSS Hidden div layer

One, use CSS to hide the method to use the CSS style Word and corresponding explanation

1. Use Display:none to hide all information (no blank bit occupy) recommended, CSS display manual view

2, the use of Overflow:hidden to hide overflow text or pictures applicable recommendations, CSS overflow manual view

3, using Overflow-y:hidden and Overflow-x:hidden control scroll bar hidden or not, CSS overflow-y manual view, CSS manual view Overflow-x

Two, Common div css hidden case

1, CSS hidden div and content, completely hidden content and layout

Explanation: Use CSS word Display:none; completely hide text and pictures

<div style= "Display:none;" > You can't see my </div>

Use the CSS style in Div display:none; will make the contents of the Div hidden through the browser can not see anything, and hidden content will not occupy space, usually used for JS special effects hidden, hidden statistics code display icon.

Set the indent style (text-indent:-9999px) method from the Object box to hide the hyperlink text content

2, Overflow:hidden hidden overflow div content or picture

Instance code such as:

I can see the <br/><br/>
<div style= "Overflow:hidden; width:30px; height:20px; " > You can't see me. </div>
<br/>
And I can see it too.

Case screenshot:

Screenshot of hidden Overflow content

Use CSS styles to set a fixed height and width by using the div CSS layer "You are invisible to me", and then through the Overflow:hidden style, you can hide the high width content that exceeds (overflow) fixed and not occupy the location of the hidden place.

3, CSS hidden scroll bar

Use Overflow-y:hidden and Overflow-x:hidden to hide or display scroll bars corresponding to the horizontal or vertical direction. This case can be entered in the CSS manual overflow-y and the CSS online manual overflow-x has detailed instructions on how to hide or display the settings of the scroll bar.