问题
- 在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例
1 在文档流块级元素垂直外边距之间会发生合并，父子元素之间也会发生外边距合并
2 取两者之间最大的margin
http://js.jirengu.com/posutumejo/1/edit?html,css,output
3 统一使用margin-top或者是margin-bottom或者是使用浮动等bfc模式
http://js.jirengu.com/bihibubame/1/edit
4 父子外边距合并范例
http://js.jirengu.com/sitekaguje/1/edit
参考资料：http://www.w3help.org/zh-cn/kb/006/
- 去除inline-block内缝隙有哪几种常见方法?
1 去除标签之间的空格
2 font-size:0
3 标签不闭合
http://js.jirengu.com/tukelogovi/1/edit?html,css,output
- 父容器使用overflow: auto| hidden撑开高度的原理是什么？
我的理解是
overflow:hidden|auto本身是用来隐藏溢出的部分，当父元素高度固定的时候，子元素超出的部分会隐藏。当父元素高度不定的时候父元素的高度取决于子元素的高度，但是当float之后子元素跟父元素不在同一个平面，父元素里面没有东西了，高度就塌陷了。给父元素增加overflow: auto| hidden之后 为了实现隐藏这个功能父元素会去强行包裹住子元素（如果有固定高度，超出高度的子元素将会被隐藏，如果没有固定高度 父元素高度还是依据子元素的高度）
overflow: auto| hidden 主要还是父级元素隐藏子元素 为了能够实现这个特性父级元素会强行包裹子元素
总地来说还是触发了bfc
http://js.jirengu.com/dumusikaye/1/edit?html,css,output
- BFC是什么？如何形成BFC，有什么作用?
1 BFC是块级格式化上下文
2 float的值不为none。 overflow的值不为visible。 position的值不为relative和static。display的值为table-cell, table-caption, inline-block中的任何一个。
3 消除浮动的影响 创建多栏布局
- 浮动导致的父容器高度塌陷指什么？为什么会产生？有几种解决方法
1 当父元素高度没有设定的时候 父元素高度取决于子元素 子元素浮动 脱离正常的文档流 父元素高度为0 无法正确计算
2 当子元素浮动 脱离正常的文档流 float不为none的时候 position为absolute|fixed
3 position为absolute|fixed时无法解决。
分别设置float、overflow、position、display属性来触发bfc模式 至少有四种
http://js.jirengu.com/voxiqasuyo/1/edit
- 以下代码每一行的作用是什么？ 为什么会产生作用？ 和BFC撑开空间有什么区别？
.clearfix:after{
content: '';
display: block;
clear: both;
}
.clearfix{
*zoom: 1;
}
1 在包含有.clearfix类名的after伪类添加一个块级空元素并清楚它的浮动
*浏览器Hack ie7及ie7以下 识别
zoom:1 ie私有属性缩放一倍 但是可以触发ie hasLayout 触发hasLayout属性的元素会负责对自己和可能的子孙元素进行尺寸计算和定位
2 当元素设置触发BFC或hasLayout之后元素内部浮动对外部的影响被清除，所以我们可以用来清楚浮动的影响
3清除浮动的影响顾名思义 也可以理解是闭合浮动 在最后添加一个空的块级元素来撑开之前所有浮动的影响
BFC撑开高度只用于开启BFC属性的父元素以及里面的子元素，并且里面的子元素是不会受到外部布局的影响。
案例：
http://js.jirengu.com/hepajegoqa/1/edit?html,css,output
Paste_Image.png
Paste_Image.png
本教程版权归菲龍探雲和饥人谷所有，转载须说明来源
网友评论