1.在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例。
- 当block元素按照正常文档流从上至下排列时，位于上方的block元素的下外边距会与其相邻下方的元素的上外边距产生合并，如例中的.div1,.div2,.div3元素。或者block中的子元素亦为block元素且父元素无边框时，会出现子元素的上外边距与父元素的上外边距合并，如例中的.child元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style type="text/css">
body {
background-color: #bbb;
}
body>div {
background-color:#fff;
width: 100px;
height: 50px;
margin:20px;
}
.child {
background-color: #f00;
width: 50px;
height: 25px;
margin: 10px;
}
</style>
</head>
<body>
<div class="div1">A</div>
<div class="div2">B</div>
<div class="div3">
<div class="child">1</div>
C
</div>
</body>
</html>```
外边距合并效果
如上图所示，A和B上下两个block元素的外边距产生合并，保留较大的外边距尺寸。C的子元素1与C的外边距产生合并，同样保留较大的那个外边距尺寸。
- 将各元素凡在不同的BFC中，便可解决边距合并的问题。
- 举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style type="text/css">
body {
border:1px solid;
}
body>div {
width:200px;
height:100px;
margin:30px;
background-color:#aaa;
}
.child {
width:100px;
height:50px;
background-color:#f00;
margin:20px;
}
</style>
</head>
<body>
<div class="div1">
</div>
<div class="div2">
<div class="child"></div>
</div>
</body>
</html>```
效果如图：
###2.去除inline-block内缝隙有哪几种常见方法？
- 某些情况下可以用浮动代替inline-block；
- 给父元素添加样式``` font-size:0;```；
- 为除第一个之外的inline-block元素添加右负边距；
- 将inline-block的html文件之间的空格（换行）删除。
###3.父容器使用overflow: auto| hidden撑开高度的原理是什么？
在父容器上建立bfc，使其不受外界浮动元素的影响。
###4.BFC是什么？如何形成BFC，有什么作用？
- BFC的全称是块级格式上下文，即将其子元素与其他元素分隔开，使子元素的浮动等格式不对其他元素产生影响或避免其它元素对其子元素产生影响。
- 若需使一个以ct为类名的和元素形成BFC，可通过如下几种方式
1. ```.ct { display: inline-block; }```
- ```.ct { overflow: auto; }```
- ```.ct { overflow: hidden; }```
- ``` .ct:after { content: '' ; display: block ; clear: both ; }```
其主要作用是将因子元素浮动而产生塌陷的父元素撑开。
###5.浮动导致的父容器高度塌陷指什么？为什么会产生？有几种解决方法
- 由于子元素的浮动从而脱离了正常文档流，子元素所占空间的高度为0，所以会导致父元素的高度因子元素而变为0.
- 解决方法
1. 给父元素添加```.ct { display: inline-block; }```、```.ct { overflow: auto; }```或```.ct { overflow: hidden; }```样式，使父容器形成BFC空间。
- 在父元素内所有子元素最后添加一个空的块级元素，并为其天机算``` clear : both ```属性，也可通过在CSS中添加伪元素达到同样的效果。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>task11</title>
<style type="text/css">
body>div {
border: 2px solid #f00;
margin:10px;
}
.child {
float:left;
width:100px;
height:60px;
border: 1px solid;
background-color:rgba(200,200,200,.5);
}
.ct1 {
display: inline-block;
}
.ct2 {
overflow: auto;
}
.ct3 {
overflow: hidden;
}
.ct4:after {
content:'';
display:block;
clear:both;
}
</style>
</head>
<body>
<div class="ct1">
<div class="child">1</div>
</div>
<div class="ct2">
<div class="child">2</div>
</div>
<div class="ct3">
<div class="child">3</div>
</div>
<div class="ct4">
<div class="child">4</div>
</div>
<div class="ct5">
<div class="child">5</div>
</div>
</body>
</html>```
父元素塌陷问题解决方法
6.以下代码每一行的作用是什么？ 为什么会产生作用？ 和BFC撑开空间有什么区别？
.clearfix:after{ /在.clear元素的最后添加一个伪元素/
content: ''; /该子元素的内容为空/
display: block; /将该元素设定为块级元素/
clear: both; /清除左右浮动/
}
.clearfix{
zoom: 1; /兼容早期IE的hasLayout，清除浮动*/
}```
上述方法相当于在父元素内添加一个子元素，且将该子元素清除左右浮动，达到撑开父元素的目的。
BFC方法是使父元素能够包含浮动的子元素，而上述方法只是在父元素中添加了一个子元素用于清除浮动。
此教程版权归本人及饥人谷所有，转载需注明来源。
网友评论