栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > Html/CSS > CSS教程

display和visibility的区别

CSS教程 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

display和visibility的区别

visibility隐藏的对象还保留对象显示时所占的物理空间,display则不保留。

vilibility:hidden(隐藏)、visible(显示) style="vislbility:hidden"

display:none(隐藏)、block(显示) style="display:none"

可以保存下面的代码看看效果。

具体步骤:

代码示例:

< div style="border:1px solid #000;background:#eee">
< span style="width:200;height:200;visibility:hidden">
←SS属性为visibility:hidden的对象
< /div>
< div style="border:1px solid #000;background:#666"> < span style="width:200;height:200;display:none"> ←SS属性为display:none的对象 < /div>

特别提示

用visibility属性控制隐藏的对象还占据着它显示时的位置,而display则没有。

特别说明

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

none 隐藏元素,不保留元素显示时的空间。

block块方式显示元素。

inline 以内嵌方式显示元素。

inline-block对象显示为内嵌元素,但所有子对象都显示为块元素,相邻的内嵌元素将显示在同一行,允许空格。

list-item 将块元素显示为列表对象,并可以添加项目标点。(需要IE6.0+支持)

table-header-group 将元素作为表格标题组显示,相当于tHead元素。

table-footer-group 将元素作为表格脚注组显示,相当于tFoot元素。

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

inherit 继承父元素的visibility属性设置。

hidden 隐藏元素,但保留其所占空间。

visible 显示元素(默认值)。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持考高分网!

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/215527.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号