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

---
title: 布局
slug: conflicting/Learn/CSS/CSS_layout
translation_of: Learn/CSS/CSS_layout
translation_of_original: Web/Guide/CSS/Getting_started/Layout
original_slug: Web/Guide/CSS/Getting_started/Layout
---
<p>{{ CSSTutorialTOC() }}</p>

<p>{{ previousPage("/zh-CN/docs/CSS/开始/Boxes", "盒模型")}}本文是 <a href="/zh-CN/docs/CSS/开始" title="en/CSS/Getting Started">CSS入门教程</a> 的第12部分; 主要讲述一些修改页面布局的方法。 你可以通过学习来修改自己示例的布局。</p>

<h2 class="clearLeft" id="说明_布局">说明: 布局</h2>

<p>你可以通过 CSS 来设置布局的炫酷效果。其中所涉及的部分高阶技术并不是本文范畴。</p>

<p>当你设计一个简单布局时, 你的样式表与浏览器默认样式表之间的交互、以及与布局引擎的交互都是相当复杂的。 这也是一个高阶话题，并不在本文范畴。</p>

<p>本文主要介绍一些简单的布局方法。（高阶技术请参阅外部链接 <a href="http://learnlayout.com/">学习高级布局</a>）</p>

<h3 id="文档结构">文档结构</h3>

<p>当你想控制文档布局时，就不得不改变它的结构。</p>

<p>页面标记语言通常都会有公共标签来创建结构。例如, 在 HTML 中你可以使用 {{ HTMLElement("div") }} 元素来创建结构。</p>

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

<p>在你的示例中, 编号段落并没有自己的容器。</p>

<p>你的样式表无法为这些段落画出边框，因为没有选择器指向它们。</p>

<p>为了解决这个问题, 你可以在段落之外添加一个{{ HTMLElement("div") }} 。这个标签是唯一的，可以指定一个id属性来标识:</p>

<pre class="brush:html;highlight:[2,8]">&lt;h3&gt;Numbered paragraphs&lt;/h3&gt;
&lt;div id="numbered"&gt;
  &lt;p&gt;Lorem ipsum&lt;/p&gt;
  &lt;p&gt;Dolor sit&lt;/p&gt;
  &lt;p&gt;Amet consectetuer&lt;/p&gt;
  &lt;p&gt;Magna aliquam&lt;/p&gt;
  &lt;p&gt;Autem veleum&lt;/p&gt;
&lt;/div&gt;
</pre>

<p>现在可以通过样式表在每个列表周围画出边框了:</p>

<pre class="brush:css">ul, #numbered {
  border: 1em solid #69b;
  padding-right:1em;
}
</pre>

<p>运行结果如下:</p>

<table style="background-color: white; border: 2px outset #36b; padding: 1em; width: 30em;">
 <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; margin-bottom: 16px; padding: 1em;">
    <ul style="">
     <li>Arctic</li>
     <li>Atlantic</li>
     <li>Pacific</li>
     <li>Indian</li>
     <li>Southern</li>
    </ul>
    </div>

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

    <div style="border: 12px solid #69b; margin-bottom: 8px; padding: 0px 12em 0px .5em;">
    <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>
    </div>
   </td>
  </tr>
 </tbody>
</table>
</div>

<h3 id="大小单位">大小单位</h3>

<p>到目前为止，你可以通过像素来指定大小。这在有些情况下是非常合适的，比如电脑屏幕显示。 但当用户改变字体大小之后，你的布局可能会发生错位。</p>

<p>因此，最好通过百分比或 ems (<code>em</code>) 来指定大小。 em 通常是指当前字体大小(字母m的宽度)。当用户改变字体大小时，你的布局会自己修正。</p>

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

<p>文本左边的border通过像素来指定大小。</p>

<p>文本右边的border通过 ems来指定大小。</p>

<p>在你的浏览器中，修改字体大小，会发现右边的border会自己修正大小而左边的不会。:</p>

<table style="background-color: white; border: 2px outset #36b; padding: 1em;">
 <tbody>
  <tr>
   <td>
    <div style="">RESIZE ME PLEASE</div>
   </td>
  </tr>
 </tbody>
</table>
</div>

<div class="tuto_details">
<div class="tuto_type">更多详情</div>

<p>对于其它设备，其它的长度单位可能更合适。</p>

<p>在本指南中会有其它篇幅详细介绍这一点。</p>

