path: root/files/zh-cn/conflicting/learn/css/building_blocks/index.html

---
title: 盒模型
slug: conflicting/Learn/CSS/Building_blocks
translation_of: Learn/CSS/Building_blocks
translation_of_original: Web/Guide/CSS/Getting_started/Boxes
original_slug: Web/Guide/CSS/Getting_started/Boxes
---
<p>{{ CSSTutorialTOC() }}</p>

<p>{{ previousPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Lists", "列表") }}这是 <a href="/zh-CN/docs/CSS/开始">CSS入门教程</a> 的<span style="line-height: 1.5;">第11节，本节教你如何使用CSS来控制一个可见元素所占据的空间。在示例文档中，你可以修改元素占据的空间并增加装饰规则。</span></p>

<h2 class="clearLeft" id="信息：盒模型">信息：盒模型</h2>

<p>当你的浏览器展现一个元素时，这个元素会占据一定的空间。这个空间由四部分组成。</p>

<p>中间是<em>元素</em>呈现内容的区域。这个区域的外面是<em>内边距</em>。再外面是<em>边框</em>。最外面的是<em>外边距</em>，外边距将该元素与其它元素分开。</p>

<table>
 <tbody>
  <tr>
   <td style="width: 22em;">
    <div style="background-color: #eee; padding: 0px 2em 2em 2em; width: 16em;">
    <p style="text-align: center; margin: 0px;">外边距</p>

    <p style="text-align: center; margin: 0px 0px -.75em 0px;">边框</p>

    <div style="background-color: #fff; padding: 0px 2em 2em 2em; border: 4px solid #fd9;">
    <p style="text-align: center;">内边距</p>

    <div style="background-color: #eee;">
    <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #999;">元素</p>
    </div>
    </div>
    </div>

    <p><em>浅灰色标出了布局的几个部分。</em></p>
   </td>
   <td>
    <div style="background-color: #fff; padding: 0px 2em 2em 2em; width: 16em;">
    <p style="text-align: center; margin: 0px;"> </p>

    <p style="text-align: center; margin: 0px 0px -.75em 0px;"> </p>

    <div style="background-color: #fff; padding: 0px 2em 2em 2em; border: 4px solid #fd9;">
    <p style="text-align: center;"> </p>

    <div style="background-color: #fff;">
    <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #999;">元素</p>
    </div>
    </div>
    </div>

    <p><em>你在浏览器看到的样子。</em></p>
   </td>
  </tr>
 </tbody>
</table>

<p>内边距，边框和外边距在元素的上、右、下、左都可以有不同的大小。所有这些大小值都可以为0。</p>

<h3 id="颜色">颜色</h3>

<p>内边距总是跟元素的背景色一样，所以当你设置背景色时，你会发现背景色在元素本身和内边距上都生效了。外边距总是透明的。</p>

<table>
 <tbody>
  <tr>
   <td style="width: 22em;">
    <div style="background-color: #eee; padding: 0px 2em 2em 2em; width: 16em;">
    <p style="text-align: center; margin: 0px;">外边距</p>

    <p style="text-align: center; margin: 0px 0px -.75em 0px;">边框</p>

    <div style="background-color: #efe; padding: 0px 2em 2em 2em; border: 4px solid #fd9;">
    <p style="text-align: center;">内边距</p>

    <div style="background-color: #ded;">
    <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #898;">元素</p>
    </div>
    </div>
    </div>

    <p><em>元素有绿色的背景。</em></p>
   </td>
   <td>
    <div style="background-color: #fff; padding: 0px 2em 2em 2em; width: 16em;">
    <p style="text-align: center; margin: 0px;"> </p>

    <p style="text-align: center; margin: 0px 0px -.75em 0px;"> </p>

    <div style="background-color: #efe; padding: 0px 2em 2em 2em; border: 4px solid #fd9;">
    <p style="text-align: center;"> </p>

    <div style="background-color: #efe;">
    <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #898;">元素</p>
    </div>
    </div>
    </div>

    <p><em>你在浏览器看到的样子。</em></p>
   </td>
  </tr>
 </tbody>
</table>

<h3 id="边框">边框</h3>

<p>你可以用边线或者边框来装饰元素。</p>

<p>用 {{ cssxref("border") }} 属性给元素四周指定统一的边框。在属性值中指定边框的宽度（通常是以显示到屏幕上的像素为单位）， 样式， 还有颜色。</p>

<p>样式包括：</p>

<table style="margin-left: 2em;">
 <tbody>
  <tr>
   <td style="width: 6em;">
    <div style="border: 2px solid #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>solid</code></div>
   </td>
   <td style="width: 6em;">
    <div style="border: 2px dotted #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>dotted</code></div>
   </td>
   <td style="width: 6em;">
    <div style="border: 2px dashed #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>dashed</code></div>
   </td>
   <td style="width: 6em;">
    <div style="border: 4px double #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>double</code></div>
   </td>
  </tr>
  <tr>
   <td style="width: 6em;">
    <div style="border: 2px inset #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>inset</code></div>
   </td>
   <td style="width: 6em;">
    <div style="border: 2px outset #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>outset</code></div>
   </td>
   <td style="width: 6em;">
    <div style="border: 4px ridge #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>ridge</code></div>
   </td>
   <td style="width: 6em;">
    <div style="border: 4px groove #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>groove</code></div>
   </td>
  </tr>
 </tbody>
</table>

<p>你也可以通过设置样式为 <code>none</code> 或 <code>hidden</code> 来明确地移除边框，或者设置边框颜色为 <code>transparent</code> 来让边框不可见，后者不会改变布局。</p>

<p>如果一次只指定某一个方向的边框，就用属性： {{ cssxref("border-top") }}， {{ cssxref("border-right") }}， {{cssxref("border-bottom")}}， {{cssxref("border-left")}}。 你可以用这些属性指定某个方向上的边框，或者不同方向上的不同边框。</p>

<div class="tuto_example">
<div class="tuto_type">例子</div>

<p>下面的代码设置了一个h3元素的背景色和顶部边框：</p>

<pre class="brush:css">h3 {
  border-top: 4px solid #7c7; /* 中绿 */
  background-color: #efe;     /* 浅绿 */
  color: #050;                /* 深绿 */
  }
</pre>

<p>结果如下：</p>

<table>
 <tbody>
  <tr>
   <td>
    <p style="font-size: 133%; font-weight: bold; background-color: #efe; border-top: 4px solid #7c7; color: #050; padding-right: 6em;">样式化后的标题</p>
   </td>
  </tr>
 </tbody>
</table>

<p>下面的规则通过给图片四周设置中灰色边框，使得图片元素更好辨认：</p>

<pre class="brush:css">img {border: 2px solid #ccc;}
</pre>

<p>结果如下：</p>

<table>
 <tbody>
  <tr>
   <td>图片:</td>
   <td style="border: 2px solid #ccc;"><img alt="Image:Blue-rule.png" class="internal" src="/@api/deki/files/47/=Blue-rule.png"></td>
  </tr>
 </tbody>
</table>
</div>

<h3 id="外边距和内边距">外边距和内边距</h3>

<p>使用外边距和内边距调整元素的位置，并在其周围创建空间。</p>

<p>用 {{ cssxref("margin") }} 属性或者 {{ cssxref("padding") }} 属性分别设置外边距和内边距的宽度。</p>

<p>如果你指定一个宽度，它将会作用于元素四周（上、右、下、左）。</p>

<p>如果你指定两个宽度， 第一个宽度会作用于顶部和底部，第二个宽度作用于右边和左边。</p>

<p>你也可以按照顺序指定四个宽度： 上、右、下、左。</p>

<div class="tuto_example">
<div class="tuto_type">例子</div>

<p>下面的规则通过给元素四周设置红色边框，标记出了类名为  <code>remark</code> 的段落元素。</p>

<p>文本周围的内边距将边框与文字拉开一点距离。</p>

<p>左外边距使得段落相对于其余文本产生缩进：</p>

<pre class="brush:css">p.remark {
  border: 2px solid red;
  padding: 4px;
  margin-left: 24px;
  }
</pre>

<p>结果如下：</p>

<table>
 <tbody>
  <tr>
   <td>
    <p>这是一个普通的段落。</p>

    <p style="border: 2px solid red; padding: 4px 6em 4px 4px; margin: 0px 0px 0px 24px;">这是一个标记段落。</p>
   </td>
  </tr>
 </tbody>
</table>
</div>

<div class="tuto_details">
<div class="tuto_type">更多细节</div>

<p>当你使用外边距和内边距来调整元素的布局时，你的样式规则会与浏览器的默认规则以复杂的方式相互作用。</p>

<p>不同的浏览器布局元素的方式不一样。直到你的样式表修改默认样式，结果可能看起来相似。有时这可能让你的样式表给出令人惊讶的结果。</p>

<p>为了达到理想的效果，你可能需要改变文档的标记。本教程的下一页有更多关于这个的信息。</p>

<p>欲知更多关于内边距，外边距和边框的细节， 请看 <a href="/zh-CN/docs/Web/CSS/box_model" title="en-US/docs/Web/Guide/CSS/box model"><span class="external">盒模型</span></a> 参考页。</p>
</div>

<h2 id="实践：添加边框">实践：添加边框</h2>

<p>编辑你的CSS文件，<code>style2.css</code>。添加下面的规则，给页面中每个标题元素上面画一条线：</p>

<pre class="brush:css">h3 {border-top: 1px solid gray;}
</pre>

<p>如果你做了前一页的挑战题，现在修改你已经创建的规则，或者添加这条新规则，给每个列表项的下面增加一定的空间：</p>

<pre class="brush:css">li {
  list-style: lower-roman;
  margin-bottom: 8px;
  }
</pre>

<p>刷新你的浏览器看看效果：</p>

<table style="background-color: white; border: 2px outset #3366bb; padding: 1em;">
 <tbody>
  <tr>
   <td>
    <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p>

    <ul style="">
     <li style="margin-bottom: 8px;">Arctic</li>
     <li style="margin-bottom: 8px;">Atlantic</li>
     <li style="margin-bottom: 8px;">Pacific</li>
     <li style="margin-bottom: 8px;">Indian</li>
     <li style="margin-bottom: 8px;">Southern</li>
    </ul>

    <p style="font-weight: bold; font-size: 133%; margin-top: 1em; margin-bottom: .3em; padding: .4em 4em .16em 0; border-top: 1px solid gray;">(B) Numbered paragraphs</p>

    <p><strong>1: </strong>Lorem ipsum</p>

    <p><strong>2: </strong>Dolor sit</p>

    <p><strong>3: </strong>Amet consectetuer</p>

    <p><strong>4: </strong>Magna aliquam</p>

    <p><strong>5: </strong>Autem veleum</p>
   </td>
  </tr>
 </tbody>
</table>

<div class="tuto_example">
<div class="tuto_type">挑战</div>

<p>给你的样式表添加一个规则，为下面的海洋列表增加 一个四面环绕且带有颜色的边框，来突出海洋——如下图所示：</p>

<table style="background-color: white; border: 2px outset #3366bb; padding: 1em;">
 <tbody>
  <tr>
   <td>
    <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p>

    <div style="border: 12px solid #69b; padding-left: 1em;">
    <ul style="">
     <li style="margin-bottom: 8px;">Arctic</li>
     <li style="margin-bottom: 8px;">Atlantic</li>
     <li style="margin-bottom: 8px;">Pacific</li>
     <li style="margin-bottom: 8px;">Indian</li>
     <li style="margin-bottom: 8px;">Southern</li>
    </ul>
    </div>

    <p style="font-weight: bold; font-size: 133%; margin-top: 1em; margin-bottom: .3em; padding: .4em 4em .16em 0; border-top: 1px solid gray;">(B) Numbered paragraphs</p>

    <p><strong>. . .</strong></p>
   </td>
  </tr>
 </tbody>
</table>

<p> </p>

<p>（不必完全保证宽度和颜色和这里的一模一样。）</p>
</div>

<p><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Challenge_solutions#Boxes" title="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Challenge_solutions#Boxes">看答案。</a></p>

<h2 id="下一节">下一节?</h2>

<p>{{ nextPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Layout", "布局") }}通过指定外边距和内边距，你已经能修改文档的布局了。下一页，你将使用别的方式来改变文档的<a href="/zh-CN/docs/Web/Guide/CSS/Getting_Started/Layout" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Layout">布局</a> 。</p>