摘要：注全文摘自介绍布局页面布局技术允许我们拾取网页中的元素，并且控制它们相对正常布局流周边元素父容器或者主视口窗口的位置。添加此代码将给出以下结果绝对定位绝对定位绝对定位用于将元素移动到页面的任何位置，以创建复杂的布局。
注：全文摘自MDN-介绍CSS布局
CSS页面布局技术允许我们拾取网页中的元素，并且控制它们相对正常布局流、周边元素、父容器或者主视口/窗口的位置。在这个模块中将涉及更多关于页面布局技术的细节：
每种技术都有它们的用途，各有优缺点。
正常布局流是指在不对页面进行任何布局控制时，浏览器默认的HTML布局方式。让我们快速地看一个HTML的例子：
</>复制代码
I love my cat.
Buy cat food Exercise Cheer up friend
The end!
默认情况下，浏览器的显示如下:
注意，HTML元素完全按照源码中出现的先后次序显示——第一个段落、无序列表、第二个段落。
布局技术会覆盖默认的布局行为：
position属性 — 正常布局流中，默认为 static ，使用其它值会引起元素不同的布局方式，例如将元素固定到浏览器视口的左上角。float值，诸如 left 能够让块级元素互相并排成一行，而不是一个堆叠在另一个上面。display 属性——标准值 block, inline or inline-block 会改变元素在正常布局流中的行为方式(见 Types of CSS boxes )，而一些不常见或特殊的值允许我们使用完全不同的方式进行布局，使用工具比如Flexbox。浮动技术允许元素浮动到另外一个元素的左侧或右侧，而不是默认的一个堆叠另一个。float 的主要用途是布置出多个列并且浮动文字以环绕图片。下面我们快速浏览一下 float 属性并通过一个例子来说明。
float 属性有四个可能的值：
left — 将元素浮动到左侧。right — 将元素浮动到右侧。none — 默认值, 不浮动。下面展示了如何用浮动来创建一个简单的两列布局。首先看一下HTML：
</>复制代码
2 column layout example
First column
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.
Second column
Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut.
代码中有一个一级标题和两个简单的
下面让我们将两个
left，另外一个浮动为 right。这意味着它们其中一个往左靠，另外一个往右靠。给这两个元素分别设置 width值，使得它们能够在同一行放下来，并且设置一个水平的间距(总宽度不要大于100!).
</>复制代码
div:nth-of-type(1) { width: 48%; float: left;}div:nth-of-type(2) { width: 48%; float: right;}
修改过的代码如下：
定位技术(position)允许我们将一个元素从它在页面的原始位置准确地移动到另外一个位置。
有四种主要的定位类型需要我们了解：
我们将展示一些示例代码来熟悉这些布局技术. 这些示例代码都作用在相同的HTML上：
</>复制代码
Positioning
I am a basic block level element.
I am a basic block level element.
I am a basic block level element.
该HTML将使用以下CSS默认样式：
</>复制代码
body { width: 500px; margin: 0 auto;}p { background: aqua; border: 3px solid blue; padding: 10px; margin: 10px;}span { background: red; border: 1px solid black;}
渲染效果如下:
相对定位通常用来对布局进行微调，比如将一个图标往下调一点，以便放置文字. 我们可以通过下面的规则添加相对定位来实现效果:
</>复制代码
.positioned { position: relative; background: yellow; top: 30px; left: 30px;}
这里我们给中间段落一个position``relative值——这属性本身不做任何事情，所以我们还添加了top和left属性。这些可以将受影响的元素向下向右移——这可能看起来和你所期待的相反，但你需要把它看成是左边和顶部的元素被“推开”一定距离，这就导致了它的向下向右移动。
添加此代码将给出以下结果：
绝对定位用于将元素移动到web页面的任何位置，以创建复杂的布局。有趣的是，它经常被用于与相对定位和浮动的协同工作。
回到我们最初的非定位示例，我们可以添加以下的CSS规则来实现绝对定位：
</>复制代码
.positioned { position: absolute; background: yellow; top: 30px; left: 30px;}
这里我们给我们的中间段一个position的 absolute值，并且和前面一样加上 top和left属性。但是，添加此代码将给出以下结果：
这和之前截然不同！定位元素现在已经与页面布局的其余部分完全分离，并位于页面的顶部。其他两段现在靠在一起，好像之前那个中间段落不存在一样。top和left属性对绝对位置元素的影响不同于相对位置元素。在这种情况下，他们没有指定元素相对于原始位置的移动程度。相反，它们指定元素应该从页面边界的顶部和左边的距离(确切地说，是 元素的距离)。
我们现在暂时不讨论固定定位（ fixed positioning ）——它基本上以相同的方式工作，除了它仍然固定在浏览器窗口的边缘，而不是它定位的父节点的边缘。
HTML表格对于显示表格数据是很好的，但是很多年前——在浏览器中支持基本的CSS之前——web开发人员过去也常常使用表格来完成整个网页布局——将它们的页眉、页脚、不同的列等等放在不同的表行和列中。这在当时是有效的，但它有很多问题——表布局是不灵活的，非常重的标记，难以调试和语义上的错误（比如，屏幕阅读器用户在导航表布局方面有问题）。
CSS表格的存在是为了让您能够像表格一样布局元素，而不需要上面描述的任何问题——这听起来可能有些奇怪，您应该使用表格元素作为表格数据，但有时这可能是有用的。例如，您可能想要列出一个表单，其中有标签和文本输入；这可能很棘手，但是CSS表使其变得容易。
让我们来看一个例子。首先，创建HTML表单的一些简单标记。每个输入元素都有一个标签，我们还在一个段落中包含了一个标题。为了进行布局，每个标签/输入对都封装在
</>复制代码
First of all, tell us your name and age.
现在，我们例子中的CSS。除了使用 display属性外，大多数CSS都是相当普通的。