Home > Article > Web Front-end > How to hide div with css

How to hide div with css

藏色散人Original: 2021-04-25 09:30:5010429browse

Css method to hide div: 1. Use "display:none" to hide div; 2. Use "visibility: hidden;" to hide div; 3. Use "opacity: 0" to hide div.

The operating environment of this article: Windows7 system, HTML5&&CSS3 version, Dell G3 computer.

When we usually lay out the website, we want to hide the p, but many people don’t know how to control the display and hiding of p using css? Let's explain how to hide p with css.

1. Use display:none to hide div

We can use the display:none attribute to hide all information, including text and pictures, the syntax is:

dc6dce4a544fdca2df29d5ac0ea9906b这里你是看不到的16b28748ea4df4d9c2150843fecfba68

When we use the css style in p, we can use the display:none attribute to hide the content, and it is not visible through the browser. At the same time, the hidden content does not occupy space and is hidden. The subsequent content will not be read by search engines. Generally, we use js statistics code to hide the displayed icons.

2. Use visibility: hidden; to hide the div

The visibility attribute specifies whether the element is visible.

This attribute specifies whether to display the element box generated by an element. This means that the element still occupies its original space, but can be completely invisible. The value collapse is used in tables to remove columns or rows from the table layout.

Attribute value:

visible default value. The element is visible.
hidden elements are invisible.
collapse When used within a table element, this value deletes a row or column, but it does not affect the layout of the table. The space occupied by a row or column is freed for other content. If this value is used on another element, it will be rendered as "hidden".

3. Use opacity: 0 to hide the div

The opacity attribute means to set the transparency of an element. It is not designed to change the bounding box of an element.

This means that setting opacity to 0 only visually hides the element. The element itself still occupies its own position and contributes to the layout of the web page. This is similar to visibility: hidden above.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>元素隐藏--opacity: 0</title>
        <style>
            div{
                height: 20px;
            }
            .demo{
                width: 800px;
                height: 60px;
                margin: 50px auto;
                border: 1px solid red;
            }
            .hide,span{
                opacity: 0;
            }
        </style>
    </head>
    <body>
        <div>
            <div sty>元素隐藏1--opacity: 0</div>
            <div>元素隐藏2--opacity: 0</div>
            <div>元素隐藏3--opacity: 0</div>
        </div>
        <div>
        <div>元素隐藏1--opacity: 0,元素隐藏2--opacity: 0,元素隐藏3--opacity: 0</div>

        <div>元素隐藏1--opacity: 0,<span>元素隐藏2--opacity: 0</span>,元素隐藏3--opacity: 0</div>
        </div>
    </body>
</html>

Rendering:

[Recommended learning: css video tutorial]

The above is the detailed content of How to hide div with css. For more information, please follow other related articles on the PHP Chinese website!

html5 css css3 JS display 搜索引擎

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of two ways to achieve text gradient color using pure CSSNext article：Detailed explanation of two ways to achieve text gradient color using pure CSS

See more

How to hide div with css

Related articles