块级元素和行内元素

块级元素：始终占居一行

行内元素：与块级元素相反

块级元素盒子会扩展到与父元素同宽，因此块级元素会占居一行。所有块级元素的父元素都是 body，块级元素的宽度也和浏览器的视口（viewport）一样宽，

这样以来，一个块级元素旁边也就没有空间来容纳另一个块级元素了。

行内元素尽量收缩包裹其内容，因此几个行内元素会并排显示在一行直到它们排满一行才会另起一行。

<!-- 常见的块级元素 -->

div, form, table, header, aside, section, article, figure, figcaption, h1~h6, nav, p, pre, blockqoute, canvas, ol, ul, dl

<!-- 常见的行内元素 -->

span, a, img, label, input, select, textarea, br, i, em, strong, small, button, sub, sup, code

block（块）和 inline（内联）元素

块元素尝试获取整个宽度，并在布局中开始新行。<h1>, <p>, <li>, <div> 都是块元素的示例。

内联元素与其他内联元素保持在同一行中，并且不会开始新行。<a>, <span> 是内联元素的示例。

我们可以使用display属性来更改块或内联函数。

Inline-Block（内联块）

inline-block值混合块和内联特性。盒子的外部被视为内联元素。因此，不会为元素创建新行。框的内部被视为块元素，并应用诸如宽度，高度和边距的属性。

把一个 display 属性值为 block 或者 inline 的元素属性值设置成 inline-block 后，既可以用只对行内元素有效的 text-align: center; 声明对其进行居中以外，还可以用 padding-top 和 padding-bottom 对元素设置上下内边距而无需对其设置背景色，并且能把父元素撑开。