inline-block、BFC、边距合并

• 在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例
• 当两个或更多垂直外边距相遇时，它们将形成一个外边距。这个外边距的高度等于两个发生叠加的外边距的高度中的较大者。

• 当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距发生叠加。

  
  
  

  元素的上外边距与上面元素的下外边距发生叠加

• 当一个元素包含在另一个元素中时（元素内没有内边距与边框把外边距分隔开时），它们垂直方向上的上或下外边距也会发生叠加。

  
  
  

  元素的上外边距与父元素的上外边距发生叠加

• 如果一个元素是空元素，内容没有宽高，没有边框和内边距，它有外边距，在这种情况下这个元素的上下外边距就碰到了一起，它们会发生重叠。

  
  
  

  元素的上外边距与下外边距发生重叠

• 如果这个外边距碰到了另一个元素的外边距，它还会发生叠加。

  
  
  

  空元素中已经叠加的外边距与另一个空元素的外边距发生叠加

• 相邻元素外边距不合并的方法：

  
  
  

  给元素设置浮动
  
  
  

  给元素设置inline-block
  
  
  

  使用overflow给其父元素形成BFC消除外边距
  
  
  

  空元素撑开自己上下外边距的三种方法

• 父子元素外边距合并范例

  
  
  

  父子外边距合并
  
  
  

  父容器添加边框解决父子元素外边距合并
  
  
  

  父容器添加内边距解决父子元素外边距合并
  
  
  

  使父容器形成BFC

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

• 当元素设置inline-block属性时会收缩宽度，出现了缝隙的情况

  
  
  

  inline-block缝隙

• 负margin方法去除缝隙：

  
  
  

  负margin
• 在HTML上把
• 写在一行上或更改
• 标签写法
  
  

  写在一行
  
  
  

  更改`
• `标签

使用浮动(需清除浮动)

使用浮动

给父容器设置font-size：0; 不过记得要给inline-block元素重新设置font-size

使用font-size解决

• 父容器使用overflow: auto| hidden撑开高度的原理是什么？
• 当元素设置浮动时，此元素将在其父容器的文档流中删除，这时父容器因为没有内容将会出现坍塌的效果（块元素没有内容无法撑开宽高）。这时使用overflow:hidden/auto属性时父容器将会形成新的空间使其不再坍塌(浮动和绝对定位也可以)知乎
  
  

  父容器坍塌
  
  
  

  给父容器加上overflow清除浮动

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

• BFC是独立的布局环境，BFC中的元素的布局是不受外界的影响（我们往往利用这个特性来消除浮动元素对其非浮动的兄弟元素和其子元素带来的影响。）并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。

• 形成BFC的方法
  1 设置float，值不为”none”
  2 设置overflow，值不为”visible”（hidden，auto，scroll）
  3 设置display的值为 “table-cell”, “table-caption”,或 “inline-block”
  4 设置position，值不为 “static” 或 “relative”（absolute，fixed）

• BFC可以清除浮动。

• 可以解决父子元素外边距合并的问题

  
  
  

  使父容器形成BFC

• 当图片浮动时，文字需不围绕图片一行排列时（也可以给p标签加margin-left）

  
  
  

  一行排列

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

• 浮动导致的父容器高度塌陷是指元素设置了浮动属性后在父级元素内脱离文档流不再占据文档流空间，父级元素感知不到已设置浮动的子元素，认为自己内部没有元素而无法撑开宽高的情况。

  
  
  

  父容器在文档流中无法感知浮动元素而产生坍塌

• 给父容器设置overflow：auto/hidden,float:left/right, display:inline-block/table, position: absolute/fixed,属性，使父容器形成BFC空间
  

  

  父容器形成BFC属性

• 给父容器最后增加一个空元素，设置clear：both；属性清除浮动，因为空元素存在于正常文档流中所以父容器可以感知到这个空元素并且被空元素撑开（这里用为元素选择器:after会很方便）

  
  
  

  父容器最后增加空元素撑开容器

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

.clearfix:after{  /*使用伪元素选择器:after在.clearfix元素的最后添加一个元素*/
      content: ''; /*给伪元素:after添加一个空内容*/
      display: block; /*设置伪元素:after为一个块级元素*/
      clear: both; /*设置伪元素:after清除左右浮动元素*/
}
.clearfix{
       *zoom: 1; /*兼容早期IE的hasLayout，清除浮动*/
}

• 以上方法可以在父容器的最后添加一个内容为空存在与文档流中并且清除左右浮动的元素。父容器将会感知到这个空元素并且把自身空间撑开。
• BFC撑开空间是使父容器本身形成一个可以包含浮动元素的独立的空间，上述方法只是撑开了内容。

1 实现如下效果的导航条

题1

作业代码1

2 利用BFC的原理实现下图所示两栏布局

 
header
 
 
    
aside
 
    
 我是main 我是main 我是main 我是main 我是main 我是main 我是                            main 我是main 我是main 我是main 我是main 我是main... 
    
 

题2

作业代码2

本博客版权归 本人和饥人谷所有，转载需说明来源