CSS初探17

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>);固定定位则是相对于浏览器窗口,而相对定位会相对于其外围包含的元素来定位,元素仍在正常的页面流中,然后再按照你指定的量偏移元素。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,792评论 1 92
  • CSS 定位 CSS有三种基本的定位机制:普通流,浮动,绝对定位(absolute, fixed):普通流是默认定...
    _空空阅读 5,789评论 0 15
  • 当在这一个页面上实现布局和定位有几种不同的技术。使用哪种技术,很大程序上取决于内容和目标页面,因为有很多技术比别人...
    lulu_c阅读 1,097评论 0 5
  • 身处在喧嚣的城市,苦闷的境遇,我们通常想要逃离,逃离周遭的一切,远远的抛开,去追寻,心中那个干净的,祥和的,远方。...
    牛佳阅读 362评论 0 0
  • 镜花水月,转瞬成空。城市的灯光在空气中闪耀,唯美的童话总是在不停的侵略着人类的大脑,诗一般的绚丽却永远在真实中躲藏...
    emmm阿阅读 894评论 7 8