CSS基础之元素的隐藏与显示

文章目录

  • 前言
  • 1.display显示隐藏
  • 2.visibility显示隐藏
  • 3.overflow溢出显示隐藏
  • 4.display与visibility的区别


前言

类似网站广告,当我们点击关闭就不见了,但是我们重新刷新页面,会重新出现,这时候我们就需要用到元素的隐藏和显示


1.display显示隐藏

display属性用于设置一个元素应如何显示

<style>
    div {
        display: block;  
        /* 同时具有转换为块级元素和显示元素的作用 */

        display: none;
        /* 具有隐藏对象的作用 */
    }
style>

2.visibility显示隐藏

visibility属性用于指定一个元素应可见还是隐藏

<style>
    div {
        visibility: visible;
        /* 元素可以被看见 */

        visibility: hidden;
        /* 元素不可见 */
    }
style>

注意点:

  • visibility 隐藏元素后,继续占有原来的位置

3.overflow溢出显示隐藏

overflow 有四个属性能指定内容溢出后会发生的不同的变化

属性值 描述
visible 不剪切内容也不添加滚动条
hidden 不显示超过对象尺寸的内容,超出的部分隐藏掉
scroll 不管超出内容否,总是显示滚动条
auto 超出自动显示滚动条,不超出不显示滚动条

4.display与visibility的区别

  • 设置了visibility:hidden的元素,占有原来的位置
    <style>
        div {
            width: 200px;
            height: 200px;
        }

        .first {
            visibility: none; 
            /* display: none; */
            background-color: lightblue;
        }

        .second {
            background-color: lightgreen;
        }
    style>
head>

<body>
    <div class="first">div>
    <div class="second">div>
body>

效果图~
CSS基础之元素的隐藏与显示_第1张图片

  • 设置了display:none的元素,不再占有原来的位置
    CSS基础之元素的隐藏与显示_第2张图片

你可能感兴趣的:(html,css,前端,css,css3,html,前端,html5)