Head First HTML与CSS
第十一章 布局与定位
CSS——掌控页面的表现
流体与冻结设计
目前为止，我们采用的布局都称为流体布局（liquid layouts），因为不论我们将浏览器调整到多大的宽度，布局都会扩展，填满整个浏览器。
有时可能需要将布局锁定，当用户调整屏幕大小时，你的设计仍能保持原样。这称为冻结布局（frozen layouts）。冻结布局会使元素锁定在页面上，不能移动。
要把当前页面变为冻结页面，只需增加以下规则：
<body>
<div id="allcontent">/*增加一个包围<body>中所有元素的allcontent<div>*/
<div id="header">
.........
</div>
</div>
</body>
#allcontent{
width:800px;/*限制页面的总宽度小于等于800像素*/
padding-top:5px;
padding-bottom:5px;
background-color:#675c47;
}
即使浏览器大小调整了，allcontent<div>的宽度也不变，为800像素。这样一来，我们就将这个<div>以及其中包含的所有内容冻结在了这个页面上。
凝胶布局
虽然冻结布局多数情况下很好用，但由于页面宽度固定，若浏览器宽度过大，会使得右侧出现较大的空白空间。我们可以使用凝胶布局改进这种情况。只需要将allcontent<div>的左右外边距设为auto。这样浏览器会确定左右外边距的大小并使左右外边距相同，即让内容居中。
#allcontent{
width:800px;
padding-top:5px;
padding-bottom:5px;
background-color:#675c47;
margin-left:auto;
margin-right:auto;
绝对定位
CSS的一个特性，可以在页面上精确地定位元素，称为绝对定位（absolute positioning）。
示例：
#sidebar{
position:absolute;/*使用position属性指定这个元素要绝对定位*/
top:100px;/*距离页面上边100像素*/
right:200px;/*距离页面右边200像素*/
width:280px;/*宽度为280像素*/
}
一个元素绝对定位时，浏览器首先将它从流中完全删除，然后浏览器将这个元素放置在top和right属性指定的位置上。（也可以使用left和bottom指定）。还要设置<div>的宽度，和浮动元素一样。
流中的元素不会将其内联元素围绕在一个绝对定位元素周围，因为他们完全不知道页面上有这个元素。绝对定位元素对其他元素没有任何影响，这点与浮动元素不同。
谁在上面？
绝对定位元素可以分层放置，一个可以放在另一个上面。每个绝对定位元素都有一个名为z-index的属性，这会指定它在一个虚拟z轴上的位置（上面的元素会更“靠近你”，z-index更大）。
相关知识点
1.position的默认值为“static”（静态）。如果是静态定位，元素会放在正常的文档流中，由浏览器决定放置位置。你可以使用float属性将其从流中取出，让它向左或向右浮动，但最终仍然是由浏览器决定它放在哪里。而使用position属性的“absolute”值（绝对定位），是由你来告诉浏览器元素的具体放置位置。
2.可以对任何元素指定绝对位置，包括块元素和内联元素。一个元素绝对定位时，会从正常流中删除。
3.position属性有四个值：static，absolute，fixed，relative。固定（fixed）定位是将元素放在相对于浏览器窗口的一个位置上（而不是相对于页面），所以固定元素永远也不会移动。相对（relative）定位会让元素正常流入页面，不过在页面上显示之前要进行偏移。
4.不一定要像浮动元素一样，为绝对定位元素指定宽度。但如果不指定，默认块元素会占据浏览器的整个宽度（除了你指定的上侧和右侧偏移量之外），如果不想这样，就要指定宽度。
5.指定元素位置不一定要使用像素，也可以使用百分数。但百分数是相对于浏览器宽度而言的，当浏览器宽度改变时，元素位置可能会改变。如800px的10%为80px，当浏览器宽度变为400px时，
网友评论