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> 元素设为行内元素，从而创建水平菜单：
