小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
路难行，行路难，一身汗水，满心长。脚下百里路，头顶艳阳天。坚定如磐石，信念似火烧。好男儿，人穷志不缺，天道也酬勤。四方走，走四方，一身是胆，豪气壮。前方坎坷途，千难万般阻。心若有明灯，身似般若行。好男儿，大志存高远，四海皆为家。
显示与隐藏
HTML 所有的元素默认情况下都是显示的，但通过 CSS 提供的相关属性可以将指定元素进行隐藏，或者改变该元素的类型，例如将一个块级元素的显示效果改变为内联元素。
- display 属性：用来设置 HTML 元素的显示类型。
- visibility 属性：用来设置显示或隐藏 HTML 元素。
display 属性
CSS display 属性用来设置 HTML 元素的显示类型，例如将 HTML 页面中某个元素设置为块级元素、内联元素或者行内块级元素的显示类型。当然，display 属性也可以将某个元素隐藏，在运行该 HTML 页面时，用户是看不到这个元素的效果的。
- block：表示将某个元素的显示类型设置为块级元素。
- inline：表示将某个元素的显示类型设置为内联元素。
- inline-block：表示将某个元素的显示类型设置为行内块级元素。
- none：表示将某个元素进行隐藏，不显示在 HTML 页面中。
当为某个元素设置 display 属性的值为 none 时，表示关闭了该元素在 HTML 页面中的显示。这种情况下，由于隐藏的元素不再在 HTML 页面中占用任何区域，所以会导致该元素后的所有兄弟元素的布局显示位置。并且，该元素的所有后代元素也同样会被关闭显示效果。
当将某个元素通过 display 属性值设置为 none 后，该元素的所有后代元素同样也会被隐藏。
当为某个元素设置了 display 属性值为 none 后，会影响该元素后面的所有兄弟元素在 HTML 页面的布局位置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>display属性</title>
<style>
.example-element {
width: 200px;
height: 100px;
border: 2px solid lightcoral;
display: none;
}
.box {
width: 200px;
height: 100px;
background-color: lightcoral;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="example-element">这个元素会被隐藏</div>
<div class="box"></div>
<div class="box"></div>
</body>
</html>
如上述显示效果所示，当为第一个 div 元素设置 display: none; 时，会导致后面的两个兄弟元素在 HTML 页面的布局位置整体向上移动。如果不为第一个 div 元素设置 display:none; 时显示的效果如下图所示：
display 属性除了可以隐藏元素的显示之外，还可以改变元素的显示类型，例如将元素的显示类型设置为块级元素、内联元素或者行内块级元素。
visibility 属性
CSS visibility 属性用来设置 HTML 元素显示或者隐藏，而不更改 HTML 页面的布局。
- visible：表示将某个元素设置为显示。
- hidden：表示将某个元素设置为隐藏。
如果将某个元素的 visibility 属性值设置为 hidden，但其子级元素的 visibility 属性值设置为 visible 的话，则其子级元素依旧会显示在 HTML 页面中。
总结
- display 属性设置元素为隐藏时，不会占用 HTML 页面的区域，导致后面的兄弟元素在 HTML 页面的布局位置发生改变。并且，设置为隐藏的元素的所有后代元素同样会被隐藏。
- display 属性不仅可以设置元素为隐藏还是显示，还可以改变元素的显示类型，例如设置元素的显示类型为块级元素、内联元素或者行内块级元素。
- visibility 属性设置元素为隐藏时，依旧会占用 HTML 页面的区域，这是与 display 属性不同的一点。再有，如果为该元素的后代元素设置
visibility: visible;的话，则后代元素依旧会显示。
