Kodokon kodokon.com

初次布局

区分块级元素与行内元素，并学习几种经典的元素居中技巧。

10 分钟 · 3 题

在 Kodokon 中打开本课

盒子如何在页面上排列？这完全取决于它们的显示模式，由 display 属性控制。块级元素的行为像一块砖：它占据全部可用宽度，并把下一个元素挤到新的一行。标题 <h1>、段落 <p> 和 <div> 标签（没有特定含义的通用盒子）默认是块级的。行内元素的行为像句子里的一个词：它只占据其内容所需的空间，并挨着相邻元素排列。链接 <a> 和 <span> 标签（<div> 的行内对应物）默认是行内的。

HTML
<p>A paragraph: I take up the full width.</p>
<p>Me too, so I start on a new line.</p>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<span>A span, also on the same line.</span>
<p> 标签层层堆叠，链接和 span 则并排排列。

display 属性让你可以改变这一行为：在链接上写 display: block; 会让它占据全部宽度，在 <div> 上写 display: inline; 会让它在文字中流动排列。要留意行内元素的一个重要限制：width 和 height 属性在它们上面会被忽略。要给元素设定尺寸，它必须是块级的。

CSS
a {
  display: block;
  width: 200px;
  background-color: lightblue;
}
现在成了块级，链接接受 200 像素的宽度。

接下来说居中，每个初学者都会问的问题。第一种情况：让盒子内的文本居中。text-align: center; 属性应用在容器上，让它的行内内容（文字、链接、图片）居中。第二种情况：让整个块级盒子居中，比如页面正中的一张卡片。经典技巧：给盒子一个宽度，然后写 margin: 0 auto;。auto 值请浏览器自行算出左右外边距：它会把它们设为相等，从而使盒子居中。

CSS
.card {
  width: 300px;
  margin: 0 auto;
  text-align: center;
  border: 1px solid gray;
  padding: 16px;
}
卡片在页面上居中，它的文字也居中。

让我们回顾一下你在本模块中学到的内容：你已经知道如何链接 CSS 文件，如何用选择器、属性和值来写规则，如何按标签、类或 id 定位元素，如何平衡内边距、边框和外边距，如何为文本设定样式，以及现在的，如何排布并居中盒子。有了这些基础，你已经可以搭建一个简洁、精致的网页了。下一模块将向你介绍更强大的布局工具。

知识检测

确认你已牢记本课的重点内容。

  1. 块级元素和行内元素有什么区别？
    • 块级不能包含文本，行内可以
    • 块级占据全部宽度并另起一行，行内则留在文字的流中
    • 行内总是比块级更大
  2. 如何把一个 300 像素宽的块级盒子水平居中？
    • 在盒子本身上写 text-align: center;
    • 写 margin: 0 auto; 并设定宽度
    • 在盒子上写 padding: auto;
  3. 为什么 width: 200px; 默认对一个 <span> 没有效果？
    • 因为 span 拒绝所有 CSS 属性
    • 因为 200 像素超过了 span 的最大尺寸
    • 因为 span 是行内的，而 width 在行内元素上会被忽略