BFC&边距合并-Assignment

问答题

1. 在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例

外边距出现场景包括：

• 父子元素的外边距合并的问题及解决方案
  当父元素不设置border而子元素设置margin时，父子元素的外边距会产生合并。
  如绿色方块不设置border且设置margin:10px,粉色方块设置margin:10px,产生父子外边距合并。

解决方案是在父元素中添加border或padding

设置padding情况下 设置border情况下

• 兄弟元素的外边距合并的问题及解决方案
  当相邻的兄弟元素在同一个父容器下均设置margin时，会产生外边距合并，并且margin值为二者的较大值。
  如2个粉色方块分别设置的margin为10px和20px，但2个粉色方块交接出的margin为20px而不是30px，从而产生外边距合并。

解决方案是在使用float/display:inline-block/为相邻的子元素生产BFC

float情形

.child-3,.child-4{
    float:left;
}
 <div class="box">
        <div class="child child-3"></div>
        <div class="child child-4"></div>
    </div>
}

inline-block情形

.child-3,.child-4{
    display:inline-block;
    /*使用display时要注意child-3的margin-top会发生不规则偏移 */
}
<div class="box">
        <div class="child child-3"></div>
        <div class="child child-4"></div>
    </div>

生成BFC

 .ctn-3,ctn-4{
    overflow:hidden;
    /*  为child-3和child-4分别添加盒子，并将盒子进行BFC； */
    }
<div class="box">
      <div class="ctn-3">
        <div class="child child-3"></div>
      </div>
      <div class="ctn-4">
        <div class="child child-4"></div>
      </div>
    </div>

2.去除inline-block内缝隙有哪几种常见方法?

去除inline-block的间隙包括：

inline-block默认下的间隙

• 将display为inline-block的元素放置在一行，此方法不适用与包含较多内容的元素

<ul class="box">
  <li>html</li><li>css</li><li>javascript</li>

• 使用浮动

利用float清除间隙

li{
  font-size:30px;
  display:inline-block;
  background:lightblue;
  float:left;
}

• 使用负边距

利用负边距清除间隙

li{
  font-size:30px;
  display:inline-block;
  background:lightblue;
  margin-left:-4px;
}
li:first-child{
  margin:0;
}

3.父容器使用overflow: auto| hidden撑开高度的原理是什么？

父容器在使用overflow: auto| hidden后使其产生BFC，从而为float开辟出一个独立的空间，撑开父容器的高度。

4.BFC是什么？如何形成BFC，有什么作用?

BFC是什么

• BFC本质上就是是一个元素为其内部新生成的独立空间，内部的内容全被格式化成块级容器(注意是块级容器，不是块级元素)
• 既然内部的内容全部为块级容器，自然按照块级容器的排版方式——可设置宽高并且从左到右排列
• 由于相邻的子元素同处一个空间，margin会产生合并
• 最后，即使是浮动元素在父容器建立的BFC内部也得老老实实地按照块级容器排版，不能搞特殊

如何形成BFC

根据w3c的定义：

浮动元素、绝对定位元素、非块级元素的块级容器（如inline-block,table-cells,and table-captions）和overflow值不为visible的块级元素，这些元素都会为它们的内容建立BFC。

因此，建立BFC的方式有：

• 为元素添加float非none的属性值
• 为元素添加postion:absolute
• 为元素添加display:inline-block | table-cells | table-caption
• 为元素添加overflow:auto | hidden

BFC的作用

• 清除浮动
• 清除外边距合并
  ......

5.浮动导致的父容器高度塌陷指什么？为什么会产生？有几种解决方法

• 父容器的高度若为自适应，子元素浮动后会产生父元素的高度塌陷

解释：浮动元素脱离文档流导致其内容消失在父容器中，由于父容器高度为自适应，即其高度全靠子元素内容撑开，子元素消失而父容器高度自然塌陷

方块1和2未添加浮动
浮动导致的高度塌陷

• 父容器的高度塌陷的解决方案：
  两种思路，一种是父容器形成BFC而为内容开辟独立空间，另一种是使用清除浮动属性
  • 父容器形成BFC
    父容器形成BFC效果
    [syntax]

.box{
  width:300px;
  border:5px solid pink;
  /* float:left; */
  
  /* position:absolute; */
  
  /* display:inline-block; */
  /* display:table-cell; */
  /* display:table-caption; */
  
  overflow:hidden;
  /* overflow:auto; */
}

• 利用清除浮动属性
  这里思想是在父容器中添加伪元素：after或：before（视具体情况而定），添加的元素（最好是没有内容的元素，这里为了让读者彻底看到其中的原理，所以content:"a"而在实际写码时使用content:""这个没有内容的元素）将在父容器内部的最后或最前，再使用clear:both就可以达到撑开父容器高度的效果

[syntax]

.box:after{
  content:"a";
  display:block;
  clear:both;
}

6.以下代码每一行的作用是什么？ 为什么会产生作用？ 和BFC撑开空间有什么区别？

.clearfix:after{
 content: ''; 
display: block; 
clear: both;
}
.clearfix{
 *zoom: 1;
}

• 该段代码起到清除浮动的作用，与通过父容器建立BFC的原理不同，它使用clear属性去清除浮动
• 第一段代码的解释是：给父容器定义class=“clearfix”，通过伪元素.clear:after在父容器内部的最后添加的一个内容为空的块级元素，再通过这一块级元素清除浮动的属性最终达到撑开父容器高度的效果
• 第二段代码的解释是：zoom属性是IE浏览器的专有属性，它本来是用来设置或检索对象的缩放比例，但原有属性很少被使用，最常使用的是利用zoom来兼容IE浏览器以清除浮动或外边距合并、以及触发IE浏览器的haslayout
  • _zoom是csshack中专门对IE6起作用，*zoom则是针对IE6/7
  • 本代码中*zoom:1是说明清除IE6/7浏览器中元素的浮动

---

代码题

任务11-代码