1.在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例
答：两个在文档流中的块级元素，他们会从顶端一个接着一个的排列，他们的垂直缝隙发生碰撞,第一列的margin-bottom会与第二列的margin-top发生合并。
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
html,body{
margin:0;
padding:0;
}
.ct{
border:1px solid
}
.box1{
width:50px;
height:50px;
background:#f00;
margin:20px;
}
.box2{
width:50px;
height:50px;
background:#0f0;
margin:20px
}
</style>
</head>
<body>
<div class="ct">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
</html>
搜狗截图16年07月27日1656_1.png
由此可以看出他们两个盒子之间的边距发生了合并，与四周边距都一样为20px。
两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
两个外边距一正一负时，折叠结果是两者的相加的和。
为了不让这两个相邻同级元素的边距发生合并我们可以：
- 使这两个元素浮动，或者他们加上
<inline-block>使他们成为行内块级元素，这样他们就不会发生边距合并。
.box1{
width:50px;
height:50px;
background:#f00;
margin:20px;
display:inline-block;
}
.box2{
width:50px;
height:50px;
background:#0f0;
margin:20px;
display:inline-block;
}
搜狗截图16年07月27日1813_4.png
- 给子元素包裹一个div，使用
<overflow:hidden>可以让这两个元素边距不发生合并。 - 使用绝对定位，绝对定位的元素不会与任何元素发生边距合并。
2:当子元素在父元素中，且父元素没有边框或者内填充时，子元素会与父元素的边距发生合并例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
html,body{
margin:0;
padding:0;
}
.ct{
background:#0f0;
margin:10px;
}
.box1{
width:50px;
height:50px;
background:#f00;
margin:20px;
}
</style>
</head>
<body>
<div class="ct">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
</html>
搜狗截图16年07月27日1711_2.png
可以看出他们父子边距发生了合并,切以子元素的边距为基准。
为了不让他们合并我们可以：
- 给父元素加上宽度不为0边框，那么他们就会回到自己各自的边距上。
搜狗截图16年07月27日1815_5.png
- 给父元素加上一个宽度不为0的填充，也可以防止他们合并。
3.如果一个元素是空元素，内容没有宽高，没有边框和内边距，它有外边距，在这种情况下这个元素的上下外边距就碰到了一起，它们会发生重叠。
- 给空元素加边框，或者padding，他就不会有自身边距合并。
- 给自身加一个
overflow：hidden也可以防止合并
例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
html,body{
margin:0;
padding:0;
}
.ct{
border:1px solid #ff0;
margin:10px;
}
</style>
</head>
<body>
<div class="ct">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
</html>
搜狗截图16年07月27日1714_3.png
2#####.去除inline-block内缝隙有哪几种常见方法?
答：
- 去掉换的行 例：
<ul>
<li>1</li><li>2</li><li>3</li>
</ul>
这样会看起来非常乱，而且如果表单很长肯定是不适用了。
- 使用怪异的方法 例：
<li></li
><li></li
><li></li>
- 利用负margin来缩进，一般为-4px，但是对于第一个元素有影响。
- 利用
position:relative在left里设为负值。 - 使用浮动float：left 父元素需要用overflow：auto或者hidden撑开。
- 给他的父元素font-size设为0，需要在自己在
inline-block设置一下字体大小。
3.父容器使用overflow: auto| hidden撑开高度的原理是什么？
答：当父容器内部的元素脱离文档流时，没有元素撑开父元素使得父元素高度塌陷下去，当使用overflow: auto| hidden时，就相当于给父元素建立了BFC使父容器有了高度。
4.BFC是什么？如何形成BFC，有什么作用?
答：1.BFC是一个独立的空间，不管外部的元素如何变动，BFC里的元素不受影响，主要用于消除其他元素的影响浮动等等。
2.形成bfc的条件
float的值不为”none” (如：float:left/right)
overflow的值不为”visible”(如：overflow:hidden)
display的值为 “table-cell”, “table-caption”, or “inline-block”中的任何一个
position的值不为 “static” 或 “relative”中的任何一个(如：position:absolute)
3.bfc用于清除浮动，撑开父元素，防止外边距合并，以及设计页面文字图片的布局。
5.浮动导致的父容器高度塌陷指什么？为什么会产生？有几种解决方法
答：因为父容器里的元素浮动了脱离了文档流，父元素无法感知浮动元素的高度，使父元素失去了高度，造成了父元素的塌陷。
解决方法：
1.给父元素添加display: inline-block; overflow: auto; 或 overflow: hidden;样式，使父容器形成BFC空间。
- 使用伪类选择器after 给父元素最后加上子元素并且具有clear：both属性，也可以清除浮动。
.clearfix:after{
content:'';
display:block;
clear:both;
}
6.以下代码每一行的作用是什么？ 为什么会产生作用？ 和BFC撑开空间有什么区别？
答：
.clearfix:after{ 使用伪类选择器after在clearfix的最后一行添加一个元素
content: ''; 内容为空的行内元素
display: block; 让它成为块级元素
clear: both; 清除浮动
}
.clearfix{ *zoom: 1;} 只针对IE67的清除浮动
作用：在父元素里加上一个在文档流中且内容为空的清除浮动元素使父元素撑开。
区别：BFC撑开空间是使父元素本身形成一个独立空间来包容浮动元素，而这个方法是使用内容将父容器撑开。
本博客版权归本人和饥人谷所有，转载需说明来源
网友评论