码迷,mamicode.com
首页 > 其他好文 > 详细

浮动与定位

时间:2017-01-06 23:47:37      阅读:290      评论:0      收藏:0      [点我收藏+]

标签:通过   .com   after   style   屏幕   idt   overflow   自动   文档流   

 

整理下关于文档流,浮动,定位及造成的影响文档流的知识点

一  文档流的概念指什么?

  文档流,是指元素排版布局过程中,元素会自动从左到右,从上往下的流式排列。并最终窗体自上而下分成一行行,并在每行中按从左到右的顺序排放元素。脱离文档流即是元素打乱了这个排列,或是从排版中拿走。

  标准流的特点:1.块级元素从上到下,独占一行

         2.行内元素,行内块级元素从左到右在一行中显示。

         3.占位置。

  使元素脱离文档流的方法有:浮动和定位。

二  CSS定位 position

      CSS定位方式有四种:默认定位(static)、相对定位(relative)、绝对定位(absolute)和固定定位(fixed)

      static: 默认值。没有定位,元素在正常的文档流中,top,right,bottom,left和z-index属性无效。

 

   relative: 生成相对定位的元素,通过top,bottom,left,right的位置相对于其正常位置进行定位。其中的相对指的是相对于元素在默认流中的位置。

  注意:1.元素偏移之后,他本来默认文档流中占据的位置仍然存在,其紧挨其后的元素的定位依据它本来的位置定位;

     2.该元素偏移之后,可能存在覆盖其他元素的情况,可以使用z-index属性改变层叠情况。

技术分享  技术分享技术分享技术分享

第二个盒子元素相对于之前的位置向下平移了20px,向右平移30px。第三个盒子的位置相对于第二个盒子原本的位置排列。

z-index需要配合position属性才能有效,值大者处于顶层,默认值为0。

 

  absolute: 生成绝对定位的元素,相对于static定位的第一个父元素进行定位。

      注意: 1.绝对定位的元素已经脱离文档流,普通流中其他元素的布局就像绝对元素不存在一样;

     2.绝对定位的元素的位置是相对于最近的已定位的祖先元素,如果元素没有已定位的祖先元素,它的位置就相对于body;

     3.绝对定位的框可以覆盖页面的其他元素。

技术分享

这种情况是离box2最近的父元素已定位的情况,如果离box2最近的父元素没有定位的话,示例如下:

技术分享

      

  fixed:本质上是一种绝对定位,不为元素预留空间。通过制定相对于屏幕视窗的位置来制定元素的空间,且元素的位置在屏幕滚动时不会发生变化。应用于很多网站顶端的固定导航、下方的广告,或者右边的回到顶部div。

技术分享   技术分享

 

技术分享技术分享

技术分享

 

三、absolute、relative、fixed偏移的参考点分别是什么?

         absolute偏移的参考点是:相对于最近的已定位的父元素,如果没有,则相对于body元素;

    relative偏移的参考点是:相对于元素在普通流中的原来位置;

    fixed偏移的参考点是:相对于浏览器窗口。

 

四、z-index 有什么作用? 如何使用?

 

z-index属性用于设置节点的堆叠顺序,拥有更高堆叠顺序的节点将显示在堆叠顺序较低的节点前面。

 使用方法:示例

技术分享

1.z-index仅对定位元素有效(position:relative||absolute||fixed);

2.z-index只可比较同级元素。

五、position:relative和负margin都可以使元素位置发生偏移?二者有什么区别?

position:relative和负margin都可以使元素位置发生偏移,(都不会脱离文档流)二者的区别表现在:

          1.负margin会使元素在文档流中的位置发生偏移,它会放弃偏移之前占据的空间,紧挨其后的元素会填充这部分空间;

          2.相对定位后元素位置发生偏移,它仍会坚守原来占据的空间,不会让文档流的其他元素流入。

技术分享

 技术分享

六、浮动元素有什么特征?对其他浮动元素、普通元素、文字分别有什么影响?

   浮动元素的特征有:

     1.块元素优先在一排显示;

     2.内联元素支持宽高;

       3.无论是块元素还是内联元素,没有宽度时默认内容撑开宽度;

       4.脱离文档流;

     5.提升层级半级(z-index)

   造成的影响:

     对其他浮动元素的影响:后浮动的元素永不会超过先浮动元素的顶端。

     浮动的元素只会覆盖后面的块级元素,不影响前边的块级元素。

     对普通元素的影响:浮动元素会脱离正常的文档流,使得紧挨它的元素位置发生偏移,影响布局。

     对文字的影响:浮动元素向下延伸时,不会影响正常文本的显示,文本会相对于浮动元素进行偏移。但部分文本背景会被浮动元素遮住。

                 技术分享技术分享

 七、清除浮动的方法

  如果一个父盒子中有一个子盒子,并且父盒子没有设置高,子盒子在父盒子中进行了浮动,那么将来父盒子的高度为0.由于将来父盒子的高度为0,下面的元素会自动补位,所以这个时候要进行浮动的清除。clear:both

  1.使用额外标签法:

  在浮动的盒子之下再放一个标签,在这个标签中使用clear:both,来清除浮动对页面的影响。

  .clearfix {clear:both;}

  <div class="clearfix"></div>

  a.内部标签:会将这个浮动盒子的父盒子高度重新撑开

  b.外部标签:会将这个浮动盒子的影响清除,但是不会撑开盒子。

  注意:一般情况下不会使用这一种方式来清除浮动。因为这个清除浮动的方式会增加页面的标签。

  2.使用overflow属性来清除浮动:

  先找到浮动盒子的父元素,再在父元素中添加一个属性,就是清除这个父元素中的子元素浮动对页面的影响。

  overflow:hidden;

  3.使用伪元素(给父元素)来清除浮动:

  .clearfix::after {
           content: "";//添加内容为空

                    height: 0;//内容高度为0

                    line-height: 0;//内容文本的高度为0

                    display: block;//将文本设置为块级元素

                    clear: both;//清除浮动

                    visibility: hidden;//将元素隐藏

           }

           .clearfix {

                    zoom: 1;/*为了兼容ie6*/

           }

 

参考作者(betterwlf)    http://www.cnblogs.com/wlf1112/p/6245502.html

参考作者 (Thinkguohttp://www.cnblogs.com/thinkguo/p/6223530.html#top

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

   

     

  

  

  

 

浮动与定位

标签:通过   .com   after   style   屏幕   idt   overflow   自动   文档流   

原文地址:http://www.cnblogs.com/tongtian17/p/6255777.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!