博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
display与visibility的使用(区别)
阅读量:4448 次
发布时间:2019-06-07

本文共 1043 字,大约阅读时间需要 3 分钟。

display:none;隐藏元素,且此元素无物理位置;

visibility:hidden;隐藏元素,但元素的物理位置依然存在;

因为display:none导致页面上无此元素的空间,js就获取不到此元素的信息,此时应用visibility:hidden来代替display:none;

 

display:

 none 此元素不会被显示。
block 此元素将显示为块级元素,此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素,元素前后没有换行符。
inline-block 行内块元素。(CSS2.1 新增的值)
list-item 此元素会作为列表显示。
run-in 此元素会根据上下文作为块级元素或内联元素显示。
compact CSS 中有值 compact,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。
marker CSS 中有值 marker,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。
table 此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。
inline-table 此元素会作为内联表格来显示(类似 <table>),表格前后没有换行符。
table-row-group 此元素会作为一个或多个行的分组来显示(类似 <tbody>)。
table-header-group 此元素会作为一个或多个行的分组来显示(类似 <thead>)。
table-footer-group 此元素会作为一个或多个行的分组来显示(类似 <tfoot>)。
table-row 此元素会作为一个表格行显示(类似 <tr>)。
table-column-group 此元素会作为一个或多个列的分组来显示(类似 <colgroup>)。
table-column 此元素会作为一个单元格列显示(类似 <col>)
table-cell 此元素会作为一个表格单元格显示(类似 <td> 和 <th>)
table-caption 此元素会作为一个表格标题显示(类似 <caption>)
inherit 规定应该从父元素继承 display 属性的值。

 

visibity: 属性用来确定元素是显示还是隐藏的,这用visibity="visible|hidden"来表示(visible表示显示,hidden表示隐藏)

转载于:https://www.cnblogs.com/shoolnight/p/6401361.html

你可能感兴趣的文章
js 组件化
查看>>
图的应用:哈密尔顿路径
查看>>
js计算日期相减天数
查看>>
MATLAB实现Catmull-Clark细分(CC细分)
查看>>
jquery 判断元素是否隐藏
查看>>
第一百九十五天 how can I 坚持
查看>>
Swift 入门之简单语法(五)
查看>>
多视几何——三角化求解3D空间点坐标
查看>>
Drag+Drop和MouseClick
查看>>
AWS RDS 使用笔记
查看>>
Puppeteer VS Puppeteer-core
查看>>
Rxjava 执行阻塞的原因分析 tolist() observable.from()等。
查看>>
[转载]解决TCP网络传输“粘包”问题
查看>>
arm裸机驱动错误总结
查看>>
C# 程序性能提升篇-1、装箱和拆箱,枚举的ToString浅析
查看>>
lfs(systemv版本)学习笔记-第3页
查看>>
Postman-简单使用(1)
查看>>
[BJOI2014] 大融合
查看>>
最简单的一个java驱动jdbc链接mysql数据库
查看>>
Laravel 加载第三方类库的方法
查看>>