- 在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距（块元素的top与bottom外边距会合并为单个外边距），合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。三种基本场景
- 毗邻兄弟元素的外边距会合并
<style>
*{
margin: 0;
background: #ccc;
}
.p1{
border: 1px solid red;
margin: 30px;
}
.p2{
border: 1px solid blue;
margin: 40px;
}
</style>
</head>
<body>
<p class="p1">下边距被合并</p>
<p class="p2">上边距被合并</p>
</body>```
- 父元素与第一个子元素或最后一个子元素可能会合并：
<style>
*{
margin: 0;
background: #ccc;
}
.p1{
border: 1px solid red;
margin: 30px;
}
.p2{
border: 1px solid blue;
margin: 40px;
}
.ct{
margin: 20px;
background: green;
}
</style>
</head>
<body>
<div class="ct">
<p class="p1">下边距被合并</p>
<p class="p2">上边距被合并</p>
</div>```
父元素的外边距为20px
第一个子元素的外边距30px
最后一个子元素外边距40px
- 空块元素的
margin-top和margin-bottom可能会合并。 - 取消合并：
加入border、padding、inline content、height、min-height等或者创建新的BFC（给一个块级元素 设置float:left，overflow:auto/hidden或position:absolute样式）空间来分隔来取消合并。
对于父子元素，添加.ct{ overflow: auto}取消合并
取消合并效果
- 去除
inline-block内缝隙有哪几种常见方法?
元素间有缝隙是因为标签之间存在空格，去掉空格，缝隙自然就会消失。
<style>
ol li{
display: inline-block;
background-color: red;
}
</style>
</head>
<body>
<ol>
<li>首页</li>
<li>关于</li>
<li>练习</li>
<li>加入</li>
</ol>
</body>```
去除缝隙的方法：
- html结构法：
```
<ol>
首页<li></li>
关于<li></li>
练习<li></li>
加入<li></li>
</ol>```
或者
<ol>
<li>首页</li
><li>关于</li
><li>练习</li>
<li>加入</li>
</ol>```
前两个缝隙没了
利用注释，效果图同上
<ol>
<li>首页</li><!--
--><li>关于</li><!--
--><li>练习</li>
<li>加入</li>
</ol>```
* CSS法：把`inline-block`元素的父元素的`font-size`设为0
<style>
ol{
font-size: 0;
}
ol li{
display: inline-block;
background-color: red;
font-size: 16px;
}
</style>```
没有缝隙
- CSS之
letter-spacing法也可以去掉缝隙
<style>
ol{
letter-spacing: -8px;
}
ol li{
display: inline-block;
background-color: red;
letter-spacing: 0;
}
</style>```
[参考文章](http://www.zhangxinxu.com/wordpress/2012/04/inline-block-space-remove-%E5%8E%BB%E9%99%A4%E9%97%B4%E8%B7%9D/)
3. 父容器使用`overflow: auto| hidden`撑开高度的原理是什么？
使用`overflow: auto| hidden`触动父容器BFC特性，来包裹浮动流，也就是说包含块会把浮动元素的高度也计算在内，所以不用清除浮动来撑起高度。
4. `BFC`是什么？如何形成`BFC`，有什么作用?[参考文章](http://web.jobbole.com/83274/)
BFC全称是Block Formatting Context，即块格式化上下文，是一个独立的布局环境。BFC中的元素的布局是不受外界的影响，并且在一个BFC中，块盒与行盒都会沿着其父元素的边框垂直排列。
* BFC的生成：
- float的值不为none（left/right）；
- overflow的值不为visible（为auto/hidden）；
- display的值为inline-block、table-cell、table-caption；
- position的值为absolute或fixed。
* 作用：
1. **BFC 会阻止外边距折叠**
<style>
.p1{
width: 100px;
height: 50px;
background: #ff0;
margin: 30px;
}
.p2{
width: 100px;
height: 50px;
margin: 30px;
background: #ff0;
}
.p3{
width: 100px;
height: 50px;
margin: 30px;
background: #ff0;
}
.ct3{
overflow: hidden;
}
</style>
</head>
<body>
<div class="ct1">
<p class="p1">我的边距合并</p>
</div>
<div class="ct2">
<p class="p2">我的边距合并</p>
</div>
<div class="ct3">
<p class="p3">我的边距不合并</p>
</div>
</body>```
第三个与第二个边框没有折叠
2. BFC 可以包含浮动的元素
<style>
p{
width: 100px;
height: 100px;
background: #ff0;
margin: 30px;
float: left;
}
.ct1{
border: 1px solid red;
}
.ct2{
border: 1px solid blue;
overflow: auto;
}
</style>
</head>
<body>
<div class="ct1">
<p>我塌陷</p>
</div>
<div class="ct2">
<p>我没塌陷</p>
</div>
</body>```
3. **BFC 可以阻止元素被浮动元素覆盖**
<style>
.box1{
width: 100px;
height: 100px;
background: #ff0;
}
.box2{
width: 200px;
height: 100px;
background: green;
float: left;
}
.ct1{
width: 300px;
background: #ccc;
margin: 30px;
overflow: hidden;
}
.ct2{
width: 300px;
background: #ccc;
margin: 30px;
}
</style>
</head>
<body>
<div class="ct1">
<div class="box1"></div>
<div class="box2"></div>
</div>
<div class="ct2">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>```
参考文章
- 浮动导致的父容器高度塌陷指什么？为什么会产生？有几种解决方法
当没有给父容器指定高度或者设为auto时，如果它的子元素浮动，那么它就会出现高度塌陷，这是因为元素浮动后就脱离了文档流，父容器计算高度时会忽略浮动子元素的高度。
- 解决办法3种：
- 直接给父元素设置高度。
- 在父元素中添加一个无语义的标签，清除浮动,例如
<div class="clear"></div>、.clear: both; - 给父元素创建一个BFC空间，例如添加属性
overflow: hidden;，或者让父元素也浮动。
- 以下代码每一行的作用是什么？ 为什么会产生作用？ 和
BFC撑开空间有什么区别？
.clearfix:after{ /*在class="clearfix"后添加一个伪元素*/
content: ''; /*不添加内容*/
display: block; /*设置为块级元素*/
clear: both; /*清除左右两边的浮动*/
}
.clearfix{
*zoom: 1; /*在IE5.5,IE6,IE7下用于清除浮动*/
}```
`*zoom: 1`实现了对IE5.5,IE6,IE7浏览器的兼容，原理是在IE5.5,IE6,IE7下为元素应用zoom:1的时候可以激活haslayout属性,（IE5.5,IE6,IE7 accepts css properties with an * at the start.），闭合浮动，避免父容器不会被撑开。
##代码
[BFC](https://github.com/jirengu-inc/jrg-renwu6/blob/master/homework/%E9%83%AD%E5%BF%97%E6%98%8E/%E4%BB%BB%E5%8A%A111/BFC.html)/ [预览](http://book.jirengu.com/jirengu-inc/jrg-renwu6/homework/%E9%83%AD%E5%BF%97%E6%98%8E/%E4%BB%BB%E5%8A%A111/BFC.html)
[导航条](https://github.com/jirengu-inc/jrg-renwu6/blob/master/homework/%E9%83%AD%E5%BF%97%E6%98%8E/%E4%BB%BB%E5%8A%A111/%E5%AF%BC%E8%88%AA%E6%9D%A12.html) /[预览](http://book.jirengu.com/jirengu-inc/jrg-renwu6/homework/%E9%83%AD%E5%BF%97%E6%98%8E/%E4%BB%BB%E5%8A%A111/%E5%AF%BC%E8%88%AA%E6%9D%A12.html)
网友评论