CSS display属性，设置元素显示与否

display属性

CSS的display属性，可以用于设置HTML元素显示与否，以及以何种方式进行显示。HTML元素，通常情况下具有一个默认的display属性值，比如块级元素默认的display为block，行内元素的默认display为inline。display属性的其它属性值如下表。

可选属性值

属性值	描述
block	元素以块级元素显示
inline	元素以行内元素显示
inline-block	元素以行内的块级元素显示
none	元素不显示

提示：display属性一般只是改变元素的显示方式，并不会改变元素的性质种类，所以，即便将原本为行内元素的元素display属性设置为block之后，也不能在该元素中包含其它块级元素。

语法

element{display:value;}

display属性实例代码，及在线编辑器

一般情况下，可以将无序列表中的li元素的display属性设置为inline，以此来设计一个导航条：

<ul id='dh'>
  <li>首页</li>
  <li>CSS</li>
  <li>HTML</li>
  <li>JavaScript</li>
  <li>Python</li>
  <li>人工智能</li>
</ul>

<style>
  #dh{list-style:none;border:1px solid skyblue;height:50px;}
  #dh li{display:inline;line-height:50px;margin-right:10px;}
</style>

实例二

下方实例通过display属性，将段落p隐藏起来：

<p>段落一</p>
<p id='p2'>段落二</p>
<p>段落三</p>

<style>
    #p2{display:none;}
</style>

全栈编程 / CSS教程(可向下滚动)：