zoukankan      html  css  js  c++  java
  • CSS实战笔记(八) 元素隐藏

    在 CSS 中,隐藏一个元素有很多种方法,下面我们来一一介绍

    1、设置不透明度

    opacity: 0;
    

    将元素的不透明度设置为 0,但是这个元素还是会占据原来的位置,只是在视觉上不可见而已

    它不会改变页面的布局,还能够响应用户的操作

    2、设置可见性

    visibility: hidden;
    

    将元素的可见性设置为隐藏,从而使得这个元素是不可见的,但是它仍占据着原来的位置

    它不会改变页面的布局,但不能响应用户的操作

    另外,这个元素的子孙元素也会被设置为隐藏,但是可以给子孙元素显式设置 visibility 为 visible 取消隐藏

    3、设置显示方式

    display: none;
    

    这是真正意义上的隐藏元素,它不会占据原来的空间,就好像这个元素本来就不存在一样

    这意味着它改变了页面的布局,自然它也不能响应用户的操作

    另外,这个元素的子孙元素也会被设置为隐藏

    4、设置定位方式

    position: absolute;
    top: -999px;
    left: -999px;
    

    设置元素的定位方式为绝对定位,这样可以使元素脱离文档流

    然后设置 left 和 top 为一个较大的负数,将元素移出可见区域,实现元素隐藏


    最后补充一个属性,overflow,用来规定当内容超出元素框时要怎么处理,可选值如下:

    • visible:超出的内容会显示在元素框之外
    • hidden:超出的内容会被修剪
    • scroll:始终显示滚动条,可以拉动滚动条看到超出的内容
    • auto:当内容没有超出元素框时,不显示滚动条 ,当内容超出元素框时,才显示滚动条

    【 阅读更多 CSS 系列文章,请看 CSS学习笔记

  • 相关阅读:
    OC 消息机制本质
    Lua中的闭包
    Lua中的函数
    Lua中的语句
    Lua中的表达式
    Lua中的类型与值
    Unity3D之通过C#使用Advanced CSharp Messenger
    C#中sealed关键字
    C#委托delegate、Action、Func、predicate 对比用法
    Unity3D之IOS&Android收集Log文件
  • 原文地址:https://www.cnblogs.com/wsmrzx/p/12497575.html
Copyright © 2011-2022 走看看