块元素和行内元素区别详述

发布时间：2023-05-19

块元素和行内元素区别详述

一、块元素和行内元素的基本概念

在HTML中，元素根据显示效果除了分为块元素和行内元素之外，还有一种元素是行内块元素。这三种元素的特点如下：

  • 块元素：在页面上以块的形式显示，独占一行，可以设置宽度和高度，可以设置内外边距和边框。
  • 行内元素：在页面上不会以块的形式显示，可以在一行中与其他元素并排显示，不能设置宽度和高度，不能设置上下的内外边距，水平方向的内外边距和边框可以设置。
  • 行内块元素：在页面上以块的形式显示，可以在一行中与其他元素并列，可以设置宽度和高度，可以设置内外边距和边框。

二、块元素和行内元素在文档流中的表现

块元素会独占一行，所以在页面上，块元素之间都是分开的，它们之间有空白，而行内元素却是紧密排列。块元素会在行内元素前后产生换行。块元素的大小在文档流中占据一定的空间，并且可以设置宽度和高度，可以设置内外边距和边框，而行内元素只有大小与间距这两个属性。

<div>这是一个块级元素</div>
<span>这是一个行内元素</span>

三、块元素和行内元素在受CSS控制时的表现

1. 块级元素受CSS控制

块级元素默认宽度为父元素的宽度，高度为内容的高度。当给块级元素设置CSS时，CSS可以控制块级元素的宽度和高度，还可以控制块级元素的显示方式（比如 display: inline）。块级元素也可以设置内外边距和边框。

<div style="background-color: #f00; width: 200px; height: 100px; margin: 10px; padding: 5px; border: 1px solid #000;">这是一个块级元素</div>

2. 行内元素受CSS控制

行内元素不能设置宽度、高度和内外边距等CSS样式，而通过设置 display: block，可使行内元素展现为块级元素，使其可以设置宽度、高度和边距等属性，但是还是不能设置内边距。

<span style="background-color: #f00; display: block; width: 50px; height: 20px; margin: 10px; padding: 5px; border: 1px solid #000;">这是一个行内元素</span>

3. 行内块元素受CSS控制

行内块元素可以通过CSS设置宽度、高度、内外边距和边框等样式，可以利用行内块元素的特点，让多个块级元素并排显示。

<span style="background-color: #f00; display: inline-block; width: 50px; height: 20px; margin: 10px; padding: 5px; border: 1px solid #000;">这是一个行内块级元素</span>

四、块级元素和行内元素的具体应用场景

1. 块级元素的应用场景

块级元素一般用来包裹大型结构化内容，比如列表、段落、标题、图像、额外区域等。例如：div、ul、ol、h1~h6 等。

2. 行内元素的应用场景

行内元素一般用来包裹小型非结构化内容，比如单词、短语、强调的文本等。例如：a、span、img、input、label 等。

3. 行内块元素的应用场景

行内块元素可以应用在一些元素内部，使它们可以同时设置宽度、高度和内外边距等样式。例如：button、textarea、select 等，也适用于图像、列表、卡片等样式的设计。

五、块级元素和行内元素的协作应用

将行内元素放在块级元素中使用，例如 a 标签可以在 div 中实现换行，a 标签还可以作为图片的链接，链接的一些样式在块状元素 div 上的设置。

<div style="width: 200px; height: 100px; background-color: #f00;">
  <a href="#" style="text-decoration: none;">这是一个链接</a>
</div>

六、小结

块元素和行内元素的区别主要表现在它们在文档中的排布和在样式表中的表现。块级元素有自身的独立的一块空间，所以可以设置宽高，而行内元素只能设置水平方向上的宽高。当然，元素也可以通过设置CSS样式改变原本的块级元素或行内元素的特性，使用时需要根据具体的情况去选取。

推荐文章