发表于: 2019-04-23 23:48:14

1 928


今天完成的事:     

        进一步熟悉了css-position元素,在熟悉position之前先分析一下文档流与脱离文档流的概念,首先文档流是相对于盒子模型来讲解的,正常的文档流就是标签所处的一个空间。脱离文档流就是标签所处的另一个空间,它在文档流之上并且可以覆盖文档流。当脱离文档流时后面的元素会占有它的位置,通俗的讲就是那个地方有空缺补那里。一般一个页面的成果都需要这两个空间配合来完成。 

float与absolute脱离文档流的区别,float脱离文档流后其他盒子会保持不动,但其他盒子的文本依然会为这个元素让出位置并环绕它周围,而对于absolute定位脱离文档流的元素其他盒子与其他盒子内的文本都保持固定不动。 

绝对定位与float浮动不能同时使用,比如一个大盒子里有的是绝对定位,有的是使用css float浮动定位,这样IE6浏览器将不会显示改大对象里的这些绝对定位与相对定位,这也算是IE6 CSS HACK吧,注意不要混用即可。 

元素的定位以及在文档流之中的属性:

 relative相对于自身在文档流中所处的位置来进行定位,参照物为自身,仍处于文档流中,元素设置相对定位后,可以相对于其在普通流中的位置偏移,原本所占的空间仍保留

脱离文档流之间的属性: 

absolute绝对定位是脱离文档流的,默认宽度为内容的宽度,在页面中是不占据空间的,后面的元素会在其原来的位置上进行布局,生成绝对定位的元素,参照物距该元素最近的已定位(position不为static)的祖先元素进行定位。定位之后都会产生块级框。元素的位置通过上下左右属性进行定位。

当相对定位和绝对定位移动后能看到它会覆盖其它元素,这说明当元素被设置相对定位和绝对定位后,将激活z-index属性,其层叠级别高于原本的文档流

 fixed固定布局是脱离文档流的,默认宽度为内容的宽度,参照物为浏览器窗口。和absolute定位不同的是,设置为固定定位的元素不会随页面滚动而改变位置,所以经常用在登录框和导航中。元素的位置通过上下左右属性进行定位。


明天计划的事情:进行下一步学习,探索新的知识并进行掌握。 

收获:通过今天学习深度分析定位布局和浮动之间的关系以及一系列元素属性和作用。


返回列表 返回列表
评论

    分享到