首页 > 软件开发 > CSS >

怎么利用css实现显示隐藏?附3种方法!

来源:互联网 2023-03-16 19:15:35 99

我们在开发项目过程中,经常会遇到不同情况下,需要显示隐藏不同的模块,怎么通过css控制div的显示隐藏呢,一起来看看!kG8办公区 - 实用经验教程分享!

工具/原料

  • 电脑(win 10)
  • Hbuilder

方法/步骤 display:none

  • 1

    打开电脑,使用hbuilder新建一个html文件,如下图:kG8办公区 - 实用经验教程分享!

    怎么利用css实现显示隐藏?附3种方法!kG8办公区 - 实用经验教程分享!

  • 2

    在body中写两个div标签,并设置样式,如下图:kG8办公区 - 实用经验教程分享!

    怎么利用css实现显示隐藏?附3种方法!kG8办公区 - 实用经验教程分享!

  • 3

    隐藏第一个div,设置display:none,隐藏后不占位置,如下图:kG8办公区 - 实用经验教程分享!

    怎么利用css实现显示隐藏?附3种方法!kG8办公区 - 实用经验教程分享!

  • 3相关内容未经许可获取自百度经验
  • 方法/步骤2 visibility:hidden

  • 1

    隐藏第一个div,设置visibility:hidden,隐藏后位置还在,如下图:kG8办公区 - 实用经验教程分享!

    怎么利用css实现显示隐藏?附3种方法!kG8办公区 - 实用经验教程分享!

  • 方法/步骤3 text-indent

  • 1

    要想隐藏div中间的文字,改怎么操作呢,如下图:kG8办公区 - 实用经验教程分享!

    怎么利用css实现显示隐藏?附3种方法!kG8办公区 - 实用经验教程分享!

  • 2

    设置text-indent:-9999px;就可以隐藏div里面的字了,如下图:kG8办公区 - 实用经验教程分享!

    怎么利用css实现显示隐藏?附3种方法!kG8办公区 - 实用经验教程分享!

  • 注意事项

    • 这里只是介绍的是css的方法!
    • 记得给我点赞,投票喔!

    以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!kG8办公区 - 实用经验教程分享!


    标签: CSS

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码