HTML中的块级元素和行内元素及区别

HTML中的元素可以分为行内元素和块级元素。
行内元素和块级元素是HTML中两种常见的元素类型。它们在页面中的显示行为和默认布局有所不同。

行内元素：

1. 行内元素不会独占一行，相邻的行内元素会排列在同一行上。
2. 行内元素的高度、宽度、边距和内边距都不可设置。
3. 行内元素只能包含文本或其他行内元素。
4. 常见的行内元素有<span>、<a>、<i>、<em>等。
   示例：

<p>这是一段<span style="color:red;">行内元素</span>。</p>

效果图：

块级元素：

1. 块级元素会独占一行，每个块级元素都会另起一行。
2. 块级元素的高度、宽度、边距和内边距可以设置。
3. 块级元素可以包含其他块级元素和行内元素。
4. 常见的块级元素有<p>、<div>、<h1>、<ul>等。
   示例：

<div style="background-color: pink;">
    <h1>这是一个块级元素的示例标题</h1>
    <p>这是一个块级元素的示例段落。</p>
</div>

效果图：

display：

是CSS中的一个属性，用于设置元素的显示类型。它控制元素是作为块级元素、行内元素还是其他类型来显示。

常见的display属性值：

1. block：将元素显示为块级元素，独占一行，默认情况下块级元素会填满其父元素的宽度。
2. inline：将元素显示为行内元素，不会换行。
3. inline-block：将元素显示为行内块级元素，不会换行，但可以设置宽度、高度、边距和内边距等属性。
4. none：将元素隐藏，不会在页面中显示，占据的空间也不会保留。
5. flex：使用 Flexbox 布局的容器，可用于创建响应式的布局。
6. grid：使用 CSS Grid 布局的容器，可用于创建复杂的网格布局。

示例：

<style>
    .block {
        display: block;
        width: 200px;
        height: 200px;
        background-color: red;
    }
    
    .inline {
        display: inline;
        background-color: green;
    }
    
    .inline-block {
        display: inline-block;
        width: 100px;
        height: 100px;
        background-color: blue;
    }
</style>

<div class="block">块级元素</div>
<span class="inline">行内元素</span>
<span class="inline-block">行内块级元素</span>

效果图：

总结：

需要注意的是，通过CSS的display属性可以修改元素的显示方式，使其从块级元素变为行内元素（display: inline;）或从行内元素变为块级元素（display: block;）。此外，还有一些元素具有特殊的显示方式，如display: inline-block;可以让元素既具有块级元素的特点又具有行内元素的特点。