blob: eaf24d0bda314fa9232419f6708fffefafdab9e1 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
|
---
title: CSS 布局
slug: Learn/CSS/CSS_layout
tags:
- Beginner
- CSS
- Floating
- Grids
- Guide
- Landing
- Layout
- Learn
- Module
- Multiple column
- Positioning
- Styling CSS boxes
- TopicStub
- flexbox
- float
translation_of: Learn/CSS/CSS_layout
---
<div>{{LearnSidebar}}</div>
<p class="summary">此刻，我们已经看过CSS的基础知识，如何设置文本的样式，以及如何设置和操作内容所在的框。 现在是时候看看如何把你的盒子放在与视口相关的正确位置上。 我们已经涵盖了必要的先决条件，所以我们现在可以深入到CSS布局，查看不同的显示设置，涉及浮动和定位的传统布局方法，以及像flexbox这样的现代布局工具。</p>
<h2 id="前提条件：">前提条件：</h2>
<p>在开始前，你应该已经具备:</p>
<ol>
<li>对HTML的基础了解，在<a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>部分讨论过的。</li>
<li>一定的CSS基础，在<a href="/zh-CN/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a>部分讨论过的。</li>
<li>了解如何<a href="/zh-CN/docs/Learn/CSS/Building_blocks">样式化盒子模型</a>.</li>
</ol>
<div class="note">
<p><span style="font-size: 14px;"><strong>提示</strong></span>: 如果你在一台电脑/平板电脑/其他设备上工作，而你没有能力创建自己的文件，你可以尝试（大部分）在线编码程序中的代码示例，如 <a href="http://jsbin.com/">JSBin</a> 或 <a href="https://thimble.mozilla.org/">Thimble</a> 。</p>
</div>
<h2 id="指南">指南</h2>
<p>这些文章将提供在CSS中可用的基本布局工具和技术的指导。</p>
<dl>
<dt><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Introduction">介绍 CSS 布局</a></dt>
<dd>本文将重述一些我们在之前的模块中已经涉及的CSS布局功能——例如不同的 {{cssxref("display")}} 值——并介绍我们将在本单元中涵盖的一些概念。</dd>
<dt><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Normal_Flow">正常布局流</a></dt>
<dd>这篇文章介绍正常的流布局，或者说，在你没有改变默认布局规则情况下的页面元素布局方式。</dd>
<dt><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Flexbox">弹性盒</a></dt>
<dd><a href="/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications">弹性盒</a> 是一种新技术，但在如今各个浏览器都广泛支持的情况下，它已经开始准备广泛应用了。 弹性盒子提供了工具，允许快速创建曾经被证明用CSS很难实现的一些复杂，灵活的布局和功能。 本文将解释所有的基本原理。</dd>
<dt><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Grids">网格</a></dt>
<dd>网格是一个成熟的设计工具，许多现代网站布局是基于规则网格。在本文中，我们将看看基于网格的设计，以及如何使用CSS来创建网格——两者都通过现在的工具，和刚刚开始在浏览器中可用的新技术。</dd>
<dt><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Floats">浮动</a></dt>
<dd>最初对于文本块中的浮动图像，{{cssxref("float")}}属性已经成为在网页上创建多个列布局的最常用工具之一。本文解释所有。</dd>
<dt><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Positioning">定位</a></dt>
<dd>定位允许您从常规文档布局流程中取出元素，并使它们具有不同的行为，例如坐在另一个之上，或始终保持在浏览器视口内的同一位置。 本文解释不同的{{cssxref("position")}} 值，以及如何使用它们。</dd>
<dt><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">多列布局</a></dt>
<dd>多列布局声明提供了一种多列组织内容的方式，正如你在一些报纸中看到的那样。 这篇文章介绍怎么使用这一特性。</dd>
<dt><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Responsive_Design">响应式布局</a></dt>
<dd>随着越来越多的屏幕尺寸出现在支持Web的设备上，响应式Web设计（RWD）的概念出现了：一组允许网页改变其布局和外观以适应不同的屏幕宽度、分辨率等的实践。这一想法改变了我们为多设备Web设计的方式，在本文中，我们将帮助您了解掌握它所需的主要技术。</dd>
<dt><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Media_queries">媒体查询入门指南</a></dt>
<dd><strong>媒体查询</strong> 提供了一种仅当浏览器和设备环境与您指定的规则匹配时才应用css的方法，例如“viewport（视区）宽度大于480像素”。媒体查询是响应式Web设计的一个关键部分，因为它们允许您根据视区的大小创建不同的布局，但也可以用于检测有关网站运行环境的其他内容，例如用户是否使用触摸屏而不是鼠标。在本节中，您将首先了解媒体查询中使用的语法，然后在一个演示如何使简单设计具有响应性的示例中继续使用它们。</dd>
<dt><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">传统布局方法</a></dt>
<dd>网格系统是css布局中使用的一个非常常见的特性，在css网格布局之前，它们往往使用浮动或其他布局特性来实现。您可以将布局想象为一组列（例如4、6或12），然后将网页内容放入这些列中。在本文中，我们将探讨这些旧方法是如何工作的，以便您了解在处理旧项目时如何使用它们。</dd>
<dt><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">支持旧浏览器</a></dt>
<dd>
<p>在本模块中，我们建议使用弹性盒和网格作为主要布局方法。但是，您的网站会遇到使用旧浏览器的访问者，或者不支持您使用的新布局方法的浏览器。在网络开发上一直有这种状况——那就是随着新特性的开发，不同的浏览器将优先支持不同的特性。本文解释了如何使用现代web技术而不将使用旧版本浏览器的用户拒之门外。</p>
</dd>
<dt><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">测试: 基本布局掌握</a></dt>
<dd>通过布置网页来测试你对不同布局方法的知识的掌握。</dd>
</dl>
<h2 id="参见">参见</h2>
<dl>
<dt><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Practical_positioning_examples">练习定位案例</a></dt>
<dd>在最后一篇文章中介绍了定位的基础知识，现在将讨论构建几个真实世界的例子，以说明你可以通过定位做什么样的事情。</dd>
</dl>
|
