inline-block、BFC、边距合并
1.在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例
外边距合并的场景大致有以下几种。
- 1.相邻的同级元素会发生外边距合并。
举例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>同级元素外边距合并</title>
<style>
.container {
width: 700px;
height: 300px;
border: 1px solid;
}
.box1 {
width: 100px;
height: 100px;
border: 1px solid red;
margin: 20px;
}
.box2 {
width: 100px;
height: 100px;
border: 1px solid red;
margin: 40px;
}
</style>
</head>
<body>
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
</html>
效果：
从图中看出虽然两个边框的外边距一个是20px，一个是40px，但它们相邻的边距并不是两者之和60px，而是两者中的最大值40px。
这种情况可以给它们分别再加一个父元素，设置父元素overflow属性。
效果：
或者其中最后一个子元素加上float。
- 2.相邻的父子元素，当父元素没有设置边框或者padding时，会发生外边距合并。
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>父子元素外边距合并</title>
<style>
.header{
background: red;
}
h1{
margin-top: 130px;
}
</style>
</head>
<body>
<div class="header">
<h1>我是段落</h1>
</div>
</body>
</html>
效果：
阻止外边距合并可以给父元素加上border或者padding或者加上内容。
加上边框
加上内边距
加上内容
- 3.一个元素没有内容、边框、padding，它本身的上下边距会合并。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自身合并</title>
<style>
div {
margin:50px;
}
</style>
</head>
<body>
<div></div>
<span>饥人谷</span>
</body>
</html>
效果：
这种也可以加上border或者padding或者加内容。
加上边框
加上内边距
加上内容
2.去除inline-block内缝隙有哪几种常见方法?
inline-block元素之间会有缝隙。
举例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>inline-block缝隙</title>
<style>
ul,li {
margin: 0;
padding: 0;
}
.content {
width: 200px;
border: 1px solid red;
}
.content>li {
display: inline-block;
background: blue;
color: #fff;
}
</style>
</head>
<body>
<ul class="content">
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ul>
</body>
</html>
此时，可以看到列表之间有空隙。
效果：
有以下几种方法可以消除间隙：
- 把
<li>标签之间的空白去掉，可以写成：
<ul class="content">
<li>列表1</li><li>列表2</li><li>列表3</li>
</ul>
或者
<ul class="content">
<li>列表1</li
><li>列表2</li
><li>列表3</li>
</ul>
效果：
2.可以用负margin把<li>标签之间的外边距变小，使两个inline-block元素之间没有空隙。
改动部分的代码：
.content>li {
display: inline-block;
background: blue;
color: #fff;
margin-left: -10px;
}
li:first-child {
margin-left: 0px;
}
效果：
3.利用float属性，浮动元素是水平方向上紧挨着的。设置了浮动，一定要清除浮动。
改动部分的代码：
.content {
width: 200px;
border: 1px solid red;
overflow: auto;
}
.content>li {
display: inline-block;
background: blue;
color: #fff;
float: left;
}
效果：
4.还可以设置父元素的字体大小为0。这种方法，元素则身的字体大小要设置。
改动部分的代码:
.content {
width: 200px;
border: 1px solid red;
font-size: 0;
}
.content>li {
display: inline-block;
background: blue;
color: #fff;
font-size: 16px;
}
效果：
3.父容器使用overflow: auto| hidden撑开高度的原理是什么？
是根据BFC的特性，父元素使用overflow: auto|hidden撑开高度。
overflow属性作用在块级元素上。它规定了当内容元素溢出元素框时发生的事：裁剪内容，使用滚动条来显示或者直接显示超出部分。
其中：
overflow: auto; 由浏览器定夺，如果内容被修剪，就会显示滚动条
overflow: hidden; 内容会被修剪，并且其余内容不可见。
overflow值不为“visiable”的块级盒子，会为他们的内容创建新的BFC（块级格式上下文）。BFC是一个名词，是一个独立的布局环境，我们可以理解为一个箱子（实际上是看不见摸不着的），箱子里面物品的摆放是不受外界的影响的，同时也不影响外界的元素。
这个特性，可以用于清除浮动，撑开块元素的空间，在浮动的元素上加一个父元素，父元素上设置overflow: auto|hidden，可以撑开高度。
举例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>overflow</title>
<style>
.box {
width: 300px;
border: 1px solid;
}
.box1 {
width: 100px;
height: 100px;
background: #f00;
}
.box2 {
width: 100px;
height: 100px;
background: #0f0;
float: left;
}
/*.container {
overflow: hidden;
}*/
.box3 {
width: 100px;
height: 100px;
background: #00f;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
<div class="container">
<div class="box2"></div>
</div>
<div class="box3"></div>
</div>
</body>
</html>
此时效果：
加上
.container {
overflow: hidden;
}
效果为：
撑开了高度。
4.BFC是什么？如何形成BFC，有什么作用?
BFC是Block Formatting Contexts的缩写，译为块级格式上下文。
浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。可以用于清除浮动和合并外边距。
5.浮动导致的父容器高度塌陷指什么？为什么会产生？有几种解决方法
指父容器高度并浮动元素脱离文档流，是常规元素忽略了它的存在，从而父元素高度塌陷。
解决方法可以使子元素形成BFC，或者用clear使元素左边或右边或两边不浮动。
6.以下代码每一行的作用是什么？ 为什么会产生作用？ 和BFC撑开空间有什么区别？
.clearfix:after{
content: '';
display: block;
clear: both;
}
.clearfix{
*zoom: 1;
}
作用：
.clearfix:after{ /*在class属性名是clearfix的元素的子元素的最后再添加一个子元素*/
content: ''; /*内容是空*/
display: block; /*设置为块级元素*/
clear: both; /*这个元素左右两边不允许有浮动元素*/
}
.clearfix{ /*设置class属性是clearfix的元素*/
*zoom: 1; /*设置缩放比例为1。这是IE专有属性。火狐和老版本的webkit核心的浏览器都不支持这个属性。*/
}
这段代码可以撑开由于浮动导致的塌陷的父元素。第一段是兼容普通浏览器，第二段兼容IE浏览器。
第一段代码利用伪类元素，相当于在父元素末尾加上一个元素，并使这个元素左右不浮动，这样这个元素就会下移，撑开父元素。*zoom:1缩放页面，重新排版，父元素会计算浮动元素的高度，被撑开。
举例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>clear</title>
<style>
.clearfix {
width: 500px;
border: 1px solid;
}
.box1 {
width: 100px;
height: 100px;
background: #f00;
}
.box2 {
width: 100px;
height: 100px;
background: #0f0;
}
.box3 {
width:100px;
height: 100px;
background: #00f;
float: right;
}
.clearfix:after{
content: '';
display: block;
clear: both;
}
.clearfix {
*zoom: 1;
}
</style>
</head>
<body>
<div class="clearfix">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>
效果：
如果不加这两段代码，则是下面的效果：
父元素没有完全包围子元素。
如果父元素最后一个元素不浮动，添加上述代码，可以清除浮动吗？
举例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>clear</title>
<style>
.clearfix {
width: 500px;
border: 1px solid;
}
.box1 {
width: 100px;
height: 100px;
background: #f00;
}
.box2 {
width: 100px;
height: 100px;
background: #0f0;
float: left;
}
.box3 {
width:100px;
height: 100px;
background: #00f;
/*float: left;*/
}
.clearfix:after{
content: '';
display: block;
clear: both;
}
.clearfix{
*zoom: 1;
}
</style>
</head>
<body>
<div class="clearfix">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>
在IE11中，效果：
发现在IE11中:after被禁用了，而且.box3元素被.box2遮住，浮动带来的影响没有被清除。
在chrome浏览器中，效果：
看出
*zoom:1并没有出现，因为 * 对非IE浏览器不起作用。同样的，.box3被.box2遮住，浮动的影响没有被清除。本来父元素应该是下图所示的样式：
所以这几行代码用于最后一个子元素浮动时，清除这个子元素浮动对父元素的影响。
本文版权归作者和饥人谷所有，转载请注明出处
