CSS 基础:display 属性详解
display 属性是控制页面布局最核心的 CSS 属性之一。它决定了元素如何被渲染,以及它在文档流中占据的空间。
display 属性概览
每个 HTML 元素都有一个默认的 display 值,绝大多数元素的默认显示值是 block(块级)或 inline(行内)。理解这些默认行为是掌握布局的基础。
块级元素 (Block-level Elements)
块级元素总是以新行起始,并且会独占整行宽度(沿左右方向无限延伸)。常见的块级元素包括:
<div><h1>-<h6><p><form><header><footer><section>
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 3px solid #a6d8a8;
}
</style>
</head>
<body>
<div>The <div> element is a block-level element.</div>
</body>
</html>
行内元素 (Inline Elements)
行内元素不以新行起始,它们只占据必要的宽度,可以并排排列。常见的行内元素有:
<span><a><img>
覆盖默认显示值
虽然每个元素都有默认显示值,但我们可以通过 CSS 将其覆盖。将行内元素变为块级元素(反之亦然),在制作特定页面布局时非常有用,且符合 Web 标准。
一个常用的例子是将 <li> 元素设为行内元素,从而创建水平菜单:


