css中实现显示和隐藏

CSS中的display和visibility
     在平时的开发过程中，总是会遇到一些文字在特定的场景下显示或者隐藏来达到我们想要的效果，css中display和visibility语法，他们都可以隐藏和显示html元素。看起来貌似一样，但是他们还是有一定的区别的。
    首先先来看一下display和visibility的属性
    display属性设置元素的显示方式，对应脚本特性为display，可选值为none、block和inline，各值的说明如下：
    none 隐藏元素，不保留元素显示时的空间。
    block块方式显示元素。
    inline 以内嵌方式显示元素。
    visibility属性设置是否显示元素，对应的脚本特性为visibility，可选值为inherit、hidden和visible，各值的说明如下：
    inherit 继承父元素的visibility属性设置。
    hidden 隐藏元素，但保留其所占空间。
    visible 显示元素(默认值)。

使用的时候的说明：
    display:none;时隐藏该html元素，确切的说，是在浏览器中消除该元素，不占屏幕的空间。若其下有其他元素，就会上移到该空间区域。
    dispaly:block;显示已经隐藏的html元素，如果别的元素占有了该空间时，他将下移，空间重新别原来的元素占有。
     visibility:hidden;隐藏该元素，真正的隐藏，但他还占有那块空间。
     visibility:visible;让元素显示.
下面写了一个简单的例子，看一下效果：

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

css中实现显示和隐藏相关推荐

css中的显示与隐藏
在css中有四种方法可以设置元素的显示与隐藏 1.display 显示 display 属性规定元素应该生成的框的类型. 设置display:none让此元素不会显示,从而达到隐藏的效果设置disp ...
css中的显示于隐藏
display:none;隐藏元素以后不会保留原有的位置 visibility:hidden;隐藏以后,会继续占有原来的位置两个的显示是 display:block; visibility:visi ...
css元素的显示与隐藏 display显示隐藏 +visibility显示隐藏 +overflow溢出显示隐藏
css元素的显示与隐藏 display显示隐藏元素 visibility显示隐藏元素 overflow溢出显示隐藏总结 display显示隐藏元素 display 设置或检索对象是否及如何显示. d ...
CSS中文本超出部分隐藏并用省略号代替
CSS中文本超出部分隐藏并用省略号代替这种在开发过程中经常遇到,这种只需要css三行代码就可以实现首先先写好基本的结构 <div> <p>今天天气很好,适合出去玩耍,不要再打 ...
在css中怎么显示隐藏div,css中实现div的显示和隐藏
div的visibility能够控制div的显示和隐藏,可是隐藏后页面显示空白: style="visibility: none;" document.getElementById ...
AngularJS中实现显示或隐藏动画效果的3种方式
本篇体验在AngularJS中实现在"显示/隐藏"这2种状态切换间添加动画效果. 通过CSS方式实现显示/隐藏动画效果思路: →npm install angular-anima ...
css控制div显示／隐藏方法及２种方法比较原码[转]
CSS中的display和visibility css中display和visibility语法,他们都可以隐藏和显示html元素.看齐来他们很相似,所以很多人还是会搞错. 谈们的属性分别如下: di ...
css设置文本显示高度隐藏超出部分
通过height属性设置文本元素的显示高度,通过overflow属性设置文本元素超出高度时显示隐藏. overflow 属性规定当内容溢出元素框时发生的事情.当元素值设置为hidden是就会隐藏超出的 ...
CSS，Jquery显示与隐藏
今天偶然碰到显示和隐藏的使用,小编来讲讲display和visibility的不同好了 display:none隐藏页面被隐藏的标签会直接被去除,而visibility:hidden隐藏,仅仅就是被隐 ...

css中实现显示和隐藏

css中实现显示和隐藏相关推荐

最新文章

热门文章