How to hide div with css-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

How to hide div with css

藏色散人

Apr 25, 2021 am 09:30 AM

css

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.

How to hide div with css

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:

<div>这里你是看不到的</div>

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!

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