非替换、替换、块级、行内以及行内块元素

本文章的知识超级基础，平时比较容易忽略，但还是想总结一下。

首先，我们来了解一下什么是HTML标签，什么是HTML元素。起初，我一直认为HTML标签就是HTML元素，实际上并非如此，HTML元素是通过使用HTML标签进行定义的。例如<p>文字内容</p>这就是一个HTML元素。HTML标签是用来标记HTML元素的，很好理解HTML网页上所用到的标签都是HTML标签。以刚才的例子来说<p></p>有开始标签和结束标签就是HTML标签，当然
<img> <input>等不需要结束标签的也是HTML标签。

非替换元素

(X)HTML的大多数元素都是非替换元素，浏览器会直接将内容显示出来。例如<p>文字内容区</p>

替换元素

浏览器通过标签的元素和属性来判断显示的内容。例如(X)HTML中的<img> <input> <select> 等标签定义出来的没有实际内容的元素就是替换元素。

块级元素

块级元素顾名思义就是内容区域是一个块区域，特征是独自占领一行，自动充满父级元素的内容区域。设置width，height，line-height，padding， margin均有效。

行内元素

行内元素的内容区域是当前行，不独占一行。允许左右有元素。设置width和height无效。行内元素又分为行内替换元素和行内非替换元素。对于行内替换元素来说，设置width， height，margin，padding和line-height均有效。例如<input>对于行内非替换元素来说，设置margin-left，margin-right，line-height有效，设置margin-top，margin-bottom无效。设置padding-left，padding-right有效，设置padding-top，padding-bottom无效。例如<span></span>

行内块元素

行内块元素（display: inline-block）具有行内元素和块元素的特征，可以和其他行内元素处于同一行，设置width，height，padding， margin均有效。

文章仅供参考，如有错误，不严谨之处，十分欢迎纠正。

文章参考

• https://www.cnblogs.com/wkylin/archive/2011/05/12/2044328.html
• https://www.cnblogs.com/pomoho/p/4381753.html