Head First HTML与CSS
第十一章 布局与定位
CSS——掌控页面的表现
布局复习
1.浮动布局
float可将元素浮动到页面一侧,元素从页面正常流中浮出,正常流中的块元素忽视它,内联元素绕行。
2.凝胶布局
先使用固定宽度的<div>创建冻结布局,再利用auto属性允许外边距扩展,调整为凝胶布局。
3.绝对布局
使用绝对定位,可以将某个元素固定在页面上的某个位置,不在页面流中。
4.表格显示布局
利用CSS表格进行分栏显示。
固定定位
一旦采用固定定位放置内容,它就会一直留在你指定的位置,即使你滚动页面它也不动。因为固定定位是相对于浏览器窗口的定位,而不是相对于页面的定位。
#coupon{
position:fixed;
top:350px;
left:0px;
}
下滑页面后:
也可以使用负位移量:
#coupon{
position:fixed;
top:350px;
left:-90px;
}
可以使用相对定位指定优惠券的位置。这与绝对定位相似,不过元素仍在页面流中,只不过在它原本的位置上按照你指定的量偏移。补充说一下,绝对定位将元素从页面流中取出,允许你为它指定一个绝对位置,这个位置是相对于其父元素指定的(一般是<html>);固定定位则是相对于浏览器窗口,而相对定位会相对于其外围包含的元素来定位,元素仍在正常的页面流中,然后再按照你指定的量偏移元素。