CSS Display(显示) 与 Visibility（可见性）

简述

display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏。

display 属性规定元素应该生成的框的类型。

none 此元素不会被显示。
block 此元素将显示为块级元素，此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block 行内块元素。（CSS2.1 新增的值）
list-item 此元素会作为列表显示。
run-in 此元素会根据上下文作为块级元素或内联元素显示。
compact CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
marker CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
table 此元素会作为块级表格来显示（类似

），表格前后带有换行符。
inline-table 此元素会作为内联表格来显示（类似 ），表格前后没有换行符。
table-row-group 此元素会作为一个或多个行的分组来显示（类似 ）。
table-header-group 此元素会作为一个或多个行的分组来显示（类似 ）。
table-footer-group 此元素会作为一个或多个行的分组来显示（类似 ）。
table-row 此元素会作为一个表格行显示（类似 ）。
table-column-group 此元素会作为一个或多个列的分组来显示（类似 ）。
table-column 此元素会作为一个单元格列显示（类似 ）
table-cell 此元素会作为一个表格单元格显示（类似

）
inherit 规定应该从父元素继承 display 属性的值。

和	） table-caption 此元素会作为一个表格标题显示（类似

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

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

隐藏元素 - display:none或visibility:hidden 区别

隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。
visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

块级元素(block)特性：

• 总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;
• 宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;

内联元素(inline)特性：

• 和相邻的内联元素在同一行;
• 宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变，就是里面文字或图片的大小;

块级元素主要有：

address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li

内联元素主要有：

a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var

可变元素(根据上下文关系确定该元素是块元素还是内联元素)：

applet ,button ,del ,iframe , ins ,map ,object , script

CSS中块级、内联元素的应用：

利用CSS我们可以摆脱上面表格里HTML标签归类的限制，自由地在不同标签/元素上应用我们需要的属性。

主要用的CSS样式有以下三个：

• display:block – 显示为块级元素
• display:inline – 显示为内联元素
• display:inline-block – 显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性
  我们常将
  • 元素加上display:inline-block样式，原本垂直的列表就可以水平显示了。