- 在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例
块元素直接接触的垂直外边距（top、bottom）会合并成成单个外边距（取当中较大的值）- 外边距合并的情况
- 毗邻的兄弟元素的垂直外边距
备注：橙色的是外边距
- 毗邻的兄弟元素的垂直外边距
- 外边距合并的情况
.child {
width: 200px;
height: 100px;
background-color: red;
margin: 20px;
}
上面一个div的margin-bottom+下面一个div的margin-top是40px，但是他们合并了，合并后取两个值中较大的一个
- 父元素与第一个/最后一个子元素的垂直外边距合并
.parent {
margin-bottom: 10px;
}
通过设置父元素的margin-bottom为10px，加上最后一个子元素的margin-bottom为20px，应该是30px，但是因为外边距合并，取他们当中较大的一个就是20px
- 空块级元素的垂直外边距
.box4 {
margin: 20px:
}
一个空的div，设置了marin为20px，意味着有20px的上外边距和20px的下外边距，垂直方向上应该有40px，但是上外边距和下外边距却合并了，最后只有20px
- 阻止外边距合并
- 阻止相邻元素的合并
1. float、绝对定位来脱离文档流position
2. display: inline-block;的元素与其兄弟元素、子元素和父元素的外边距都不会合并
因为inline-block不符合外c规范所说的必须是块级盒子的条件，因为规范中说明，块级盒子的display属性必须是以下三种之一："block"、"list-item"、"table"
- 阻止父元素与子元素的合并
1. 设置padding和border,阻止子元素和父元素的外边距直接接触
通过设置padding来阻止合并
通过设置border来阻止合并
2. 设置overflow形成BFC来阻止合并
3. 设置display: inline-block:
- 父元素设置display: inline-block;
首先对毗邻的兄弟元素外边距不合并，然后对子元素的外边距也不合并
- 子元素设置display: inline-block;
与父元素的外边距不合并，与毗邻的兄弟元素也不合并
- 在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例
块元素的垂直外边距（top、bottom）直接接触会合并成成单个外边距（数字大的那个）- 外边距合并的情况
- 毗邻的兄弟元素的垂直外边距
- 父元素与第一个/最后一个子元素的垂直外边距合并
- 空块级元素的垂直外边距
- 外边距合并的情况
- 去除
inline-block内缝隙有哪几种常见方法?
本质是因为HTML会把多个空格当成一个- 去除HTML标签的空隙
改成<div class="wrapper"> <span>哈哈</span> <span>哈哈</span> <span>哈哈</span> <span>哈哈</span> </div>
或者<div class="wrapper"> <span>哈哈</span><span>哈哈</span><span>哈哈</span><span>哈哈</span> </div><div class="wrapper"> <span>哈哈</span ><span>哈哈</span ><span>哈哈</span ><span>哈哈</span> </div>- 利用浮动
span { float: left; }- 利用负margin
span { margin-left: -5px; }- 父元素设置
font-size: 0;子元素再设置回来
.wrapper { font-size: 0; } span { font-size: 16px; }- 父元素设置word-spacing
.wrapper { word-spacing: -5px; }注意：
word-spacing：
<blockquote>The word-spacing CSS property specifies the spacing behavior between tags and words.</blockquote>
设置的是单词和标签间的空隙
word-spacing
letter-space：
<blockquote>The letter-spacing CSS property specifies spacing behavior between text characters.</blockquote>
而letter-space设置的是字母间的空隙，所以不能用来消除行内元素的空隙，因为字与字之间的空隙也会变小
letter-space
所以就会出现这种情况：
不能用letter-space消除标签间的空隙 - 父容器使用overflow: auto| hidden撑开高度的原理是什么？
当overflow属性的值不为visible时，会触发BFC，就是块级格式上下文，BFC可以消除浮动带来的父元素高度坍塌的影响
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box1,.box2,.box3 {
width: 200px;
height: 100px;
background-color: orange;
float: left;
margin: 5px;
}
.wrapper {
overflow: hidden;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>
- BFC是什么？如何形成BFC，有什么作用?
<blockquote>Boxes in the normal flow belong to a formatting context, which may be block or inline, but not both simultaneously. Block-level boxes participate in a block formatting context. Inline-level boxes participate in an inline formatting context.</blockquote>
在w3c规范中这样说道，每个文档流中的盒子必定属于一个格式化环境，要么块级格式化环境，要么行内格式化环境，其中，块级元素在块级格式化环境中，行内元素在行内格式化环境中
其实HTML根元素html就是一个默认的块级格式化上下文，因为当页面的内容在视窗显示不下的时候，会出现滚动条，意味着html根元素的overflow属性的值为auto
那么块级格式化上下文是什么呢，通俗来说，就是一个独立的布局环境，外面的元素不能影响里面的元素，里面的元素也不能影响外面的元素，那么BFC的布局规则是怎样的呢- BFC布局规则
- 内部的BOX会在垂直方向，一个接一个地放置
- BOX垂直方向的距离由margin决定。属于同一个BFC的两个相邻的BOX的margin会发生重叠
- 每个元素的margin-box的左边与包含块的border-box的左边相接触（对于从左往右的格式，反之相反）。及时存在浮动也是如此
- BFC的区域不会与float box重叠
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此
- 计算BFC高度时，浮动元素也参与计算
- 如何触发BFC
<blockquote>Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.</blockquote>
浮动元素，绝对定位元素，块级容器但是不是块级盒子（例如：display的值为inline-block、table-cell、table-caption），块级元素的overflow属性的值不为visible - BFC的作用
- 清除内部浮动
.wrapper { overflow: hidden; }
- BFC布局规则
2. 自适应两栏布局
.main { overflow: hidden; } 
3. 阻止垂直外边距合并
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box1 {
width: 200px;
height: 100px;
background-color: red;
margin-bottom: 20px;
}
.wrapper {
background-color: #eee;
overflow: hidden;
}
.box2 {
width: 200px;
height: 100px;
background-color: #ccc;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="wrapper">
<div class="box2"></div>
</div>
</html>
BFC的用法都体现了规则的第5条：
<blockquote>BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此</blockquote>
因为BFC内部和外部互不影响，所以当外部元素浮动时，BFC通过自身变窄不与浮动元素重叠来消除的影响，而当内部元素浮动时，为了不影响外部元素，所以把浮动元素的高度计算在内，阻止margin合并也是为了内部元素不与外部元素互相影响
-
浮动导致的父容器高度塌陷指什么？为什么会产生？有几种解决方法
指的是当父容器下的子元素都浮动了之后，子元素脱离了当前的文档流，所以父元素的高度为0
父元素高度坍塌- 利用clearfix
.clearfix:after { content: 0; display: block; clear: both; }- 触发BFC
.wrapper { overflow: hidden; } 以下代码每一行的作用是什么？ 为什么会产生作用？ 和BFC撑开空间有什么区别？
/*在clearfix类的最后加上内容*/
.clearfix:after{
/*所要加上的内容是空的*/
content: '';
/*显示为块级元素*/
display: block;
/*清除两边的浮动，clear属性是作用在浮动元素的后续元素和块级元素上*/
clear: both;
}
.clearfix{
/* *是property hack，表示只有IE7及以下的版本可以识别，zoom相当于触发IE的BFC*/
*zoom: 1;
}