<p>更多详情参见CSS说明中 <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#values">Values</a> .</p>
</div>

<h3 id="文本布局">文本布局</h3>

<p>有两个属性可以指定元素内容的对齐方式。你可以用它们来进行简单的布局:</p>

<dl>
 <dt>{{ cssxref("text-align") }}</dt>
 <dd>内容对齐。 可以使用下面几个值： <code>left</code>, <code>right</code>, <code>center</code>, <code>justify</code>。</dd>
 <dt>{{ cssxref("text-indent") }}</dt>
 <dd>指定内容缩进。</dd>
</dl>

<p>这两个属性可以应用于任何文本类内容，不只是纯文本。 需要注意的是，它们会被元素的子元素继承， 所以需要在子元素中将它们关闭，以免出现意想不到的效果。</p>

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

<p>标题居中:</p>

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

<p>输出结果:</p>

<table style="background-color: white; border: 2px outset #36b; padding: 1em; width: 30em;">
 <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; text-align: center;">(A) The oceans</p>
   </td>
  </tr>
 </tbody>
</table>

<p>在 HTML 文档中, 标题之后的内容并不属于标题。当你对齐一个标题时，其后的元素不会继承该样式。</p>
</div>

<h3 id="浮动">浮动</h3>

<p> {{ cssxref("float") }} 属性强制元素靠左或靠右。 这是控制元素位置和大小的简单方法。</p>

<p>本文剩下部分都是围绕浮动元素展开。你可以使用 {{ cssxref("clear") }} 属性来避免其它元素受到浮动效果的影响。</p>

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

<p>在你的示例中，list是根据窗口拉伸。你可以通过使用浮动元素来使它们靠左。</p>

<p>为了保证标题在正确的位置, 你必须为标题指定clear属性来避免标题靠左:</p>

<pre class="brush:css">ul, #numbered {float: left;}
h3 {clear: left;}
</pre>
</div>

<p>运行结果如下:</p>

<table style="background-color: white; border: 2px outset #36b; padding: 1em; width: 30em;">
 <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="float: left; border: 12px solid #69b; margin-bottom: 16px; padding-left: 1em;">
    <ul style="">
     <li>Arctic</li>
     <li>Atlantic</li>
     <li>Pacific</li>
     <li>Indian</li>
     <li>Southern</li>
    </ul>
    </div>

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

    <div style="float: left; border: 12px solid #69b; margin-bottom: 8px; padding-left: .5em;">
    <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>
    </div>
   </td>
  </tr>
 </tbody>
</table>

<p>(box右侧需要增加一些padding ,防止文本与边框太近)</p>

<h3 id="位置">位置</h3>

<p>你可以为一个元素指定  {{ cssxref("position") }} 属性为以下值之一，来设置其位置。</p>

<p>这些是高阶属性。 可以通过简单的方式来使用它们—这也是在基础教程里提到它们的原因。但使用它们来实现复杂的布局会相对困难一些。</p>

<dl>
 <dt><code>relative</code></dt>
 <dd>通过为元素指定一个值，元素相对于其原来位置移动。也可以使用margin来达到同样的效果。</dd>
 <dt><code>fixed</code></dt>
 <dd>为元素指定相对于窗口的确切位置 。即使文档的其它元素出现滚动，元素位置仍然不变。</dd>
 <dt><code>absolute</code></dt>
 <dd>为元素指定相对于其父元素的确切位置。只有在父元素使用 <code>relative</code>, <code>fixed</code> or <code>absolute</code> 时才有效。你可以为任何父元素指定 <code>position: relative;因为它不会产生移动。</code></dd>
 <dt><code>static</code></dt>
 <dd>默认值。当明确要关闭位置属性时使用。</dd>
</dl>

<p>和 <code>position</code> 属性(除了 <code>static</code>)一起使用的, 有下列属性: <code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code>, <code>width</code>, <code>height</code> 通过设置它们来指定元素的位置或大小。</p>

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

<p>为了放置两个元素，一个在另外一个上方, 创建一个父容器来包含两个子元素:</p>

<pre class="brush:html">&lt;div id="parent-div"&gt;
  &lt;p id="forward"&gt;/&lt;/p&gt;
  &lt;p id="back"&gt;\&lt;/p&gt;
&lt;/div&gt;
</pre>

<p>在你的样式表里，将父容器的position设置为 <code>relative。无需为它设置任何具体变动。</code> 将子元素的position属性设置为 <code>absolute</code>:</p>

