美文网首页
关于CSS浮动定位的问答

关于CSS浮动定位的问答

作者: ninc | 来源:发表于2017-03-29 16:04 被阅读0次
    1. 浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响?
      浏览器按html文件顺序一个个摆放元素时,当执行到浮动元素时,会将它从正常的文档流中删除,按照float的要求向左或向右摆放元素,直到碰到父元素的边界。若父元素没有设置宽度,则会一直向左或向右到浏览器窗口的边界。
    • 对父元素:如果父元素未设置高度,且子元素都是浮动元素,就会发生父元素高度塌陷的情况,即父元素认为它不包含任何元素,高度变为0。
    • 其他浮动元素:其他浮动元素能感受到别的浮动元素的存在,在父元素宽度不够时会发生浮动元素下移现象,如果浮动元素的高度不同,那么向下移动的时候可能被卡住。
    • 普通元素:普通元素察觉不到浮动元素的存在,在布局时不考虑浮动元素布局。
    • 文字:文字能考虑到浮动元素的存在,在布局时会绕过浮动元素。
    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. 有几种定位方式,分别是如何实现定位的,参考点是什么,使用场景是什么?
    • inherit:定位方式从父元素继承
    • static:默认的定位方式,由正常的文档流分配位置
    • relative:相对定位方式,先由正常的文档流分配位置,而后相对于这个位置偏移,一个萝卜一个坑,坑在原位,萝卜跑路了。一般用来微调图片等。
    • absolute:绝对定位方式,从文档流中删除,相对于除static定位以外的第一个祖先元素(如祖先元素都是static定位方式,则相对于html元素)进行定位,当元素设置了top,left(right,bottom同理)的值时,参考点为内边框;若未设置,参考点为内padding。在设置一个精确定位的元素时使用。
    • fixed:绝对定位方式,从文档流中删除,相对于浏览器窗口放置元素,不随网页变换改变位置。一般在设置弹窗,“回到顶部”的栏的时候使用。
    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

    相关文章

      网友评论

          本文标题:关于CSS浮动定位的问答

          本文链接:https://www.haomeiwen.com/subject/rcpeottx.html