CSS定位和浮动

文档流的概念指什么？有哪种方式可以让元素脱离文档流?

• 将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流.
• 浮动,绝对定位,固定定位可以让元素脱离文档流.

有几种定位方式，分别是如何实现定位的，使用场景如何？

• position:relative相对定位：相对于其正常位置进行定位。在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它元素。
  参考点为元素原来位置
• position:absolute绝对定位:相对于static(默认值,没有定位)以外的第一个父元素进行定位。根据定位点的padding偏移
  参考点为第一个父元素
• position:fixed固定定位:相对于浏览器窗口进行定位。
  参考点为浏览器窗口
  定位为元素border外边到父容器border的内边.

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

z-index用来控制层叠元素的显示优先级，值越大优先级越高。

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

• position:relative其文档流的位置没有发生改变,其他元素的位置也不会相应的发生偏移
• margin进行位置偏移的时候会影响跟他相近的元素也发生偏移

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

页面居中.png

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

浮动使元素脱离文档流

• 对其他浮动元素:同级的非浮动元素会跟随其后
• 对普通元素:会占据浮动元素的位置
• 对文字:文字会环绕浮动元素

清除浮动指什么? 如何清除浮动?

清除浮动是指对浮动元素所产生的影响其他元素的浮动效果予以清除

• 对于同级元素可添加clear : left | right |both清除
• 对于父元素同级元素的影响可通过伪类元素after来实现

      .father:after{
        display: block;
        content: "";
        clear:both;
      }
      .father{
       *zoom: 1; /* for ie 6,7*/
      }