CSS Display(显示) 与 Visibility（可见性）
display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏。
Box 1
Box 2
Box 3
隐藏元素 - display:none或visibility:hidden
隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。
visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
CSS Display - 块和内联元素
块元素是一个元素，占用了全部宽度，在前后都是换行符。
块元素的例子：
- <h1>
- <p>
- <div>
内联元素只需要必要的宽度，不强制换行。
内联元素的例子：
- <span>
- <a>
如何改变一个元素显示
可以更改内联元素和块元素，反之亦然，可以使页面看起来是以一种特定的方式组合，并仍然遵循web标准。
下面的示例把列表项显示为内联元素：
下面的示例把span元素作为块元素：
注意：变更元素的显示类型看该元素是如何显示，它是什么样的元素。例如：一个内联元素设置为display:block是不允许有它内部的嵌套块元素。
更多实例
这个例子演示了如何显示一个元素的内联元素。
这个例子演示了如何显示一个元素的块元素。
这个例子演示了如何使用表的collapse属性。
相信
771***997@qq.com
参考地址
块级元素(block)特性：
内联元素(inline)特性：
块级元素主要有：
内联元素主要有：
可变元素(根据上下文关系确定该元素是块元素还是内联元素)：
CSS中块级、内联元素的应用：
利用CSS我们可以摆脱上面表格里HTML标签归类的限制，自由地在不同标签/元素上应用我们需要的属性。
主要用的CSS样式有以下三个：
我们常将所有<li>元素加上display:inline-block样式，原本垂直的列表就可以水平显示了。
相信
771***997@qq.com
参考地址
yapa
152***35@qq.com
参考地址
对于 CSS 里的 visibility 属性，通常其值被设置成 visible 或 hidden。
visibility: hidden 相当于 display:none，能把元素隐藏起来，但两者的区别在于：
然而，visibility 还可能取值为 collapse 。
当设置元素 visibility: collapse 后，一般的元素的表现与 visibility: hidden 一样，也即其会占用空间。但如果该元素是与 table 相关的元素，例如 table row、table column、table column group、table column group 等，其表现却跟 display: none 一样，也即其占用的空间会释放。
在不同浏览器下，对 visibility: collapse 的处理方式不同：
yapa
152***35@qq.com
参考地址