本文已参与「新人创作礼」活动，一起开启掘金创作之路。

行内元素和块级元素

一般来说，html的元素分为两种，即块级元素(block level element)和行内元素(inline element)。

块级元素：独占一行，排斥其他元素与其位于同一行，可以设定元素的宽（width）和高（height），块级元素一般是其他元素的容器，可容纳块级元素和行内元素。

块级元素占据其父元素（容器）的整个水平空间，垂直空间等于其内容高度，因此创建了一个“块”。

结构上的包含继承区别可以使块级元素创建比行内元素更”大型“的结构。

行内元素：不可以设置宽（width）和高（height），但可以与其他行内元素位于同一行，行内元素一般不可以包含块级元素。行内元素的高度一般由元素内部的字体大小(font-size)决定，宽度由内容的长度控制。

一个行内元素只占据它对应标签的边框所包含的空间。一般情况下，行内元素只能包含文本数据和其他行内元素。

常见块级元素有：header，footer，nav，article，aside，section， (标题head) h1,h2,h3,h4,h5,h6, (段落paragraph) p, (块) div, (定义列表definition list) dl, (定义标题definition title) dt，(定义描述definition description) dd ，(水平分隔线horizontal rule) hr, (有序列表order list) ol, (无序列表unorder list) ul, (列表项list item) li, (表单) form, (预格式文本pre format) pre, (表格) table ,(表格行table row) tr (表格数据table data) td, (表格表头table head) th；

常见内联元素有：(着重强调) em, (重要性，粗体显示) strong, (斜体显示italic) i (块) span, (按钮) button, (输入框) input,

(超链接anchor锚) a，(标签) label, (代码) code, (下拉框) select, (图片) img, (文本域) textarea、 (粗体文本) b。

常见的空标签： (换行) br (水平线) hr

两者之间的区别：

块级元素占据一整行，内联元素的宽度是其元素内容的宽度，多个内联元素排列会放在同一行里，除非放不下，才会挤到新的一行。
块级元素可以设置宽度width和高度height，而内联元素设置widht和height是无效的。
块级元素可以包含块级元素和内联元素，而内联元素只能包含文本数据和其他行内元素。
块级元素可以设置margin和padding属性，行内元素只有margin-left、margin-right、padding-left、padding-right起作用。

可以通过样式display属性来改变元素的显示方式。

当display的值设为block时，元素将以块级方式呈现；

当display值设为inline时，元素将以行内形式呈现。