<pre class="brush:css">#parent-div {
  position: relative;
  font: bold 200% sans-serif;
}

#forward, #back {
  position: absolute;
  margin:0px; /* no margin around the elements */
  top: 0px; /* distance from top */
  left: 0px; /* distance from left */
}

#forward {
  color: blue;
}

#back {
  color: red;
}
</pre>

<p>输出结果如下,反斜杠显示在斜杠上方</p>

<div style="position: relative; left: .33em; font: bold 300% sans-serif;">
<p style="position: absolute; margin: 0px; top: 0px; left: 0px; color: blue;">/</p>

<p style="position: absolute; margin: 0px; top: 0px; left: 0px; color: red;">\</p>
</div>

<table style="background-color: white; border: 2px outset #36b; height: 5em; padding: 1em; width: 30em;">
 <tbody>
  <tr>
   <td> </td>
  </tr>
 </tbody>
</table>
</div>

<div class="tuto_details">
<div class="tuto_type">更多详情</div>

<p>更多详情的postion说明在 CSS Specification 中占用了两个章节: <a class="external" href="http://www.w3.org/TR/CSS21/visuren.html">Visual formatting model</a> 和 <a class="external" href="http://www.w3.org/TR/CSS21/visudet.html">Visual formatting model details</a>.</p>

<p>如果你的样式表工作在多种浏览器环境下，你会发现不同浏览器对标准协议的解释会有很多不同, 而且特定浏览器的特定版本可能存在BUG。</p>
</div>

<h2 id="实践_设置布局">实践: 设置布局</h2>

<ol>
 <li>修改示例文档, <code>doc2.html</code>, 和样式表, <code>style2.css</code>, 使用之前的示例 <a href="#Document_structure" title="#Document structure"><strong>文档结构</strong></a> and <a href="#Floats" title="#Floats"><strong>浮动</strong></a>.</li>
 <li>在 <a href="#Floats" title="#Floats"><strong>浮动</strong></a> 示例中, 添加padding 来分离文本和右侧border ,值设为0.5 em.</li>
</ol>

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

<p>修改示例文档, <code>doc2.html</code>, 在文档末尾添加一个标签, <code>注意在&lt;/body&gt;之前。</code></p>

<pre class="brush:html">&lt;img id="fixed-pin" src="Yellow-pin.png" alt="Yellow map pin"&gt;
</pre>

<p>如果你在之前的教程中没有下载过该图片, 现在下载, 将它与示例文件放在同一目录下:</p>

<table style="border: 2px solid #ccc;">
 <tbody>
  <tr>
   <td><img alt="Image:Yellow-pin.png" class="internal" src="/@api/deki/files/490/=Yellow-pin.png"></td>
  </tr>
 </tbody>
</table>

<p>预测一下你的图片将会出现在哪里，然后刷新浏览器验证一下。</p>

<p>在样式表中添加一条规则，将图片显示在文档右上角。</p>

<p>刷新浏览器并把窗口拉小。 查看图片是否在右上角，拖动容器大小，再次查看。</p>

<div style="position: relative; width: 29.5em; height: 18em;">
<div style="overflow: auto; border: 2px outset #36b; padding: 1em; width: 29em; height: 16em; background-color: white;">
<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="float: left; border: 12px solid #69b; margin-bottom: 16px; padding: 0px .5em 0px 1em;">
<ul style="">
 <li>Arctic</li>
 <li>Atlantic</li>
 <li>Pacific</li>
 <li>Indian</li>
 <li>Southern</li>
</ul>
</div>

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

<div style="float: left; border: 12px solid #69b; padding: 0 .5em 0 .5em;">
<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>
</div>

<p style=""> </p>

<div style="position: absolute; top: 2px; right: 0px;"><img alt="Yellow map pin" class="internal" src="/@api/deki/files/490/=Yellow-pin.png"></div>
</div>
</div>
</div>

<p><a href="/en/CSS/Getting_Started/Challenge_solutions#Layout"> 查看该挑战的解决方案</a>。</p>

<h2 id="接下来是什么？">接下来是什么？</h2>

<p>{{ nextPage("/zh-CN/docs/CSS/开始/Tables", "表格") }}你几乎已经学习了这篇CSS基本教程的所有主题。接下来将描述更多CSS规则的高级选择器，以及你可以用来展示<a href="/zh-CN/docs/Web/Guide/CSS/Getting_started/Tables">表格</a>的一些特定方法。</p>