css 隐藏元素

  • css 隐藏元素已关闭评论
  • 44 次浏览
  • A+
所属分类:Web前端
摘要

display , visibility 仅会改变元素显示,不会改变元素种类。可以配合 js 使用使元素可以动态的显示隐藏。


display , visibility 仅会改变元素显示,不会改变元素种类。可以配合 js 使用使元素可以动态的显示隐藏。

可以使用 displayvisibility 实现html元素的隐藏功能,但是这两种方式有不一样的地方。display 中的 none 值隐藏,元素后不会在占据页面空间,但是 visibility 的 hidden 值隐藏,元素是看不见了不过会占据页面空间。

display 说明

说明
none 隐藏。
block 使元素占据一行的全部空间 。
inline 使元素仅占据所需的宽度(作用元素中不能有块元素)。

注意 : 使用 inline 时元素不能有块元素不然样式不生效。

<!DOCTYPE html> <html> <head> <style> li,div {   display: inline; } </style> </head> <body>  <p>把链接列表显示为水平导航栏:</p>  <ul>   <li><a target="_blank">HTML</a></li>   <li><a target="_blank">CSS</a></li>   <li><a target="_blank">JavaScript</a></li> </ul>        <div>1</div>   <div>1</div>        <div><h1>2</h1></div>   <div><h1>2</h1></div>          p 标签内容被隐藏了   <div><p>123<p></div>  </body> </html> 

visibility 说明 用法和 display 差不多。

说明
visible 默认值显示。
hidden 元素不可见,但还占据页面上的空间
collapse 当在表格元素中使用时,此值可删除一行或一列,但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上,会呈现为 "hidden"。
inherit 规定应该从父元素继承 visibility 属性的值。