CSS定位及文档流

原创
2016/08/10 21:03
阅读数 300

今天看到一个面试题问哪种css的属性不会让div脱离文档流,答案有position分别是relative,abosolute,fixed及float的选项

当时看到题不是太明白什么是文档流,查了下normal flow,其实就是html中从上到下,从左到右的显示顺序

在这个过程中, 行内元素水平排列, 直到当行被占满然后换行; 块级元素则会被渲染为完整的一个新行(比如DIV就是一个块级元素)

接下来再看看CSS中的浮动机制float,float会让当前元素漂移到左右,其它的布局会感知不到这个元素了,所以是脱离了正常的文档流的。

接下来看看css中3种定位机制,abosolute是相对于第一个父元素进行定位(注意是有非static的position的,比如relative或者absolute的),fixed是相对于浏览器窗口进行定位,这2个都会脱离文档流。而relative是相对于该元素正常位置进行定位,其周边的元素不会变,所以使用了relative定位的元素是不脱离文档流的。

参考文档:

http://www.cnblogs.com/tim-li/archive/2012/07/09/2582618.html

https://tink.gitbooks.io/fe-collections/content/ch03-css/normal-flow.html

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
1 收藏
0
分享
返回顶部
顶部