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

Posted 黑木令

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了HTML 行内块级空(void) 元素以及区别,外加对应元素的整理相关的知识,希望对你有一定的参考价值。

本文总结内容: “行内、块级、空(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” 的相关专栏; 不积跬步,无以至千里, 戒焦戒躁 。

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

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

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

以上是关于HTML 行内块级空(void) 元素以及区别,外加对应元素的整理的主要内容,如果未能解决你的问题,请参考以下文章

行内元素和块级元素的区别

块级元素和行内元素以及display中blockinline和inline-block的区别

html元素种类除了行内元素和块级元素还有啥???

HTML行内元素块级元素行内块级元素的特点与区别

块级元素与行内元素的区别

块级元素与行内元素区别