关于CSS浮动定位的问答

2017-03-29  本文已影响0人  ninc
  1. 浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响?
    浏览器按html文件顺序一个个摆放元素时,当执行到浮动元素时,会将它从正常的文档流中删除,按照float的要求向左或向右摆放元素,直到碰到父元素的边界。若父元素没有设置宽度,则会一直向左或向右到浏览器窗口的边界。
  1. 清除浮动指什么? 如何清除浮动? 两种以上方法
    清除浮动指的是解决子元素都是浮动元素时父容器高度塌陷问题。
  2. 可以在父元素的最后加上一句<div style="clear:both;"></div>,优点是有效的清除了浮动,缺点加上了一句无意义的语句,容易使人出现理解困难。
    2.可以对父元素设置float为left或right,局限性时是使父元素也成为浮动元素,父元素的父元素可能发生高度塌陷。
  3. 可以对父元素设置overflow为hidden、auto、scroll其中的值,局限性时当父元素时导航栏或者需要展开的元素时,功能会失效。
  4. 可以对父元素设置display为table-cell、table-caption、inline-block其中的值,局限性时这样设置时,父元素的宽度如果未设置的话会发生缩短。
  5. 可以对父元素设置position为absolute或fixed,局限性是改变了父元素的定位方式,使父元素从正常的文档流中删除,位置能人为手动调整。
  6. 通用的清除浮动方式:
 .clearfix{
      *zoom:1;
  }
  .clearfix:after{
      content:"";
      display:block;
      clear:left;
  }
  1. 有几种定位方式,分别是如何实现定位的,参考点是什么,使用场景是什么?
  1. z-index 有什么作用? 如何使用?
    z-index可用来设置元素z值的大小,可设置正负的z值。z值大的元素会覆盖z值小的元素。一般 z-index会在具有很多绝对定位元素时使用。
  2. position:relative和负margin都可以使元素位置发生偏移?二者有什么区别
    形象的说,一个萝卜一个坑,position:relative是坑没走,萝卜移动了,对其他的元素无影响;而负margin是坑和萝卜一起走了,对其他的元素会有影响。
    6.BFC 是什么?如何生成 BFC?BFC 有什么作用?举例说明
    BFC是块元素格式化文本,可通过设置float为left或right,设置overflow为hidden、auto、scroll其中的值,设置display为table-cell、table-caption、inline-block其中的值,设置position为absolute或fixed来生成BFC。不同的BFC之间不会发生外边距合并,BFC不会重叠浮动元素且可以包含浮动(清除浮动,防止父容器塌陷),问题2的方法2~5就是通过BFC清除浮动。
  3. 在什么场景下会出现外边距合并?如何合并?如何不让相邻元素外边距合并?给个父子外边距合并的范例
    当垂直方向上外边距相互触碰(没有边框和内边距阻隔)时,会发生外边距合并,合并方式为选择两者中更大的那个外边距作为两者共同的外边距。想要不让相邻元素外边距合并可以给其中加上内边框或边框阻隔,也可以使用创建BFC,阻止外边距合并。
    范例:


    Paste_Image.png

    这是当时困惑我好久的问题,“风景如画”明明设置了16px的外边距,下外边距却消失了,但其实是发生了外边距合并,“风景如画”下外边距与整个框的下外边框0发生了合并,见下图。

Paste_Image.png
上一篇 下一篇

猜你喜欢

热点阅读