css display显示隐藏元素

最新推荐文章于 2024-12-11 15:14:33 发布

原创最新推荐文章于 2024-12-11 15:14:33 发布 · 481 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #javascript #前端

css 专栏收录该内容

45 篇文章

订阅专栏

本文详细介绍了 CSS 中 display 属性的作用及其使用方法。通过具体的代码示例，展示了如何利用 display: block 和 display: none 来控制元素的显示与隐藏。

display属性用来设置一个元素应该如何显示
display：none；隐藏元素：->隐藏元素后，不再占有原先的位置
display：block；除了转换成块级元素之外，还有显示元素的意思
放个代码例子：建立二个盒子，观察显示

<style>
        .a1{
            /* display: block; */
            width: 111px;
            height: 111px;
            background-color: aquamarine;
        }
        .a2{
            /* display: none; */
            width: 111px;
            height: 111px;
            background-color: chartreuse;
        }
     </style>
</head>
<body>
    <div class="a1">a1</div>
    <div class="a2">a2</div>
</body>