CSS 元素显示模式
在网页开发中,HTML 元素默认的表现形态决定了它们如何排列、计算尺寸以及相互嵌套。简单来说,这就是元素'如何展示自己'以及'如何与其他元素相处'。浏览器为每个标签预设了默认的显示模式,而通过 CSS 的 display 属性,我们可以灵活修改这些行为,这是实现复杂布局的关键。
三大核心显示模式
1. 块级元素(Block Level Elements)
典型标签:<div>、<h1>~<h6>、<p>、<ul>、<ol>、<li>、<header>、<footer>等。
核心特性:
- 独占一行:无论内容多少,都会单独占据一整行空间。
- 尺寸可控:可以通过
width和height设置宽高。 - 默认宽度:未设置时默认占满父容器的 100% 宽度。
- 边距生效:
margin和padding的四个方向(上下左右)都能正常生效。 - 容器特性:可以嵌套其他块级元素或行内元素。
代码示例:
.change {
height: 200px;
background-color: aqua;
}
注意事项:文字类块元素(如 <p>、<h1>~<h6>)不能嵌套其他块级元素。例如,<p> 标签主要用于存放文字,里面放 <div> 会导致语义错误,浏览器审查器通常会报错。
2. 行内元素(Inline Elements)
典型标签:<span>、<a>、<strong>、<em>、<b>、<i>、<del>、<ins>等。
核心特性:
- 并肩排列:多个行内元素可以在同一行显示。
- 尺寸受限:
width和height设置无效,尺寸由内容决定。 - 边距限制:
margin和padding仅左右方向生效,上下方向不影响布局。 - 嵌套限制:只能容纳文本或其他行内元素,不能嵌套块级元素。
代码示例:
.span1 {
/* 宽高设置无效 */
: ;
: ;
: hotpink;
}


