一、块级元素

块级元素(Block-level elements)是指在HTML中以块的形式显示的元素。它们通常有以下特征：

• 块元素在页面中以区域块的形式出现

• 每个块元素通常都会独自占据一整行或多个整行

• 可以对其设置宽度、高度、对齐等属性

• 块级元素可以包含其他块级元素和内联元素

常见:元素有<h1>~<h6>、<hr>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标记是最典型的块元素。

块元素的默认属性：

代码语言：javascript

AI代码解释

display: block

二、行内元素

行内元素（Inline elements）是指在HTML中以行内的方式显示的元素。行内元素也称为内联元素或内嵌元素，常用于控制页面中文本的样式。它们通常有以下特征：

• 一个行内元素通常会和其前后的其他行内元素显示在同一行中，不占独立的区域

• 仅仅靠自身的字体大小和图像尺寸来支撑结构

• 一般不可以设置高度、宽度等属性

• 只能设置水平方向的外边距

• 行内元素只占据它对应边框所包含的空间，行内元素的 width 、 height 、 line-height 等设定长、宽和行高的属性都不起作用

• 但是 padding 内边距可以起作用， margin 上下边距不起效，左右边距可以起作用。
  

常见的行内元素有<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<a>、<span>等， 其中<span>标记是最典型的行内元素

行内元素的默认属性：

代码语言：javascript

AI代码解释

display: inline

三、行内块级元素

行内块级元素，它既具有块级元素的特点，也有行内元素的特点。

• 和相邻的行内元素（包含行内块）在同一行显示

• 可以任意设置元素宽度、高度以及内外边距

• 默认宽度就是内容的宽度（行内元素的特点）

常见的行内块级元素有<input>、<img>等

行内块级元素的默认属性：

代码语言：javascript

AI代码解释

display: inline-block

四、元素之间的转换

块级元素、行内元素、行内块级元素之间可以相互转换，设置相应的display属性值即可。对于display存在属性值为none，意思是设置元素不可见并且连盒模型也不生成，一般用于不占空间的隐藏元素

代码语言：javascript

AI代码解释

display: none

行内元素：

行内元素只占据它对应边框所包含的空间，行内元素的 width 、 height 、 line-height 等设定长、宽和行高的属性都不起作用。

但是 padding 内边距可以起作用， margin 上下边距不起效，左右边距可以起作用。

行内元素最常用的就是 span ， br 和 a ，之前 b ， i 和 small 标签也比较常见，分别用来设置加粗，斜体和缩小字体。但这种特殊的样式，最好还是用 CSS 来实现。

行内元素还有很多，如：big ， tt ， abbr ， acronym ， cite ， code ， label， dfn ， em ， kbd ， strong ， samp ， var ， bdo ， map ， object ， q ， script ， sub ， sup 。

块级元素：

块级元素会占据其父元素（容器）一整行的空间，默认情况下块级元素会新起一行。

块级元素的 padding 和 margin 内外边距都可以起作用，但是不管宽度设定为多少，都会占据一整行的空间。

常用的块级元素有 div ， ul ， ol ， li ， form ， h1 - h6 ， hr ， table 。

HTML新增的一些语义化标签，也是块级元素：

<article> 文章内容。

<aside> 伴随内容。

<audio> 音频播放。

<video> 视频。

<canvas> 绘制图形。

<header> 区段头或页头。

<hgroup> 标题组。

<section> 一个页面区段。

<footer> 区段尾或页尾。

<figcaption> 图文信息组标题。

<figure>  图文信息组。

<output> 表单输出。

还有一些不常用但很有意思的块级元素：

<noscript> 不支持脚本或禁用脚本时显示的内容。

<pre> 预格式化文本。

<address> 联系方式信息。

<blockquote> 块引用。

<dd> 定义列表中定义条目描述。

<dl> 定义列表。

<fieldset> 表单元素分组。

<tfoot> 表脚注。

行内块级元素：

行内块级元素也被称为可置换元素，它们既可以设置宽高又不会占据一整行的空间。

常见的行内块级元素有 img ， button ， input ， select ， textarea 。

当然，可以使用 CSS 的 display 属性给元素设置行内、块和行内块。

代码语言：javascript

AI代码解释

/*行内*/display: inline;/*块*/display: block;/*行内块*/display: inline-block;