问题
在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例
- 外边距合并会发生在相邻元素、父子元素的外边距 margin 重叠的时候。相邻元素之间的距离，取决于这两个元素之中外边距较大的一个。
-
需要注意的是，盒模型若不设定margin、padding、border或者值为0，都相当于不存在这些属性，所以父元素内部元素的margin会透过不存在的padding、border，与父元素的margin发生了重叠，充当了父元素的margin，使得子元素的外边距不能撑起在父元素中的位置。为了不发生这种情况，给父元素设定margin或者padding即可。
父子元素边距合并
取消父子元素边距合并
去除inline-block内缝隙有哪几种常见方法?
- 将父元素的字体大小设为font-size:0;
- 去除html原文中元素直接的空格
- 可以设inline-block元素的负margin
父容器使用overflow: auto| hidden撑开高度的原理是什么？
- 使用overflow:auto | hidden，本质是将父容器转变为一个BFC。在BFC的特性使得其包裹浮动元素。
BFC是什么？如何形成BFC，有什么作用?
-
w3c规范中的BFC定义：
浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。
在BFC中，盒子从顶端开始垂直地一个接一个地排列，两个盒子之间的垂直的间隙是由他们的margin 值所决定的。在一个BFC中，两个相邻的块级盒子的垂直外边距会产生折叠。
在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘）。 -
通过给容器添加下列任意一个样式即可形成BFC
- overflow: scroll
- overflow: hidden
- display: flex
- float: left
- display: table
-
当元素分属于其他BFC时，他们之间就不会产生一些联系，例如外边距折叠，文字环绕浮动元素。这些特性可以用来形成多栏布局，清除文字环绕，也可以用来包裹浮动元素。
浮动导致的父容器高度塌陷指什么？为什么会产生？有几种解决方法
浮动高度塌陷
- 浮动元素脱离了文档流，使得父容器没有内容，无法撑起自身高度。解决方法：
- 清除浮动 stackoverflow
- 父元素形成BFC，包裹浮动元素
以下代码每一行的作用是什么？ 为什么会产生作用？ 和BFC撑开空间有什么区别？
.clearfix:after{
content: ''; //空字符
display: block;// 显示为块级元素
clear: both;//清除两侧浮动
} //用于清除浮动
.clearfix{
*zoom: 1;//用于兼容IE6、7
}
本教程版权归 张宇 和 饥人谷 所有，转载须说明来源
网友评论