CSS10_display显示 与 visibility可见性

一、display（显示）

常用值：

1. display: inline 使元素变成行内元素，拥有行内元素的特性，即不会独占一行。
2. display: block 使元素变成块级元素，独占一行。
3. display: inline-block 融合行内于块级（常给<li>元素设置，这样垂直的列表便可以水平显示了）

• inline：内联元素（a/lable/input/img）可以使用padding上下左右都有效，margin只有left和right产生边距效果，但是top和bottom就不行。不能更改元素的height，width的值，大小由内容撑开。
• block：块级元素（div/form/ol.ul.li/address/table）独占一行，在不设置自己的宽度的情况下，块级元素会默认填满父级元素的宽度。能够改变元素的height，width的值。可以设置padding，margin的各个属性值，top，left，bottom，right都能够产生边距效果。
• inline-block：结合了inline与block的一些特点，通俗的讲，就是不独占一行的块级元素。

二、display: none 与 visibility: hidden

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

1. display: none 视为不存在，且不加载
2. visibility: hidden 可以隐藏某个元素，但依旧占据原空间，影响布局
3. visibility: collapse：一般也会占据原空间，但若是与table相关的元素，比如table、row、column等，会与display: none一样