1、在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例
- 当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。
- 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
父子外边距合并范例
Paste_Image.png
Paste_Image.png
父子之间会产生边距合并，通过父元素增加border或padding值大于0，来解决边距合并问题。
Paste_Image.png
浮动元素之间不产生外边距
Paste_Image.png
inline-block 可以解决合并问题
Paste_Image.png
2、去除inline-block内缝隙有哪几种常见方法?
缝隙演示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>inline-block缝隙</title>
<style>
html,body,ul,li{
margin:0;
padding:0;
}
.box {
border:1px solid green;
}
.box > li{
list-style:none;
display:inline-block;
background:blue;
font-size:16px;
color:white;
}
</style>
</head>
<body>
<ul class="box">
<li>tag1</li>
<li>tag2</li>
<li>tag3</li>
</ul>
</body>
</html>
Paste_Image.png
- 以删除html中多余的空格来去除缝隙
Paste_Image.png
Paste_Image.png
- 或者用负外边距实现去除效果，注意第一个元素会溢出元素框，需要单独设置
Paste_Image.png
- 可以用浮动属性来去除缝隙，不过要记得用BFC将父元素撑开
Paste_Image.png
- 在父元素写上font-size：0；消除空格占位符的大小以去除缝隙
Paste_Image.png
3、父容器使用overflow: auto| hidden撑开高度的原理是什么？
overflow会产生BFC，创造独立布局环境，使元素不受浮动元素的影响。
所以针对撑开父元素的情况，是由于父元素创建了BFC，使父元素形成独立环境，从而浮动元素被包含在内，自然撑开。
4、BFC是什么？如何形成BFC，有什么作用?
-
浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。
在BFC中，盒子从顶端开始垂直地一个接一个地排列，两个盒子之间的垂直的间隙是由他们的margin 值所决定的。在一个BFC中，两个相邻的块级盒子的垂直外边距会产生折叠。
首先BFC是一个名词，是一个独立的布局环境，我们可以理解为一个箱子（实际上是看不见摸不着的），箱子里面物品的摆放是不受外界的影响的。转换为BFC的理解则是：BFC中的元素的布局是不受外界的影响（我们往往利用这个特性来消除浮动元素对其非浮动的兄弟元素和其子元素带来的影响。） -
形成BFC
-
用float属性（none值除外）；
-
用绝对定位absolute；
-
overflow（visible值除外）；
-
display属性为table-cell, table-caption, inline-block, flex, 或者inline-flex
Paste_Image.png
- 作用
- 撑开父元素
- 阻止外边距合并
- 清除浮动的文字环绕影响或位置影响
- BFC用法灵活，可以很方便的解决很多布局问题，但是情况很多，需要具体问题具体分析。
5、浮动导致的父容器高度塌陷指什么？为什么会产生？有几种解决方法
高度塌陷是指，在父元素的height为0时，对其内部元素应用浮动属性，浮动属性使元素脱离文档流，而父元素没有元素可以支撑，从而高度塌陷，变为0。
- 解决方法
- 利用空元素清除浮动
Paste_Image.png
- 在CSS中创建空元素
Paste_Image.png
- 使用BFC，使父元素按照BFC渲染，包含住浮动元素
Paste_Image.png
6、以下代码每一行的作用是什么？ 为什么会产生作用？ 和BFC撑开空间有什么区别？
.clearfix:after{
content: '';
display: block;
clear: both;
}
.clearfix{
*zoom: 1;
}
-
作用
-
可以将父元素高度撑开，避免子元素浮动之后，父元素高度塌陷。
-
zoom这个属性是IE专有属性，其他浏览器没有，它可以设置或检索对象的缩放比，它还有其他一些小作用，比如触发ie的hasLayout属性，清除浮动、清除margin的重叠等。现在已经基本不用这个属性，所以仅在考虑兼容的清除浮动会用到。
** 本教程版权归作者和饥人谷所有，转载须说明来源！ **
网友评论