display:none和visibility:hidden两者的区别

时间: 2020-04-06阅读: 300标签: 区别

使用css让元素不可见的方法有很多种,裁剪、定位到屏幕外边、透明度变换等都是可以的。但是最常用两种方式就是设置元素样式为display: none或者visibility: hidden。很多公司的面试官也常常会问面试者这两者之间的区别。

display与元素的隐藏
如果给一个元素设置了display: none,那么该元素以及它的所有后代元素都会隐藏,它是前端开发人员使用频率最高的一种隐藏方式。隐藏后的元素无法点击,无法使用屏幕阅读器等辅助设备访问,占据的空间消失。

<body>
    <div>
        <strong>给元素设置display:none样式</strong>
        <p>A元素</p>
        <p style='display:none;'>B元素</p>
        <p>C元素</p>
    </div>
</body>


visibility与元素的隐藏

给元素设置visibility: hidden也可以隐藏这个元素,但是隐藏元素仍需占用与未隐藏时一样的空间,也就是说虽然元素不可见了,但是仍然会影响页面布局。

<body>
    <div>
        <strong>给元素设置visibility:hidden样式</strong>
        <p>A元素</p>
        <p style='visibility:hidden;'>B元素</p>
        <p>C元素</p>
    </div>
</body>

display: none与visibility: hidden的区别
很多前端的同学认为visibility: hidden和display: none的区别仅仅在于display: none隐藏后的元素不占据任何空间,而visibility: hidden隐藏后的元素空间依旧保留 ,实际上没那么简单,visibility是一个非常有故事性的属性

1、visibility具有继承性,给父元素设置visibility:hidden;子元素也会继承这个属性。但是如果重新给子元素设置visibility: visible,则子元素又会显示出来。这个和display: none有着质的区别

2、visibility: hidden不会影响计数器的计数,如图所示,visibility: hidden虽然让一个元素不见了,但是其计数器仍在运行。这和display: none完全不一样

    <body>
        <div>
            <strong>给元素设置visibility:hidden样式</strong>
            <ol>
                <li>元素1</li>
                <li style="visibility:hidden;">元素2</li>
                <li>元素3</li>
                <li>元素4</li>
            </ol>
        </div>
        <div>
            <strong>给元素设置display:none样式</strong>
            <ol>
                <li>元素1</li>
                <li style="display:none;">元素2</li>
                <li>元素3</li>
                <li>元素4</li>
            </ol>
        </div>
    </body>

3、css3的transition支持visibility属性,但是并不支持display,由于transition可以延迟执行,因此可以配合visibility使用纯css实现hover延时显示效果。提高用户体验。

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/8584

Js插件、 组件、类库、框架的区别

框架和类库等概念的出现都是源于人们对复用的渴望。“不要重复发明轮子”,成了软件界的一句经典名言。从最初的单个函数源代码的复用,到面向对象中类的复用(通常以类库的形式体现)

Js中Array.splice 与 Array.slice 如何区分

splice()方法返回数组中已删除的项,slice()方法返回数组中的选定元素,作为新的数组对象。splice()方法更改原始数组,而slice()方法不更改原始数组。 splice()方法可以使用n个参数:

margin和padding的区别和用法

marigin:就是外边距。padding:就是内边距。怎么就容易记住两者呢?马蓉大家都知道吧,给王宝强带帽子的那位,假如你认识了马蓉是不是想离他远点呢?而马蓉的拼音是marong,是不是和margin特别像呢?

Js中parseInt()和Number()之间有什么区别?

Number()和parseInt()都可以用来进行数字的转换,那么parseInt()和Number()之间的区别是什么?parseInt()函数用于解析字符串并将其转换为指定基数的整数。它需要两个参数,要解析的字符串和要使用的基数。基数是一个介于2和36之间的整数,表示数字的基数。

HTML中src和href之间的区别

src 主要用于元素替换,href 用于和相关文档和外部资源建立相关链接。href 属性说明本地Web资源和定义的资源建立了链接。

CSS隐藏元素的方法及区别

opacity:0将元素本身及其子元素都置为不可见的;visibility:hidden将元素本身及其子元素都置为不可见的;display:none使用这个属性,被隐藏的元素对网页的布局不起作用。

Js绑定事件的两种方式的区别

运行后发现,点击后src没有变化,调试发现,这里this是window对象,而不是img标签对象。顿时感觉有点迷惑,因为以前绑定事件中,拿标签属性都是用的this,怎么这里不对了?

url 、src 、href 的区别

URL统一资源定位符是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示,是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL

html中src与href的区别

写代码的时候就经常把这两个属性弄混淆,到底是href还是src,href表示超文本引用,用在link和a等元素上,href是引用和页面关联,是在当前元素和引用资源之间建立联系,src表示引用资源,表示替换当前元素,用在img,script,iframe上

jQuery中的serialize()和serializeArray()区别

serialize()和serializeArray():都是将表单元素序列化,但是序列化的格式不一样。serialize() 方法通过序列化表单值,创建 URL 编码文本字符串。您可以选择一个或多个表单元素

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广