参考链接:absolute绝对定位的非绝对定位用法
参考链接:CSS 相对|绝对(relative/absolute)定位系列(一)
参考书目:HeadFirstHTML与CSS
基础
页面流
float
float属性
所有的浮动元素都必须有一个width。
float过程
设置元素为#id{float:right;width:200px;}
1. 首先浏览器将元素流入页面,从文件最上面开始,逐步移向末尾的元素。
2. 浏览器遇到浮动元素时,会把它尽可能的放到最右边。还会从流中删除这个段落,好像它浮在页面上一样。
3. 由于段落已经从正常流中删除,所以其他元素会填在这里,像没有存在过这个元素一样。文档中正常流的块元素会存在于浮动元素的下方。(使用clear:left/right/both消除块元素上方的浮动遮盖)
4. 但是,其他块元素的内联元素,定位时,会考虑浮动元素的边界,因此会绕着浮动元素。
顺序
- 若要让元素在某个元素后面浮动,要确保浮动元素的html放在前面元素的下面。
- 一般地,在功能受限的浏览器中,看到的页面是写页面时的元素顺序。当希望主内容在最前面,然后才看到某种形式的边栏或导航。
- 所以,考虑浮动时,可以考虑浮动主内容区,取代浮动次要区域。
对内联/块元素的影响 **
对内联元素
- 当display属性不等于none,设置对象float浮动时,对象将被视作块对象(block-level),即display属性等于block。内联元素此时可以设置高宽,内外边距等属性。但不占据一行,相当于inline-block。
- float在绝对定位和display为none时不会被应用。对应的脚本特性为stylefloat(ie或cssfloat(非ie)。(注意这里为stylefloat或cssfloat,而不是float)
对于块元素
- 相当于变成了:dispaly:inline-block元素,最明显的是宽度自适应发生了变化。
- div的默认宽度是width:auto;意思是自动调整宽度.在不带float的情况下,div的宽度会自动调整至最大化,而在带float的情况下则正好相反,它会自动调整至最小化.
absolute
absolute过程
- 浏览器将此元素从流中完全删除,其他块元素与内联元素完全不知道这个元素的存在。(当设置top与left时才会完全脱离)
- 然后浏览器将这个元素放在top 和 right 指定的位置上(或者bottom 与left)。(结果相对于最近的relative属性的祖先标签定位;如果没有,就body定位)
- 允许使用z-index进行分层放置。
position为absolute的元素如果没有设置left, top等值与left:0;top:0;的的效果不一样?
例如一个div中有个absolute属性元素,其没有left或是top值,其会像个普通的inline-block属性元素一样静静地呆在这个div里。
但是一旦设置了left:0;top:0;这个absolute元素立马变身,直接从DOM tree里面脱离,独立于文档流。结果相对于最近的relative属性的祖先标签定位(如果没有,就body定位)。
由于我们平时使用absolute都离不开left,top之类的值,所以才会概念不清。
总结区分:
float元素仍然由浏览器确定它的位置。
absolute则完全由用户指定。
相同点:
都可以对任意元素指定性质,包括内联元素与块元素。
relative
过程
- 元素正常流入页面
- 页面显示之前要进行偏移
几个简单布局
- 流体布局 liquid layouts
布局会填满可用空间 - 冻结布局
为所有内容的整体(body)设置固定宽度
3.凝胶布局
在冻结布局的基础上,使得整个内容居中(margin:auto)