第十一弹-inline-block、BFC、边距合并

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

• 外边距合并（折叠）：相邻元素边距合并只存在上下垂直方向上，共有三种不同的类型：分别为父子边距合并、兄弟边距合并、自身边距合并；

• 父子元素外边距合并：

  
  

• 兄弟元素外边距合并：

  
  

• 空元素自身上下边距合并，添加内容1隔开消除自身边距合并：

  
  
• 外边距消除办法：
  • 父子元素：父元素形成BFC、加内边距、加边框；
  • 兄弟元素：使用浮动、inline-block，或者加包裹自身形成BFC；
  • 自身：添加内容或子元素，添加加内边距、加边框；

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

• 多个元素之间不换行，开始标签与结束标签之间无空格或换行符：

  
  

• 带反">"一起换行：

  
  

• 使用负margin：

  
  

• 自身浮动，父容器形成BFC:

  
  
• 父容器添加font-size:0属性，自身重新设置字体大小：
  
• 详见实例，请点击实例，查看运行效果：
  

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

• 子元素定义浮动属性，不占据空间，那么父容器不会被撑开，父容器使用overflow: auto| hidden属性后，父容器的宽度会强制包裹内部的全部浮动元素，从而达到撑开高度的作用（相当于清除浮动元素不占据空间的效果，强制使浮动元素占据空间）；

四、BFC是什么？如何形成BFC，有什么作用?

• 定义：BFC（Block Formatting Context）直译为“块级格式化上下文”。可以把它理解成是一个独立的容器，并且这个容器的里的布局，与这个容器外的毫不相干；
• 作用：
  • 阻止垂直外边距折叠，内部子元素仍然会折叠；
  • 不会重叠浮动元素；
  • 可以包含浮动

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

• 定义：由于浮动元素不占据空间,当父容器内部所有元素添加浮动属性后，自身又没有设置相应数值的高度，那么父容器就会出现高度塌陷，显示看起来没有height高度；
• 解决办法：清除浮动，强制父容器包裹浮动子元素，如下表格
  

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

• 以下为相应的代码及作用注释：
  .clearfix:after /为clearfix类添加after伪类属性/
  {
  content: '';/元素内容为空/
  display: block;/空元素转换为块级元素/
  clear: both;/清除两端浮动/
  }
  .clearfix{
  zoom: 1;/兼容ie6&7,清除浮动*/
  }
• 和BFC区别：
  • 添加伪类：在父容器的最后添加一个子元素并清除两端浮动，并且这个元素是块级元素会独立成行，那么它会被浮动元素挤压到最低端，相当于父容器包含了浮动元素；
• BFC：自身为独立空间-BFC，BFC特性就有可以包含内部浮动元素和不会重叠浮动元素；

七、代码题

一. 实现如下效果的导航条

• 答：代码11-1
  二. 利用BFC的原理实现下图所示两栏布局:

  <div id="header">header</div> 
  <div id="content"> 
    <div class="aside">aside</div>
    <div class="main"> 我是main 我是main 我是main 我是main 我是main 
    是main 我是main 我是main 我是main 我是main 我是main 我是main... 
    </div> 
    </div> 
  <div id="footer"></div>
  

• 答：代码11-2

　　　　　　　　声明：本博客版权归兰文聪和饥人谷所有，转载需说明来源！