diff options
Diffstat (limited to 'files/zh-cn/conflicting/learn/css/css_layout')
| -rw-r--r-- | files/zh-cn/conflicting/learn/css/css_layout/index.html | 369 |
1 files changed, 369 insertions, 0 deletions
diff --git a/files/zh-cn/conflicting/learn/css/css_layout/index.html b/files/zh-cn/conflicting/learn/css/css_layout/index.html new file mode 100644 index 0000000000..6e5cc4ae53 --- /dev/null +++ b/files/zh-cn/conflicting/learn/css/css_layout/index.html @@ -0,0 +1,369 @@ +--- +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]"><h3>Numbered paragraphs</h3> +<div id="numbered"> + <p>Lorem ipsum</p> + <p>Dolor sit</p> + <p>Amet consectetuer</p> + <p>Magna aliquam</p> + <p>Autem veleum</p> +</div> +</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"><div id="parent-div"> + <p id="forward">/</p> + <p id="back">\</p> +</div> +</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>注意在</body>之前。</code></p> + +<pre class="brush:html"><img id="fixed-pin" src="Yellow-pin.png" alt="Yellow map pin"> +</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> |