CSS中块级元素、行内元素和行内块元素区别

块级元素、行内元素和行内块元素是 HTML 中三种基本的元素显示类型，它们在布局和排版中起着不同的作用。

块级元素 block

块级元素是指在 HTML 中以块的形式显示的元素。特点如下：

• 独占一行，即使设置宽度也不会和其他元素共享一行
• 可以设置宽度、高度、内外边距等属性
• 宽度默认是其父元素的100%
• 可以包含块级元素和行内元素

常见元素有：<div>、<p>、<h1>-<h6>、<ul>、<ol>、<li>、<form>、<table>等

行内元素 inline

行内元素是指在 HTML 中以行内的方式显示的元素。行内元素也称为内联元素或内嵌元素，常用于控制页面中文本的样式。特点如下：

• 不会独占一行，多个行内元素会在同一行内排列，直到一行排不下才会换行
• 不能设置宽度和高度，只能设置水平方向的内外边距，垂直方向的内外边距会失效
• 宽度由其内容撑开
• 只能包含其他行内元素或文本内容

常见元素有：<span>、<a>、<img>、<strong>、<em>、<i>、<b>等

行内块元素 inline-block

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

• 在一行内排列，可以设置宽度和高度
• 可以设置水平和垂直方向的内外边距
• 宽度由其内容或设置的宽度决定
• 可以包含行内元素和块级元素

常见元素有：<input>、<img>、<button>等

存在问题：自身会存在空白间隙，可以设置它的上一级font-size: 0;消除间隙。

元素之间的转换

三种元素之间可以相互转换，使用 display进行转换

• 转换块状元素 display: block;
• 转换行内元素 display: inline;
• 转换行内块元素 display: inline-block;