inline-block，BFC，外边距合并

在什么场景下会出现外边距合并？如何合并？

• 产生折叠的必备条件：margin必须是邻接的

• 必须是处于常规文档流（非float和绝对定位）的块级盒子,并且处于同一个BFC当中

• 没有线盒，没有空隙（clearance，下面会讲到），没有padding和border将他们分隔开

• 都属于垂直方向上相邻的外边距，可以是下面任意一种情况

• 元素的margin-top与其第一个常规文档流的子元素的margin-top

• 元素的margin-bottom与其下一个常规文档流的兄弟元素的margin-top

• height为auto的元素的margin-bottom与其最后一个常规文档流的子元素的margin-bottom

• 高度为0并且最小高度也为0，不包含常规文档流的子元素，并且自身没有建立新的BFC的元素的margin-top和margin-bottom

• 折叠的结果:

• 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值

• 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值

• 两个外边距一正一负时，折叠结果是两者的相加的和

消除边距合并

• 父子边距合并：父容器加border或者padding：1px；
• 兄弟边距合并：float或者display：inline-block;
• 不同父容器中的相邻外边距合并：overflow
• 自身上下外边距合并：加border：transparent；或者padding：1px；或者overflow：auto；

消除list作为inline-block时的缝隙

• li与li之间不换行
  
• tag1
• tag2
• tag3
• 交错换行

tag1
tag2
tag3

• 负margin，第一个li单独设置margin-left：0；

margin-left: -4px;

• 设置li为float：left；父容器为overflow：auto；
• 父容器设置font-size：0；后代中须重设font-size；

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

父容器形成了一个BFC

浮动导致的父容器高度塌陷指什么

• 指元素浮动以后脱离了文档流，无法撑开父容器的空间
• 解决办法：
  使用clear类（伪类）或clear清除浮动

    .ct1::after{
      display: block;
      content: '';
      clear: both;
    }

BFC

• 定义：浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）
  在BFC中，盒子从顶端开始垂直地一个接一个地排列，两个盒子之间的垂直的间隙是由他们的margin 值所决定的。在一个BFC中，两个相邻的块级盒子的垂直外边距会产生折叠
  在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘）
• 理解：首先BFC是一个名词，是一个独立的布局环境，我们可以理解为一个箱子（实际上是看不见摸不着的），箱子里面物品的摆放是不受外界的影响的。转换为BFC的理解则是：BFC中的元素的布局是不受外界的影响（我们往往利用这个特性来消除浮动元素对其非浮动的兄弟元素和其子元素带来的影响。）并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列
• 运用：
• 撑开父容器的高度
• 清除浮动
• 取消margin相遇时的折叠

读代码

.clearfix:after{ /*在容器的最后添加一个after伪类*/
content: ''; /*伪类的内容为空*/
display: block; /*作为块级元素显示*/
clear: both;/*清除浮动*/
}
.clearfix{ 
*zoom: 1;/*在IE6,7中实现以上效果*/
}

• 整体作用是实现父容器的高度被内部的浮动元素撑开，并在IE6,7中实现兼容
• 和BFC的不同：bfc是创建一个独立空间，浮动元素包含在这个bfc之中，而添加伪类的方法中，实际上浮动元素并没有包含在父元素中，但是包含了底部的空白伪类，因为我们为伪类添加了两侧不能有浮动元素的属性，所以伪类被迫出现在了浮动元素的下方。

html中添加多个空格

• 使用特定字符替换空格
   ；
• 空格外层套上pre标签，常用于文字中包含代码

   
     
       1.ddd
       2.fff
     
   
 

本教程版权归饥人谷和作者所有，转载须说明来源。