CSS布局定位

布局：定位+元素本身尺寸
布局篇：
1.流体布局
流体布局其实就是在扩展浏览器窗口时，页面上的内容会自动扩展，不论我们将浏览器调整到多大的宽度，布局都会扩展，以填充可用空间。这样，用户便能够充分地利用他们的屏幕空间了。

2.冻结布局
顾名思义，在冻结布局中，内容的宽度是固定的，不会随着浏览器窗口扩展或收缩。这样一来，当用户调整屏幕大小时，他的设计仍能保持原样。冻结布局会锁定元素，让它们冻结在页面上，这样这些元素根本就不能移动，我们就能避免由于窗口扩展带来的许多问题。不过也要付出代价，因为这样就不能有效地使用浏览器宽度了。

进行冻结布局时，要在HTML中增加一个新的

元素，设置一个id名，用它来包围你所需要固定的内容。同时，还要在CSS中限制此id中所有元素和内容的大小，使它有一个固定的宽度，这样，即使浏览器的大小调整了，你所选的内容的宽度永远会是你所设置的宽度，就可以说，我们有效地将这个

以及其中包含的所有内容冻结在了页面上，也就是冻结布局。

3.凝胶布局
凝胶布局介于流体和冻结之间，其中内容宽度是固定的，但是外边距会随着浏览器窗口扩展或收缩。凝胶布局通常会把内容放在中间。这与冻结布局有着同样的好处，不过通常更为美观。在设置凝胶布局时，我们需要将左右外边距的值设置为auto，这样，浏览器会确定正确的外边距是多少，另外还会确保左右外边距相同，所以内容会居中。

定位篇

盒模型

边距折叠

关于流和盒模型，浏览器在并排显示两个内联元素时，这两个原时间的外边距是不会重合的，二者边框之间的距离是两者外边距之和；当两个块元素上下放置时，它们挨着的外边距会折叠起来，显示出来的外边距就是二者外边距里的最大值。当元素嵌套时，也会发生外边距折叠问题，其只会合并上边距和下边距，左右外边距并不合并。需要注意的是，如果外面的元素有一个边框，那么这两个元素的外边距就不会碰到一起，也就不可能发生折叠。我们只需要记住：只要两个垂直边距碰到一起，它们就会折叠，即使是嵌套起来的也不例外。浮动元素由于已经不在文档流之中，它们的外边距是不会折叠的。

关于浮动，浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。要想使元素浮动，必须为元素设置一个宽度（width）。虽然浮动元素不是文档流之中，但是它浮动后所处的位置依然是在浮动之前的水平方向上。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样，下面的元素填补原来的位置。有些元素会在浮动元素的下方，但是这些元素的内容并不一定会被浮动的元素所遮盖，对内联元素进行定位时，这些元素会考虑浮动元素的边界，会围绕着浮动元素放置。也可以把浮动元素想象成是被块元素忽略的元素，而内联元素会关注浮动元素的。

CSS 有三种基本的定位机制：普通流、浮动和绝对定位。除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。
position属性可以设置为4个值：static（静态）、absolute（绝对）、fixed（固定）和relative（相对）。

1.静态定位
静态定位是浏览器的默认方式，将元素放在页面的正常流中。
2.绝对定位
绝对定位可以在页面上精确地定位元素，实现一些漂亮的效果。一个元素绝对定位时，浏览器首先要做的是将它从流中完全删除，然后浏览器将这个元素放置在top和right属性指定的位置上（也可使用bottom和left指定位置）。流中的元素不会将其内联内容围绕在一个绝对定位元素周围，它们完全不知道页面上有这个绝对定位元素。这与浮动元素有所不同，因为流中的元素会调整它们的内容来适应浮动元素的边界，而绝对定位元素对其他元素没有任何影响。
关于绝对定位元素还有一个重要的问题，那就是它可以分层放置，一个元素可以放在另一个元素上面。要区分它们之间的分层情况，必须借助一个名为z-index的属性，这是元素在一个虚拟z轴上的顺序。不过大多数情况下，你并不关心元素的z-index属性，除非你要对元素建立某种特定的分层。通常只需要把z-inddex设置为1，这就足以确保元素出现在页面中其他元素的上面，不过，如果有多个元素，而且你需要自行定位和分层，就要慎重地考虑这些元素的z-index值。下面简单通过例子说明一下这个属性的使用方法：

#div1 {
position:absolute;
top: 30px;
left: 30px;
z-index: 0;
}
#div2 {
position:absolute;
top: 30px;
left: 30px;
z-index: 1;
}

这些规则会把id为“div2“的元素放在id为”div1”的元素上面。
3.固定定位
固定定位元素总是相对于浏览器窗口定位，页面滚动时，固定定位的元素不会移动，页面中的其他内容会在这些固定定位元素下面正常滚动。设置固定定位时要将position设置为fixed。
4.相对定位
相对定位与绝对定位较为类似，只是元素仍然在页面流中（还再它原本的位置上），然后按照你指定的量偏移，从而留出它们原先所在的空间。可以使用top、left、bottom或right偏移元素，就像元素绝对定位一样。position属性要设置为relative。