HTML 行内块级空(void) 元素以及区别，外加对应元素的整理

Posted 2021-07-27 黑木令

本文总结内容: “行内、块级、空(void)” 元素：

  1. 什么是 行内元素、块级元素、空(void)元素?
  2. 行内元素和块级元素有什么区别?
  3. 行内元素有哪些? 块级元素有哪些? 空(void)元素有那些？

废话不多说, 直接上代码以及图例(为了让大家方便阅读, 都有自己验证过程的一些图例作为分享) 。

一: 什么是 行内元素、块级元素、空(void)元素:

1. 行内元素、块级元素概念:
   1. 每一个网页元素(html标签)都有一个 display 属性, 用于确定该元素的类型; 
   2. 每一个元素都有默认的 display 属性值, 比如 div 元素, 它的默认 display 属性值为 "block", 称为“块级”元素(block-level); 而 span 元素的默认 display 属性值为 "inline", 称为 "行内" 元素 。

2. 行内元素:
   1. 没有自己的独立空间, 和有他元素都在一行上, 它是依附于其他块级元素存在的;
   2. 高度、行高、外边距、内边距 都不可改变, 因此, 对行内元素设置 高度、宽度、内外边距 等属性, 都是无效的;
   3. 文字的宽度不可改变, 只能容纳文本或者其他行内元素, 其中 'img' 是行元素 。

3. 块级元素:
   1. 会自动占据一定矩形空间, 可以通过设置 高度、宽度、内外边距 等属性, 来调整的这个矩形的样子 。
   

---

二: 行内元素和块级元素有什么区别：

1. 默认 dispalay 属性:
   1. 块级：display: block;
   2. 行内：display: inline;

2. 排版时的占据空间:
   1. 块级：块级元素会独占一行，默认情况下宽度自动填满其父元素宽度 。
   2. 行内：行内元素不会独占一行，相邻的行内元素会排在同一行。其宽度随内容的变化而变化。

3. 设置宽高 width, height:
   1. 块级：块级元素可以设置宽高 。
   2. 行内：行内元素不可以设置宽高 (设置宽高后不生效) 。
　　　　
4. 设置 margin, padding:
   1. 块级：块级元素可以设置 margin, padding 。
   2. 行内：行内元素水平方向的 margin-left; margin-right; padding-left; padding-right;可以生效。但是竖直方向的margin-bottom; margin-top; padding-top; padding-bottom;却不能生效 。


"注意:" 虽然这里和标题一有点重复的感觉, 但还是在这里具体列举出来, 这样我们会更直观的了解不同点 。

---

三: 行内元素有哪些? 块级元素有哪些? 空(void)元素有那些？

1. 行内元素(11): a、b、span、img、input、strong、select、label、em、button、textarea 。

2. 块级元素(9): div、ul、li、dl、dt、dd、p、h1-h6、blockquote 。

3. 空元素(6): 即系没有内容的HTML元素, 例如: br、meta、hr、link、input、img 。

之前有整理过部分知识点, 现在将整理的相关内容, 验证之后慢慢分享给大家; 这个专题 就是 “前端HTML” 的相关专栏; 不积跬步，无以至千里, 戒焦戒躁 。

如果对你有所帮助，喜欢的可以点个关注, 必然回访; 文章还一直持续打磨 。

有什么想要了解的前端知识吗? 可以评论区留言, 会及时跟进分享所提内容 。

整理知识点不易, 每次都是在工作繁忙之余夜深人静之时整理, 无论知识点是大是小, 都会验证后再分享, 以防自己发表的文章给大家造成误导 。如有问题还望不吝赐教，本人会及时更改 (本文原创, 如需转载，请注明出处) 。