注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

前端开发那点事儿

冒犯之处,敬请谅解。

 
 
 

日志

 
 
 
 

CSS文档流  

2014-05-24 15:01:17|  分类: 默认分类 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

转自:http://blog.sina.com.cn/s/blog_68150d100101229a.html

(2012-09-06 11:47:12)
标签:

杂谈

分类: HTML/CSS

很多CSS的书籍在谈到CSS的定位机制时都会提到一个关键词“文档流”,然而可能这词对于作者来说简单得不需解释吧,所以很少见到有这词的具体解释,然而本人认为弄懂本概念对能否很好理解整个定位机制来说很关键!网上查了一下网友的理解,再翻了下W3C,结合自己理解。可以用W3C上面的一句话来概括:“元素的位置由元素在 (X)HTML 中的位置决定。”

 

要很好的理解上面这句话,可以用排除法。CSS的定位机制有3种:普通流、浮动(floatleft/right/none)和定位 position:static/relative/absolute/)。

 

普通流就是正常的文档流,在HTML里面的写法就是从上到下,从左到右的排版布局。

 

例:

 

<div id=”01”></div><div id=”02”></div><div></div>

 

很显然这是最普通的文档流,从左到右,一个挨一个按照顺序01先,02其次,03最后排列。

 

 

一旦给其中的某个DIV进行FLOAT属性或者absolute定位(不包括static/relative,这两个依然保持正常的文档流),则它完全脱离文档流,不占空间。

 

例:

 

为了能更好辨认,我分别给01绿色,02灰色,03黄色。然后再给01左浮动。结果,01脱离了文档流,完全不占空间,所以02顺势顶替了01原来的位置,结果0201盖住了。

 

同理,absolute定位跟FLOAT一样,脱离了文档流,不再占原来文档流的空间了。再举一个大家在日常经常遇到的问题来印证—高度自适应

反复想一想,高度自适应的原理其实就是这个:

 

<div id=”a”>

<div id=b>这是b</div>

<div id=c>这是c</div>

</div>

这个结构是a包住bc,颜色不变,a的高度为自动,b的高度为100C的高度为500bc都为左浮动

效果:

 

 

很明显a没有被撑开了。原因是它们浮动了就不再占空间了。既然没有空间可占,那就等于容器里没有东西,所以不撑开。解决办法是在黄色DIV的后面加个DIV,然后清除浮动。让他有空间可占,自然就撑开了。试试!

 

清除后的效果:

 

总结:

 

1  CSS的定位机制有3种:普通流、浮动和定位。

2  文档流:从上到下,从左到右,一个挨一个的简单或者叫正常布局。

3  定位:(position

 

Static:保持文档流。

Relative:相对本身的原始位置发生位移且保持文档流,占空间。

Absolute:脱离文档流,不占空间且相对于其包含块来定位。

4  浮动:(flaot)脱离文档流,不占空间。

5  以前总是觉得positionstatic这个属性很多余,现在看来他的作用就是让元素保持文档流的!

以上都是我—“1号仔”,在学习的过程中发现的问题,欢迎有更多想法的童鞋们发表意见互相交流,以达到共同进步的效果。

  评论这张
 
阅读(574)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017