首页 / CSS / CSS的元素的隐藏与显示

CSS的元素的隐藏与显示

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了CSS的元素的隐藏与显示，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1889字，纯文字阅读大概需要3分钟。

内容图文

显示与隐藏

1、介绍：

display：使段落生出行内框

visibility ：属性规定元素是否可见。

2、display属性

值描述
none此元素不会被显示。
block此元素将显示为块级元素，此元素前后会带有换行符。
inline默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block行内块元素。（CSS2.1 新增的值）
list-item此元素会作为列表显示。
run-in此元素会根据上下文作为块级元素或内联元素显示。
compactCSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
markerCSS 中有值 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 属性的值。

3、visibility 属性

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

4、“display:none”和“visibility:hidden"

（1）display:none：元素被隐藏之后，不占用原来的位置

（2）visibility:hidden：元素隐藏之后，占原来的位置

5、例

  h1{
          visibility: hidden;//隐藏占用元素空间
          display: none;//隐藏不占用空间
      }
  p{
          display: inline;//改变为内联元素
      }
  h2{
          display: block;//改变块级元素
      }

相关推荐：

详解CSS元素居中布局的简单方法

以上就是CSS的元素的隐藏与显示的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的CSS的元素的隐藏与显示全部内容，希望文章能够帮你解决CSS的元素的隐藏与显示所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/412219.html

来源：【匿名】