区块元素和内联元素

区块元素（Block Elements）
概念

块级元素在页面中独占一行，其宽度默认为100%，可以设置宽高，并且会自动换行。常见的块级元素包括<div>、<p>、``至<h6>、<ul>、<ol>、<li>等。这些元素通常用于组织和布局网页结构。

特点
  1. 独占一行：区块元素会独占其所在的行，宽度默认填满其父元素的宽度。
  2. 可以包含其他区块元素和内联元素：区块元素内部可以包含其他区块元素和内联元素。
  3. 默认宽度：宽度默认是100%，即充满其父容器。
常见的区块元素

<div>：通用的区块级容器。<p>：段落。<h1>至<h6>：标题。

<ul>和<ol>：无序和有序列表。<li>：列表项。<blockquote>：块引用。

<pre>：预格式化文本。<form>：表单。

案例
<div>
  <h1>开思通智网
  <p>https://w3.opensnn.com/</p>
  <blockquote>https://w3.opensnn.com/</blockquote>
</div>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
内联元素（Inline Elements）
概念

内联元素与周围的文本在同一行内显示，而不会独占一行。内联元素的宽度和高度通常由其内容决定，而不会自动扩展到父容器的宽度。

特点
  1. 不独占一行：内联元素不会独占一行，其宽度只与其内容相适应。
  2. 只能包含内联元素：内联元素内部只能包含其他内联元素或文本，不可包含区块元素。
  3. 常用于文本修饰：内联元素通常用于对文本进行特定的修饰或功能性操作。
常见的内联元素

<span>：通用的内联容器。<a>：超链接。<strong>和<b>：粗体文本。

<em>和<i>：斜体文本。<img>：图像。<code>：代码片段。

<br>：换行。

案例
<p>
  这是一个段落，其中包含一个
  <a rel="nofollow" href="https://w3.opensnn.com/<">开思通智网</a>，
  一个<strong>开思通智网</strong>文本，
  以及一个<em>https://w3.opensnn.com/<</em>文本。
</p>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
区别

区块元素与内联元素的区别总结：

布局：区块元素占据一整行，内联元素则仅占据其内容所需的宽度。

内容：区块元素可以包含区块和内联元素，内联元素只能包含内联元素和文本。

用途：区块元素用于布局，内联元素用于修饰文本。

易错点

1.内联元素包含区块元素
  • 问题：内联元素内部不允许包含区块元素。这会导致HTML结构不合法，并且在某些浏览器中会出现意外的渲染效果。
  • 解决方法：确保内联元素内部只包含其他内联元素或文本。如果需要包含区块元素，可以使用区块元素包裹内联元素。

错误示范

<span>
  <div>这是一个错误的嵌套。</div>
</span>
  • 1.
  • 2.
  • 3.

正确示范

<div>
  <span>这是一个正确的嵌套。</span>
</div>
  • 1.
  • 2.
  • 3.
2.区块元素嵌套不当
  • 问题：某些区块元素（如<p>）内部不应包含其他区块元素。如果包含，会导致HTML结构不合法，并且在浏览器中可能会导致不正确的显示效果。
  • 解决方法：避免在不允许嵌套区块元素的区块元素内部放置其他区块元素。

错误示范

<p>
  <div>这是一个错误的嵌套。</div>
</p>
  • 1.
  • 2.
  • 3.

正确示范

<div>
  <p>这是一个正确的段落。</p>
  <div>这是一个区块。</div>
</div>
  • 1.
  • 2.
  • 3.
  • 4.
3.内联元素宽高设置失效
  • 问题：内联元素默认不会响应宽度和高度的设置，这会导致样式应用不当。
  • 解决方法：如果需要设置内联元素的宽度和高度，可以将其转换为区块元素或行内块元素。

错误示范

<span style="width: 100px; height: 50px;">这是一个内联元素。</span>
  • 1.

正确示范

<span style="display: inline-block; width: 100px; height: 50px;">这是一个内联块元素。</span>
  • 1.
4.区块元素在内联元素中对齐问题：
  • 问题：区块元素默认会独占一行，这会导致在内联元素中对齐出现问题。
  • 解决方法：使用CSS浮动（float）或弹性布局（flex）等布局技术来调整对齐方式。
<div style="float: left; width: 50px; height: 50px; background: red;"></div>
<span>这是一个内联元素。</span>
  • 1.
  • 2.
5.混合使用时的间距问题：
  • 问题：区块元素和内联元素混合使用时，可能会出现意外的间距或布局问题。
  • 解决方法：使用CSS进行适当的样式调整，如设置margin和padding。
<div style="display: inline-block; width: 50px; height: 50px; background: red;"></div>
<span>这是一个内联元素。</span>
  • 1.
  • 2.

区块元素与内联元素的互相转换-‘display’属性

通过调整display的值，可以改变元素的显示类型，从而使区块元素变为内联元素，或内联元素变为区块元素。

1.区块元素转换为内联元素

如果你希望一个区块元素像内联元素一样在同一行中显示，可以将其display属性设置为inline。

<div style="display: inline;">
  这是一个区块元素，但现在它像内联元素一样显示。
</div>
  • 1.
  • 2.
  • 3.

元素会在同一行中显示，并且宽度根据内容调整，不再独占一行。

2.内联元素转换为区块元素

如果你希望一个内联元素像区块元素一样独占一行并且可以设置宽高，可以将其display属性设置为block。

<span style="display: block; width: 100%; background-color: lightgray;">
  这是一个内联元素，但现在它像区块元素一样显示。
</span>
  • 1.
  • 2.
  • 3.

元素将独占一行，宽度可以手动设置，并且可以像区块元素一样应用margin和padding。

3.使用inline-block进行混合显示

inline-block是一个常见的显示模式，它结合了内联和区块元素的特性。元素在同一行显示，但可以设置宽高。

<div style="display: inline-block; width: 150px; height: 50px; background-color: lightblue;">
  这是一个区块元素，但现在它像内联元素一样显示，并且可以设置宽高。
</div>
  • 1.
  • 2.
  • 3.

元素在同一行显示，仍然可以设置宽高，常用于按钮、图片和自定义布局中。

其他转换方式
  1. 内联元素转换为弹性盒子：使用display: inline-flex可以将内联元素转换为弹性布局的容器，但仍然在一行中显示。
  2. 区块元素转换为网格布局：使用display: grid或display: inline-grid可以将区块元素转换为网格布局，支持复杂的布局方案。

转载自： https://w3.opensnn.com/os/article/10001163