一、 在什么场景下会出现外边距合并?如何合并?如何不让相邻元素外边距合并?给个父子外边距合并的范例
- 场景
- 如何合并
- 元素的margin-top与其第一个常规文档流的子元素的margin-top(父子)
- 元素的margin-bottom与其下一个常规文档流的兄弟元素的margin-top(兄弟)
- 高度为0并且最小高度也为0,不包含常规文档流的子元素,并且自身没有建立新的BFC的元素的margin-top和margin-bottom(自身)
- 如何不让相邻元素外边距合并
- 创建了新的BFC的元素(例如浮动元素或者'overflow'值为'visible'以外的元素)与它的子元素的外边距不会折叠
- 浮动元素不与任何元素的外边距产生折叠(包括其父元素和子元素)
- 绝对定位元素不与任何元素的外边距产生折叠
- inline-block元素不与任何元素的外边距产生折叠
- 范例
二、去除inline-block
内缝隙有哪几种常见方法?
产生缝隙的根本原因是,因为继承了行内元素的特性,所以元素之间会有一个空白符,跟普通文本符是一样的,因此要消除缝隙就是要消除这个空白文本符;
三、父容器使用overflow: auto| hidden
撑开高度的原理是什么?
- 原理是因为父容器形成了一个BFC,BFC相当于是一个闭合的大容器,是一个独立的布局环境,影响子元素,而不受外界元素的影响,在一个BFC中,块盒与行盒(行盒由一行中所有的内联元素所组成)都会垂直的沿着其父元素的边框排列。而形成一个BFC的条件之一就是
overflow: auto| hidden
,当形成BFC后就可以闭合浮动,使脱离文档流的元素,回到容器中,便将整个高度撑开了;
四、BFC是什么?如何形成BFC,有什么作用?
- W3C解释BFC:浮动元素和绝对定位元素,非块级盒子的块级容器(例如 inline-blocks, table-cells, 和 table-captions),以及overflow值不为“visiable”的块级盒子,都会为他们的内容创建新的BFC(块级格式上下文)。在BFC中,盒子从顶端开始垂直地一个接一个地排列,两个盒子之间的垂直的间隙是由他们的margin 值所决定的。在一个BFC中,两个相邻的块级盒子的垂直外边距会产生折叠。在BFC中,每一个盒子的左外边缘(margin-left)会触碰到容器的左边缘(border-left)(对于从右到左的格式来说,则触碰到右边缘)。
- 浮动元素和绝对定位元素,非块级盒子的块级容器(例如 inline-blocks, table-cells, 和 table-captions),以及overflow值不为“visiable”的块级盒子,都会为他们的内容创建新的BFC(块级格式上下文)。
- BFC的应用:
- BFC第一个应用就是在清除浮动
- BFC第二个应用就是可以使浮动后文字不绕着图片,就是将p标签生成一个BFC的空间,这样就是一个独立的,不会受旁边的img影响;(overflow:auto)
- BFC第三个应用就是使div之间的上下margin不折叠,给每个div外在包裹一个div并且让它形成BFC的空间;(overflow:auto)
五、浮动导致的父容器高度塌陷指什么?为什么会产生?有几种解决方法
- 实际上并不能说是父容器塌陷,因为原本父容器的高度就是由里面的子元素撑开的,当里面的子元素浮动后脱离了正常的文档流,父容器的高度自然就没有了,就出现了所谓的“塌陷”的情况;
- 解决方法:
六、以下代码每一行的作用是什么? 为什么会产生作用? 和BFC撑开空间有什么区别?
.clearfix:after{
content: ''; /*空字符*/
display: block; /*因原来是行内元素现需要形成块级元素*/
clear: both; /*清除浮动*/
}
.clearfix{
*zoom: 1; /*css hack兼容IE6\7*/
}```
- 区别:
1. 利用BFC是闭合浮动,并不是清除浮动,是将脱离正常文档流的纳入一个新的BFC中,这个BFC就是父容器,有了子元素后高度自然就被撑开了;
2. clearfix实际就是利用伪元素:after,相当于给父容器的最下面添加了一个display:block的伪元素,它clear:both;就可以清除父容器中子元素浮动带来的影响。这里就是传统意义的清除浮动;
**本博客版权归本人和饥人谷所有,转载需说明来源**