块级元素（blocklevel elements）和内联元素（inline elements），有时也称为行内元素，是CSS中用于描述HTML元素在文档流中布局行为的术语，它们的主要区别在于如何影响布局以及如何处理周围的内容。
块级元素
块级元素是那些默认情况下会独占一行的元素，它们的宽度会自动扩展到其父元素的宽度，除非显式地设置了宽度，常见的块级元素包括<div>,<p>,<ul>,<h1>到<h6>等，块级元素的特点包括：
默认情况下，宽度为父容器的100%。
高度、外边距（margin）和内边距（padding）可以控制。
总是在新行开始，即前后都带有折行。
可以包含其它块级元素或内联元素。
通常用作其他元素的容器。
内联元素
内联元素是指那些不会独占一行，并且仅占据其内容所需要空间的元素，内联元素的特点是：
宽度和高度由内容决定，不可通过CSS设置固定值（但可设置maxwidth/height）。
对内边距（padding）、外边距（margin）和边框（border）的支持有限。
不自动换行，而是在同一行内依次排列。
一般只包含数据或文本。
典型的内联元素包括<span>,<a>,<img>,<button>等。
块级元素与内联元素的对比表格
| 特性 | 块级元素 | 内联元素 |
| 显示行为 | 独占一行 | 与其他元素同行显示 |
| 默认宽度 | 父容器宽度 | 内容所需宽度 |
| 宽度可控 | 是 | 否（但可设置最大宽度） |
| 高度可控 | 是 | 否（但可设置最大高度） |
| 边距控制 | 支持内外边距 | 支持内边距，外左边距/右边距有限支持 |
| 包含关系 | 可包含块级和内联元素 | 通常只包含数据或文本，也可包含其他内联元素 |
| 典型用途 | 布局和容器结构 | 文本样式和链接 |
相关问题与解答
Q1: 如何在CSS中将内联元素表现得像块级元素一样？
A1: 可以通过CSS的display属性将内联元素设置为display: block;或者display: inlineblock;来使其具有块级元素的某些特性，使用display: block;会让元素表现完全像块级元素一样独占一行，而display: inlineblock;则可以让元素保持内联特性的同时具备块级元素的高度和宽度设置能力。
Q2: HTML5中的语义化标签如<article>、<section>是否为块级元素？
A2: 是的，HTML5引入的语义化标签如<article>、<section>、<header>、<footer>、<aside>等都是块级元素，它们旨在提供更丰富的文档结构信息，并默认表现为块级元素的布局特性。
原创文章，作者：未希，如若转载，请注明出处：https://www.kdun.com/ask/975227.html
微信扫一扫