浮动、定位

字数 2074阅读 49
文档流的概念指什么?有哪种方式可以让元素脱离文档流?

即普通流。文档流是文档中可显示对象在排列时所占用的位置,将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流。内联元素和块级元素各自遵循着不同的显示方式,构成了html的文档,文档的内容被比喻为流,文档中的元素可以随波流,也可以脱离流,漂浮在其上,如果你没有为元素设定附加css属性,那么元素将按照它在html代码中出现的顺序一个挨着一地排列。

浮动和定位可以让元素脱离文档流。

  • 浮动 float
  • 固定定位 position:fixed
    绝对定位 position:relative
有几种定位方式,分别是如何实现定位的,使用场景如何?

1. static(默认)
当你没有为一个元素(例如div)指定定位方式时,默认为static,也就是按照文档的流式(flow)定位,将元素放到一个合适的地方。所以在不同的分辨率下,采用流式定位能很好的自适合,取得相对较好的布局效果。
一般来说,我们不需要指明当前元素的定位方式是static——因为这是默认的定位方式。除非你想覆盖从父元素继承来的定位系统。
left,top属性对static没有效果,static是靠margin这些定位的。

2. relative(相对定位)
在static的基础上,如果我想让一个元素在他本来的位置做一些调整(位移),我们可以将该元素定位设置为relative,同时指定相对位移(利用top,bottom,left,right)。
有一点需要注意的是,相对定位的元素仍然在文档流中,仍然占据着他本来占据的位置空间——虽然他现在已经不在本来的位置了。

3. absolute(绝对定位)
如果你想在一个文档(Document)中将一个元素放至指定位置,你可以使用absolute来定位,将该元素的position设置为absolute,同时使用top,bottom,left,right来定位。
如果没有定位父元素,位置是相对于body来进行的。
绝对定位会使元素从文档流中被删除,结果就是该元素原本占据的空间被其它元素所填充。

4. fixed(固定定位)
我们知道absolute定位的参照物是“上一个定位过的父元素(static不算)”,那么如果我想让一个元素定位的参照物总是整个文档(viewport),怎么办呢?
答案是使用fixed定位,fixed定位的参照物总是当前的文档。利用fixed定位,我们很容易让一个div定位在浏览器文档的左上,右上等方位。
HTML中的几种定位方式

absolute, relative, fixed 偏移的参考点分别是什么?
z-index 有什么作用? 如何使用?

当网页上出现多个由绝对定位(POSITION:absolute)或固定定位(POSITION:fixed)所产生的浮动层时,必然就会产生一个问题,就是当这些层的位置产生重合时,谁在谁的上面呢?或者说谁看得见、谁看不见呢?这时候就可以通过设置z-index的值来解决,这个值较大的就在上面,较小的在下面。

z-index的使用

demo

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

使用position:relative设置偏移时,相对定位的元素仍然在文档流中,仍然占据着他本来占据的位置空间,不影响其他元素的布局。
使用负margin设置偏移时,元素会放弃自己原本占据的空间,不但改变了自己的位置,还会影响其他元素的位置。
demo

如何让一个固定宽高的元素在页面上垂直水平居中?

使用绝对定位position:absolute使目标元素脱离文档流,top和left设置偏移50%,这时候目标元素的左上角正好处于页面正中间,再使用margin负值来设置目标元素向左上方向偏移自身宽高的一半,这时目标元素会垂直水平居中显示在页面。
demo

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

浮动元素有什么特征?

  • 浮动元素会脱离正常的文档流,按照其外边距指定的位置相对于它的上一个块级元素(或父元素)显示
  • 浮动元素后面的块级元素的内容会向此浮动元素的外边距靠齐,但是边框和背景却忽略浮动元素而向上一个任意非浮动元素靠齐
  • 浮动元素后面的内联元素会向此浮动元素的外边距靠齐
  • 元素设置为浮动之后,就生成一个块级框(css行高提出的概念),没必要再声明display:block,可以设置宽高

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

  • 其他浮动元素:浮动元素会依次排在其之前浮动元素左边或右边,父元素如果放不下了会被挤到下面一行。
  • 普通元素:普通元素将会占据其原来的位置,后面的浮动元素会浮在普通元素之上。
  • 文字:文字会环绕浮动元素显示。
    demo
清除浮动指什么? 如何清除浮动?

在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外面而影响(甚至破坏)布局的现象。这个现象叫浮动溢出,为了防止这个现象的出现而进行的CSS处理,就叫CSS清除浮动。

如何清除浮动?

  1. 方法一:使用带clear属性的空元素
    在浮动元素后使用一个空元素如<div class="clear"></div>,并在CSS中赋予.clear{clear:both;}属性即可清理浮动。
  2. 方法二:使用CSS的overflow属性
    给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动,另外在 IE6 中还需要触发 hasLayout ,例如为父元素设置容器宽高或设置 zoom:1。
    在添加overflow属性后,浮动元素又回到了容器层,把容器高度撑起,达到了清理浮动的效果。
  3. 方法三:使用CSS的:after伪元素
    结合 :after 伪元素(注意这不是伪类,而是伪元素,代表一个元素之后最近的元素)和 IEhack ,可以完美兼容当前主流的各大浏览器,这里的 IEhack 指的是触发 hasLayout。
    给浮动元素的容器添加一个clearfix的class,然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素(Block element)清理浮动。
    demo
     
     
     
     
    本教程版权归作者和饥人谷所有,转载须说明来源!

推荐阅读更多精彩内容