[css]-布局

这里是所有布局技术的简要概述，可以针对每一项进行学习。

控制元素相对正常布局流、周边元素、父容器或者主视口/窗口的位置。

可以用于布局的技术：

• 浮动
• 定位
• CSS 表格
• 弹性盒子
• 网格

正常布局流

正常布局是在不对页面进行任何布局控制时，浏览器默认的HTML布局方式。HTML元素完全按照源码中出现的先后次序显示。

浮动

浮动技术控制元素浮动到另外一个元素的左侧或右侧，而不是默认的一个堆叠另一个。

float 属性有四个可能的值：

• left — 将元素浮动到左侧。
• right — 将元素浮动到右侧。
• none — 默认值, 不浮动。
• inherit —继承父元素的浮动属性。

定位

定位技术(position)控制一个元素从它在页面的原始位置准确地移动到另外一个位置。

position 有四种主要定位类型：

• 静态定位(Static positioning) 是每个元素默认的属性——它表示“将元素放在文档布局流的默认位置——没有什么特殊的地方”。
• 相对定位(Relative positioning) 允许我们相对元素在正常的文档流中的位置移动它——包括将两个元素叠放在页面上。这对于微调和精准设计(design pinpointing)非常有用。
• 绝对定位(Absolute positioning) 将元素完全从页面的正常布局流中移出，类似将它单独放在一个图层中. 我们可以将元素相对于页面的 元素边缘固定，或者相对于离元素最近的被定位的祖先元素(ancestor element)。绝对定位在创建复杂布局效果时非常有用，例如通过标签显示和隐藏的内容面板或者通过按钮控制滑动到屏幕中的信息面板.
• 固定定位(Fixed positioning) 与绝对定位非常类似，除了它是将一个元素相对浏览器视口固定，而不是相对另外一个元素。 在创建类似页面滚动总是处于页面上方的导航菜单时非常有用。

表格

HTML表格对于显示表格数据是很好的，但是很多年前——在浏览器中支持基本的CSS之前——web开发人员过去也常常使用表格来完成整个网页布局——将它们的页眉、页脚、不同的列等等放在不同的表行和列中。这在当时是有效的，但它有很多问题——表布局是不灵活的，繁重的标记，难以调试和语义上的错误（比如，屏幕阅读器用户在导航表布局方面有问题）。

弹性盒子

CSS是一种功能强大的语言，它可以做很多事情，但它却在布局上有所下降。

网格

网格仅仅是由水平和垂直线集合创建的一个模式，我们可以根据这个模式排列我们的设计元素。