• 技术文章 >web前端 >css教程

    css如何实现显示和隐藏

    醉折花枝作酒筹醉折花枝作酒筹2021-04-09 09:36:34原创167

    css实现显示隐藏的方法:1、使用display属性,语法“display:none|block;”隐藏和显示html元素;2、使用visibility属性,语法“visibility:hidden|visible”隐藏和显示html元素。

    本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

    在平时的开发过程中,总是会遇到一些文字在特定的场景下显示或者隐藏来达到我们想要的效果,css中display和visibility语法,他们都可以隐藏和显示html元素。看起来貌似一样,但是他们还是有一定的区别的。

    首先先来看一下display和visibility的属性

    display属性设置元素的显示方式,对应脚本特性为display,可选值为none、block和inline,各值的说明如下:

    visibility属性设置是否显示元素,对应的脚本特性为visibility,可选值为inherit、hidden和visible,各值的说明如下:

    使用的时候的说明:

    display:none;时隐藏该html元素,确切的说,是在浏览器中消除该元素,不占屏幕的空间。若其下有其他元素,就会上移到该空间区域。

    dispaly:block;显示已经隐藏的html元素,如果别的元素占有了该空间时,他将下移,空间重新别原来的元素占有。

    visibility:hidden;隐藏该元素,真正的隐藏,但他还占有那块空间。

    visibility:visible;让元素显示。

    下面写了一个简单的例子,看一下效果:

    将第二行隐藏后依然占据着原来的位置,将第四行隐藏后,不占据原来的位置。

    【推荐学习:css视频教程

    以上就是css如何实现显示和隐藏的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:css 隐藏 显示
    上一篇:css怎么设置背景不动 下一篇:css如何实现波浪效果
    第15期线上培训班

    相关文章推荐

    • css如何设置边框阴影• css垂直居中的方法有哪些• css3动画有哪些属性• css指的是什么• css3新增选择器有哪些

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网