您的当前位置:首页正文

浅析css的display属性

2020-11-27 来源:星星旅游

本文主要和大家浅析css的display属性,需要的朋友可以参考下,希望能帮助到大家。下面跟随小编一起来看一下吧。

display有哪些比较常用的值呢?

在通常的项目开发中比较容易被使用的值主要有:

none(元素不会被显示);
block(元素将显示为块级元素,元素前后会带有换行符);
inline(元素会被显示为内联元素,元素前后没有换行符);
inline-block(行内块元素。CSS2.1 新增的值);
table(元素会作为块级表格来显示,类似 <table>,表格前后带有换行符);
table-row(元素会作为一个表格行显示,类似 <tr>);

table-cell(元素会作为一个表格单元格显示,类似 <td> 和 <th>)。

有所区别的display="none"和visibility="hidden"?

一眼看去,他们都是元素隐藏的意思;没错,它们确实是元素隐藏哦!但是,它们还是有所区别的啦!

visibility="hidden"表示(仅)隐藏,不可恢复。当visibility被设置为"hidden"的时候,元素虽然被隐藏了,仍然占据它原来所在的位置。visibility会保留元素的位置。元素被隐藏之后,就不能再接收到其它事件了,也不能再接收响应到事件了,因此也就无法通过JS令其显示出来。

display="none"隐藏(元素消失),可恢复。当display被设置为"none"的时候,除了元素隐藏之外,与visibility="hidden"完全相反。

display与visibility的属性值的设置,还有回流与重绘上的区别哦!想了解回流与重绘详情请点击:《页面回流与页面重绘》

jQuery 与 zepto 中dispaly:none的区别?

dispaly:none在jQuery 与 zepto 中的区别!想必大部分初学者还是不了解的吧!想了解jQuery 与 zepto 中dispaly:none的区别,嘿嘿,那就点击:《jQuery 与 zepto 中dispaly:none的区别》

相关推荐:

display属性大全

显示display元素常见属性整理

css display属性