关于CSS中的布局和定位

         在构建网页的过程中，我们经常必须保证它的美观性，使读者看起来感到舒服。这时，我们首先要考虑的就是对于页面的布局和定位了。

一.布局方式

CSS中有以下三种布局：

1.流体布局

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

2.冻结布局

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

进行冻结布局时，要在HTML中增加一个新的<div>元素，设置一个id名，用它来包围你所需要固定的内容。同时，还要在CSS中限制此id中所有元素和内容的大小，使它有一个固定的宽度，这样，即使浏览器的大小调整了，你所选的内容的宽度永远会是你所设置的宽度，就可以说，我们有效地将这个<div>以及其中包含的所有内容冻结在了页面上，也就是冻结布局。

3.凝胶布局

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

        利用CSS，实现一种布局通常有许多方法，都有自己的长处和短处。在实际应用中，我们应根据自己的需要灵活的用最恰当的方法选择合适的布局。

二.定位方式

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。