CSS初探17
2017-07-26 本文已影响0人
一个非典型IT学习者
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>）；固定定位则是相对于浏览器窗口，而相对定位会相对于其外围包含的元素来定位，元素仍在正常的页面流中，然后再按照你指定的量偏移元素。
