转自:
http://apps.hi.baidu.com/share/detail/5763924
http://www.360doc.com/content/10/0319/17/315430_19419865.shtml
1. 文档流
关于“文档流”有位网友这样解释:将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素。我能理解这位网友的意思,其实他的理解和我是一样的,只是他有一点小的失误,就是他把“文档流”定义成一种“行为” 了——如何摆放元素。但很明显,“文档流”是个名词,实质上它指“通过这种行为而产生的一个实体,即展现在浏览者眼前的页面。”
那么,我们经常看到“正常文档流”和“脱离正常文档流”的字样。我想要想很清晰的理解这个问题,要从理解“div+css布局”与“table 布局”的一个和大的不同说起。从我的理解而言,table布局是一个二维空间的布局(即一个平面上的布局);而“div+css布局”是个三维空间的布局(即一个空间上的布局)。
那么“div+css”是如何将平面转换为空间的呢?这要归功于以下五个属性:left、right、top、bottom、z-index,可以将right(left)、top(bottom)、z-index(正负值)想象成三维坐标轴中的x、y、z轴。“正常文档流”可以想象成x、y平面。“脱离正常文档流”就是跳出了x、y平面,独立开辟新的层面。
2. 父级对象 同级对象
如果说要找块div1的父级对象,那么简单的说就是谁直接包含了div1,谁就是他的父级对象。同级对象,是指具有同一父级对象的两个或两个以上的对象。例如:
<div id=”out”>
<div id=”in1”>
<div id=”in2”></div>
<div id=”in3”></div>
</div>
</div>
其中in1的父级对象是out,而in2、和in3的父级对象是in1,不是out。in2和in3为同级对象。
3. position abloulte 和relative属性
<div id="parent">
<div id="sub1">sub1</id>
<div id="sub2">sub2</id>
</div>
3.1 relative属性
relative属性相对比较简单,我们要搞清它是相对哪个对象来进行偏移的。答案是它本身的位置。在上面的代码中,sub1和sub2是同级关系,如果设定sub1一个relative属性,比如设置如下CSS代码:
#sub1
{
position: relative;
padding: 5px;
top: 5px;
left: 5px;
}
我们可以这样理解,如果不设置relative属性,sub1的位置按照正常的文档流,它应该处于某个位置。但当设置sub1为的position为relative后,将根据top,right,bottom,left的值按照它理应所在的位置进行偏移,relative的“相对的”意思也正体现于此。
对于此,只需要记住,sub1如果不设置relative时它应该在哪里,一旦设置后就按照它理应在的位置进行偏移。
随后的问题是,sub2的位置又在哪里呢?答案是它原来在哪里,现在就在哪里,它的位置不会因为sub1增加了position的属性而发生改变。
如果此时把sub2的position也设置为relative,会发生什么现象?此时依然和sub1一样,按照它原来应有的位置进行偏移。
3.2 absolute属性
这个属性总是有人给出误导。说当position属性设为absolute后,总是按照浏览器窗口来进行定位的,这其实是错误的。实际上,这是fixed属性的特点。
当sub1的position设置为absolute后,其到底以谁为对象进行偏移呢?这里分为两种情况:
(1)当sub1的父对象parent也设置了position属性,且position的属性值为absolute或者relative时,也就是说,不是默认值的情况,此时sub1按照这个parent来进行定位。
注意,对象虽然确定好了,但有些细节需要您的注意,那就是我们到底以parent的哪个定位点来进行定位呢?如果parent设定了margin,border,padding等属性,那么这个定位点将忽略padding,将会从padding开始的地方(即只从padding的左上角开始)进行定位,这与我们会想当然的以为会以margin的左上端开始定位的想法是不同的。
接下来的问题是,sub2的位置到哪里去了呢 由于当position设置为absolute后,会导致sub1溢出正常的文档流,就像它不属于 parent一样,它漂浮了起来,在DreamWeaver中把它称为“层”,其实意思是一样的。此时sub2将获得sub1的位置,它的文档流不再基于 sub1,而是直接从parent开始。
(2)如果sub1不存在一个有着position属性的父对象,那么那就会以body为定位对象,按照浏览器的窗口进行定位,这个比较容易理解。
分享到:
相关推荐
CSS文档流与块级元素,css...........
CSS文档流与块级元素(block)内联元素(inline)那点事
css帮助文档css帮助文档css帮助文档css帮助文档css帮助文档css帮助文档css帮助文档css帮助文档css帮助文档
CSS文档流与块级元素(block)、内联元素(inline)
css 帮助文档 例子css 帮助文档 例子css 帮助文档 例子css 帮助文档 例子css 帮助文档 例子css 帮助文档 例子css 帮助文档 例子css 帮助文档 例子css 帮助文档 例子css 帮助文档 例子css 帮助文档 例子
html 帮助文档 css3帮助文档 chm html 帮助文档 css3帮助文档 chm html 帮助文档 css3帮助文档 chm
完整的CSS2.0和CSS3.0的chm文档,可以方便地查询CSS的各种属性和用法。
本资源是HTML与CSS3的各种文档的集合,中间可能会有一些重复
CSS与静态设计文档CSS与静态设计文档CSS与静态设计文档CSS与静态设计文档CSS与静态设计文档CSS与静态设计文档CSS与静态设计文档CSS与静态设计文档CSS与静态设计文档CSS与静态设计文档CSS与静态设计文档CSS与静态设计...
HTML5入门自学教程 CSS3.0参考手册
web前端开发参考手册系列之CSS3参考手册:为Web前端开发人员提供最新、最全的CSS中文版在线资料,涵盖CSS3参考手册。
CSS标准文档CSS标准文档CSS标准文档CSS标准文档CSS标准文档CSS标准文档CSS标准文档CSS标准文档CSS标准文档CSS标准文档CSS标准文档CSS标准文档
css文档
css2.0 css的文档,2.0标准的 css2.0 css的文档,2.0标准的 css2.0 css的文档,2.0标准的
objectify-css 将CSS规则转成JavaScript样式对象的CLI工具
《CSS文档对象模型中文手册》 chm! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/
中文版的CSS帮助文档,学习CSS必用的手册。
文档流将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流. 每个非浮动块级元素都独占一行, 浮动元素则按规定浮在行的一端. 若当前行容不下, 则另起新行再浮动.
css 中文教程 css帮助文档 css中文apicss 中文教程 css帮助文档 css中文apicss 中文教程 css帮助文档 css中文apicss 中文教程 css帮助文档 css中文apicss 中文教程 css帮助文档 css中文api
css3官方帮助文档中文版