css面试题随笔
之前在前端群有个汉纸聊到他面试别人时问到：margin塌陷和margin合并问题如何解决？
然后我自己也懵逼了哈哈，因为只是遇到过并不知道这叫塌陷、合并哈哈哈················那我们一起来看看怎么回事吧，加上要怎么解决哦
塌陷问题：
在标准文档流中，竖直方向（记住是竖直方向，左右方向的不会出现塌陷现象）的margin会出现叠加现象，即较大的margin会覆盖掉较小的margin，竖直方向的两个盒子中间只有一个较大的margin，这就是margin的塌陷现象
HTML代码
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>margin塌陷(父子)title>
<style>
* {
margin: 0;
padding: 0;
}
.father {
width: 200px;
height: 200px;
background-color: red;
margin-top: 100px;
}
.son {
width: 50px;
height: 50px;
background-color: #eee;
opacity: 0.8;
margin-top: 150px;
}
style>
head>
<body>
<div class="father">
<div class="son">div>
div>
body>
html>
虽然给类名为：son 的元素给了 margin-top: 150px; 但是子元素并没有相对于父元素 margin-top: 150px; ，而是和父元素一起下移了。（即父级盒子往下塌陷了50px）。
原理:父子嵌套元素在垂直方向的margin,父子元素是结合在一起的,他们两个的margi会取其中最大的值.正常情况下,父级元素应该相对浏览器进行定位,子级相对父级定位.但由于margin的塌陷,父级相对浏览器定位.而子级没有相对父级定位,子级相对父级,就像坍塌了一样。
解决方案：
/* 解决方案 */ /* 给父级设置边框或内边距(不建议使用) */ /* .father { border: 1px solid #000000; } */ /* 触发bfc(块级格式上下文),改变父级的渲染规则 */ /* 改变父级的渲染规则有以下四种方法,给父级盒子添加 (1)position:absolute/fixed (2)display:inline-block; (3)float:left/right (4)overflow:hidden 这四种方法都能触发bfc,但是使用的时候都会带来不同的麻烦,具体使用中还需根据具体情况选择没有影响的来解决margin塌陷 */
合并问题：
块级元素的上外边距与下外边距有时会合并为单个外边距。
margin合并计算规则为正正取大值，正负值相加，负负最负值。
HTML代码
margin塌陷
上面的有：margin-bottom: 60px; 下面的有：margin-top: 70px; 按理来说那它俩之间的距离应该是130px，然而事实并非如此，它俩之间的距离是70px。
其实这个margin合并的bug你没有必要去解决，比如你现在有两个元素，你想让他俩上下130px，没有必要60px+70px吧，你只需要上面的margin-bottom为130px，就可以了！！和margin塌陷不同，margin塌陷是视觉上的效果，你加个css就能弥补。
解决方案：
/* 解决方案： */ /* 给box1或box2加上一层父级元素并加上overflow:hidden; */ /* .box2{ float: left; } */ /* .box2 { position: absolute; } */ /* .box1 { display: inline-block; } */ /* .box2 { display: inline-block; } */
HTML改为：
<body> <div style="overflow: hidden;"> <div class="box2">div> div> body>