从这节课开始，咱们将陆续学习一些重要的 CSS 布局属性。这一节，咱们学习显示属性。
咱们先来看一个简略的例子。当单击这个按钮时，面板就显示进去了。这里的面板由暗藏到显示，是通过 JavaScript 管制 CSS display 属性的值来实现的。
display，是管制布局最重要的 CSS 属性，它指定了一个元素是否显示，以及如何显示。每个 HTML 元素都有一个默认的显示值。元素类型不同，默认的显示值也不同，大多数元素的默认显示值是 block 或 inline。
咱们相熟的元素类型有两类：块元素与行内元素。
块级元素总是从一个新行开始，并占据可用的全副宽度，尽可能向左和向右舒展。典型的元素有这些。他们 display 的默认值为 block。
内联元素不从新的一行开始，只占用必要的宽度。典型的元素有这些。他们 display 的默认值为 inline。
咱们来试验一下。
创立 display.html 和 display-style.css 文件。
关上 display.html 文件，构建根本代码，引入内部款式。ul>li*3，增加一个无序列表，填入三个文本。div>span>a，创立三个嵌套的元素，给 a 元素定义链接和文本。
HTML
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<div>
<span>
<a href="https://item.jd.com/10026529185125.html">HTML5 从入门到精通 </a>
</span>
</div>
</body>在浏览器上预览成果，咱们看：三个 li 元素、div 元素默认独占一行，span 元素和 a 元素宽度为链接文本的长度。这是块元素和行内元素默认显示的基本特征。
关上 css 文件，定义选择器 ul li, div，申明款式 display: block。定义选择器 span, a，申明款式 display: inline。
CSS
ul li, div {display: block;}
span, a {display: inline;}在浏览器里再次察看，发现每个元素的类型没有什么变动。
这里，你可能会问：难道元素类型能够扭转吗？是的，通过款式能够扭转元素的默认显示类型。
批改两组款式的 display 属性值，block 改为 inline，inline 改为 block。这样，li、div 两个块元素，span、a 两个行内元素，显示方式就会发生变化。
看一下成果：三个 li 在一行上显示，span 和 a 元素独占了一行。这里的 div 看上去还是独占一行，实际上宽度是被 span 和 a 元素撑开了。
display 款式属性，除了通过 block 和 inline 两个值，来设置元素的显示类型外，还能够通过 none 这个值来暗藏元素。咱们来看个例子。
在 body 里再增加一个 div 元素，在外面输出 emmet 命令：(div.imgbox#imgbox$>{Box $}+br+img)*3，回车，生成三个盒子。给三个 img 引入本地的图片。
HTML
<div>
<div class="imgbox" id="imgbox1">Box 1<br>
<img src="./html.png">
</div>
<div class="imgbox" id="imgbox2">Box 2<br>
<img src="./css.png">
</div>
<div class="imgbox" id="imgbox3">Box 3<br>
<img src="js.png">
</div>
</div>在款式里定义选择器 .imgbox，申明款式 float: left，text-align: center，width: 240px，border: 1px solid gray，margin: 4px，padding: 6px。
再定义选择器 .imgbox img，申明款式 width: 200px。
CSS
.imgbox {
float: left;
text-align: center;
width: 240px;
border: 1px solid gray;
margin: 4px;
padding: 6px;
}
.imgbox img {width: 200px;}在浏览器里查看成果，三个盒子程度参差排列好了。接下来，咱们把第二个盒子暗藏掉。
回到款式，定义选择器 #imgbox2，申明款式 display: none。
CSS
#imgbox2 {display: none;}再看一下成果，第二个盒子隐没了。第三个格子左移，占据了第二个盒子的空间。
回到款式，把 display 属性值批改为 block。
咱们看，Box2 又回来了。
通常，通过设置 display 属性值为 block 或 inline 来显示元素，通过 none 来暗藏元素。元素暗藏后，它原来占据的空间隐没了。那这个空间是否保留下来呢？
款式 visibility: hidden 也会暗藏一个元素，和 display: none 不同的是，该元素仍将占用它暗藏前雷同的空间。元素尽管看不见了，但依然影响页面布局。
正文掉 display: block，给 Box 2 增加 visibility: hidden 款式。
此时，Box2 暗藏了，然而它原来占据的空间还在。
也能够通过 visibility: visible 款式，来从新显示盒子。这在利用 JavaScript 动态控制元素显示和暗藏时，十分有用。
本篇文章相干的教程链接：https://www.bilibili.com/vide…