一、显示与隐藏

1 . 通过display样式 - none隐藏
语法 - display:none;
特点 - 隐藏以后，元素原有的位置会被占用，
2 . 通过visibility - hidden隐藏
- visible显示（默认值）
语法 - visibility:hidden;
特点 - 隐藏以后，元素原有的位置还会保留。

二、display样式

1 none 设置隐藏
2 block 将元素变为块元素的显示效果。与HTML元素本身并无联系。
3 inline 将元素变为内联元素的显示效果。与HTML元素本身并无联系。
4 inline-block 将元素变为行内块元素的效果显示。
行内块元素:
元素本身以块元素的效果显示（宽和高设置有效）
元素之间以行内元素的排列方式显示（水平排列，不会独占一行）
如： <span>你好</span> <span>你好</span> <span>你好</span>
或： <span>你好</span>
<span>你好</span>
span>你好</span>
在浏览器页面中显示时，元素之间也会出现一个“间隙”。
若： <span>你好</span><span>你好</span><span>你好</span>
这样写，就可以消除间隙，但是代码的可读性不好。

三、overflow样式（设置子元素溢出时父元素如何处理）

1 visible 默认值，内容可能会溢出。
内容溢出定义：
当定义一个元素，并且在此元素定义文本内容，当文本内容过多时，可能显示会超出当前元素的区域。
但是在IE6中父元素会被撑开，不会溢出。
2 hidden 溢出的内容会被修剪，并且修剪掉的内容是不可见的
3 scroll 浏览器会显示竖直、水平滚动条来显示内容
4 auto 有两种可能的效果
(1)当内容溢出时，会自动添加竖直滚动条（相当于scroll）
(2)当内容不会溢出时，不会添加滚动条。（相当于默认样式）