line-height 比 font-size 大7-8px就可以了
常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。
- 块级元素的特点
（1）比较霸道，自己独占一行
（2）高度，宽度、外边距以及内边距都可以控制。
（3）宽度默认是容器（父级宽度）的100%
（4）是一个容器及盒子，里面可以放行内或者块级元素。
- 注意：
- 只有 文字才 能组成段落 因此 p 里面不能放块级元素，特别是 p 不能放div
- 同理还有这些标签h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，里面不能放其他块级元素。
常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签最典型的行内元素。有的地方也成内联元素
- 行内元素的特点：
（1）相邻行内元素在一行上，一行可以显示多个。
（2）高、宽直接设置是无效的。
（3）默认宽度就是它本身内容的宽度。
（4）**行内元素只能容纳文本或则其他行内元素。**
注意：
- 链接里面不能再放链接。
- 特殊情况a里面可以放块级元素，但是给a转换一下块级模式最安全。
在行内元素中有几个特殊的标签——<img />、<input />、<td>，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。
- 行内块元素的特点：
（1）和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。一行可以显示多个
（2）默认宽度就是它本身内容的宽度。
（3）高度，行高、外边距以及内边距都可以控制。
## 3.2 单行文本垂直居中
行高我们利用最多的一个地方是： 可以让单行文本在盒子中垂直居中对齐。
> **文字的行高等于盒子的高度。**
行高 = 上距离 + 内容高度 + 下距离
上距离和下距离总是相等的，因此文字看上去是垂直居中的。
**行高和高度的三种关系**
- 如果 行高 等 高度 文字会 垂直居中
- 如果行高 大于 高度 文字会 偏下
- 如果行高小于高度 文字会 偏上
1.2 CSS属性书写顺序(重点)
建议遵循以下顺序：
1. 布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）
2. 自身属性：width / height / margin / padding / border / background
3. 文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
4. 其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …
```css
.jdc {
display: block;
position: relative;
float: left;
100px;
height: 100px;
margin: 0 10px;
padding: 20px 0;
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
color: #333;
background: rgba(0,0,0,.5);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}
```
## 1.3 布局流程
为了提高网页制作的效率，布局时通常有以下的布局流程，具体如下：
1、必须确定页面的版心（可视区）， 我们测量可得知。
2、分析页面中的行模块，以及每个行模块中的列模块。其实页面布局，就是一行行罗列而成
3、制作HTML结构。我们还是遵循，先有结构，后有样式的原则。结构永远最重要。
4、然后开始运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块。
## 1.4 页面制作
这个页面的版心是 1200像素 每个版心都要水平居中对齐，所以，我们干脆把版心定义为：
~~~css
.w {
1200px;
margin: auto;
}
~~~
vertical-align 不影响块级元素中的内容对齐，它只针对于**行内元素**或者**行内块元素**，
特别是行内块元素， **通常用来控制图片/表单与文字的对齐**。
我们可以通过vertical-align 控制图片和文字的垂直关系了。 默认的图片会和文字基线对齐。