1.在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例
在文档流中，有两个块级元素相邻（可以是兄弟元素，也可以是父子元素）且没有边界线（padding或者border），他们的外边距就会出现外边距合并.边距合并同为正或负边距时,将去最大值的绝对值作为边距.一正一负是则相加的绝对值为边距数值.
如果不想让两个元素合并边距,只需让任何一个元素处于BFC的状态.
代码
2.去除inline-block内缝隙有哪几种常见方法?
间隙是由dome中的空格或者换行所形成了,因此要消灭这个空格字符.
解决方案:
- 将父元素设置为
font-size:0px; - 设置
margin-left:-1px;这样可以抵消空格产生的边距 - 父元素设置CSS:
word-spaceing;font-size:0px;
子元素需重新设置:word-spaceing;font-size:0px;
3.父容器使用overflow: auto| hidden撑开高度的原理是什么？
因为height: auto;的计算结果不是一定为0的。父元素中有浮动的子元素,当父元素形成BFC时,会重新计算高度并包裹住全部子元素,依照规则会将浮动的子元素计算进来,所以产生了可以包裹浮动子元素的样子.既撑开的父元素高度.
对overflow与zoom”清除浮动”的一些认识
4.BFC是什么？如何形成BFC，有什么作用?
BFC(block formatting contexts)既块级排版上下文,浮动元素、绝对定位元素，不是块级盒的块级包含块(比如inline-block、table-cell、table-capation)和overflow值不为visible的块级盒子为它们的内容建立了一个新的块级排版上下文。
- BFC布局规则：
内部的Box会在垂直方向，一个接一个地放置。Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠每个元素margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。BFC的区域不会与float box重叠。BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。计算BFC的高度时，浮动元素也参与计算.
根元素 - BFC的触发方法
根元素
float属性不为none
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible
作用:
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
可以用于制作两栏布局,清楚外边距折叠,清除内部浮动几个方面.
传送门
5.浮动导致的父容器高度塌陷指什么？为什么会产生？有几种解决方法
浮动元素脱离文档流,在浏览器渲染时计算父元素的宽高时候,将会忽略浮动元素,因此会产生塌陷.
解决方法:
- 对父元素清除浮动
- 为父元素触发BFC
传送门
6.以下代码每一行的作用是什么？ 为什么会产生作用？ 和BFC撑开空间有什么区别？
代码
.clearfix:after在一个clearfix的类上添加伪类,目的是让这个类的后面添加新的内容content:""添加的内容为空display:block上一步添加的为行内元素,本命令使它触发为块级元素,具有宽高clear:both清除这个新添加的空的块级元素两侧的浮动,使它下浮到浮动元素的下方.zoom:1使IE6 7浏览器兼容以上的命令行.本段命令会清除父元素的浮动,会显示的撑开父元素的高度.
原理是使用
clear:both这个css中自带的清除浮动命令,通过在浮动元素的父元素中添加一个块级元素,并且定位到浮动元素之后,以此来撑开父元素的高度,强制计算了浮动元素的高度.
