块级元素和行内元素

Posted 2020-09-27

块级元素：始终占居一行

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

块级元素盒子会扩展到与父元素同宽，因此块级元素会占居一行。所有块级元素的父元素都是 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