CSS盒子模型（三）
一、处理内容溢出
| CSS 属性名 | 功能 | 属性值 |
|---|---|---|
| overflow | 溢出内容的处理方式 | visible ：显示，默认值 hidden ：隐藏 scroll ：显示滚动条，不论内容是否溢出 auto ：自动显示滚动条，内容不溢出不显 示 |
| overflow - x | 水平方向溢出内容的处理方式 | 同 overflow |
| overflow - y | 垂直方向溢出内容给的处理方式 | 同 overflow |
注意：
1. overflow - x 、 overflow - y 不能一个是 hidden ，一个是 visible ，是实验性属性，不建议使用。
2. overflow 常用的值是 hidden 和 auto ，除了能处理溢出的显示方式，还可以解决很多疑难杂症
二、 隐藏元素的方式
方式一：visibility 属性
visibility 属性默认值是 show ，如果设置为 hidden ，元素会隐藏。
元素看不见了，还占有原来的位置（元素的大小依然保持）
方式二： display 属性
设置 display:none ，就可以让元素隐藏。
彻底地隐藏，不但看不见，也不占用任何位置，没有大小宽高。
三、样式的继承
有些样式会继承，元素如果本身设置了某个样式，就使用本身设置的样式；但如果本身没有设置某个样式，会从父元素开始一级一级继承（优先继承离得近的祖先元素）。
会继承的 css 属性
字体属性、文本属性（除了vertical-align）、文字颜色 等。
不会继承的 css 属性
边框、背景、内边距、外边距、宽高、溢出方式 等。
一个规律：能继承的属性，都是不影响布局的，简单说：都是和盒子模型没关系的。
四、默认样式
元素一般都些默认的样式，例如：
1. <a> 元素：下划线、字体颜色、鼠标小手。
2. <h1> ~ <h6> 元素： 文字加粗、文字大小、上下外边距。
3. <p> 元素：上下外边距
4. <ul> 、 ol 元素：左内边距
5. body 元素： 8px 外边距（ 4 个方向）
......
优先级： 元素的默认样式 > 继承的样式 ，所以如果要重置元素的默认样式，选择器一定要直接选择器到该元素。
五、布局小技巧
1. 行内元素、行内块元素，可以被父元素当做文本处理。
即：可以像处理文本对齐一样，去处理：行内、行内块在父元素中的对齐。
例如： text - align 、 line - height 、 text - indent 等。
2. 如何让子元素，在父亲中 水平居中：
- 若子元素为块元素，给父元素加上： margin:0 auto; 。
- 若子元素为 行内元素 、 行内块元素 ，给父元素加上： text - align:center 。
3. 如何让子元素，在父亲中 垂直居中：
- 若子元素为块元素，给子元素加上： margin-top ，值为：(父元素 content －子元素盒子总高) / 2。
- 若子元素为 行内元素 、 行内块元素 ：让父元素的 height = line - height ，每个子元素都加上： vertical-align:middle ; 。
补充：若想绝对垂直居中，父元素 font - size 设置为 0 。
六、元素之间的空白问题
产生的原因：
行内元素、行内块元素，彼此之间的换行会被浏览器解析为一个空白字符。
解决方案：
1. 方案一： 去掉换行和空格（不推荐）。
2. 方案二： 给父元素设置 font - size:0 ，再给需要显示文字的元素，单独设置字体大小（推荐）。
七、行内块的幽灵空白问题
产生原因：
行内块元素与文本的基线对齐，而文本的基线与文本最底端之间是有一定距离的。
解决方案：
1. 方案一： 给行行内块设置 vertical ，值不为 baseline 即可，设置为 middel 、 bottom 、 top 均可。
2. 方案二： 若父元素中只有一张图片，设置图片为 display:block 。
3. 方案三： 给父元素设置 font - size: 0 。如果该行内块内部还有文本，则需单独设置 font -size 。