块级元素
块级元素拥有以下的几个特征：
- 如果宽度未设置，则元素会自动适应父元素的宽度
- 可以拥有外边距与内边距
- 如果高度未设置，则元素会自动适应子元素的高度（假设它们没有设置浮动与定位）
- 默认情况下,将放置在Html标记里前一元素之后(假设没有浮动或定位)
- 忽略vertical-align属性
所以，对于块级元素来说，我们没有必要设置width：100%来让它的宽度撑满父元素，而且那样做的话还有可能会对日后的维护带来麻烦。
而且，对于上述第四点来说，我们没有必要对块级元素设置"clear",假设没有浮动来影响，块级元素将自动会在新启的一行里出现。
块级元素：
<p>, <div>, <form>, <header>, <nav>, <ul>, <li>, <h1>
行内元素
行内元素拥有以下的几个特征：
- 不会像块级元素一样占用一行
- 支持white-space属性
- 忽略上下外边距，但是拥有左右外边距以及所有内边距
- 忽略width与height属性
- 如果设置浮动，则会变成一个块级元素，将会拥有块级元素的所有特性
- 支持vertical-align属性
行内元素的表现会像一个文本框。它们将会一个挨着一个出现。
行内元素标签：
<a>, <span>, <b>, <em>, <i>, <cite>, <mark>, <code>.
我们可以注意到，其实区分行内元素与块级元素还是比较容易的，块级元素通常可以包含其他的元素，而行内元素一般来说都是基于文本的。
通常来讲，你可以让块级元素包含于另一个块级元素中。也可以让行内元素包含于块级元素或者是行内元素中。但你不可以让一个块级元素包含于行内元素里。但是有一个里例外：你可以在<a>标签里包含块级或者是行内元素。
我们可以通过使用display属性来实现块级元素与行内元素的互换。