关于块级元素与行内元素

块级元素

块级元素拥有以下的几个特征：

1. 如果宽度未设置，则元素会自动适应父元素的宽度
2. 可以拥有外边距与内边距
3. 如果高度未设置，则元素会自动适应子元素的高度（假设它们没有设置浮动与定位）
4. 默认情况下,将放置在Html标记里前一元素之后(假设没有浮动或定位)
5. 忽略vertical-align属性

所以，对于块级元素来说，我们没有必要设置width：100%来让它的宽度撑满父元素，而且那样做的话还有可能会对日后的维护带来麻烦。

而且，对于上述第四点来说，我们没有必要对块级元素设置"clear",假设没有浮动来影响，块级元素将自动会在新启的一行里出现。

块级元素：

<p>, <div>, <form>, <header>, <nav>, <ul>, <li>, <h1>

行内元素

行内元素拥有以下的几个特征：

1. 不会像块级元素一样占用一行
2. 支持white-space属性
3. 忽略上下外边距，但是拥有左右外边距以及所有内边距
4. 忽略width与height属性
5. 如果设置浮动，则会变成一个块级元素，将会拥有块级元素的所有特性
6. 支持vertical-align属性

行内元素的表现会像一个文本框。它们将会一个挨着一个出现。

行内元素标签：

<a>, <span>, <b>, <em>, <i>, <cite>, <mark>, <code>.

---

我们可以注意到，其实区分行内元素与块级元素还是比较容易的，块级元素通常可以包含其他的元素，而行内元素一般来说都是基于文本的。

通常来讲，你可以让块级元素包含于另一个块级元素中。也可以让行内元素包含于块级元素或者是行内元素中。但你不可以让一个块级元素包含于行内元素里。但是有一个里例外：你可以在<a>标签里包含块级或者是行内元素。

我们可以通过使用display属性来实现块级元素与行内元素的互换。