1、在什么场景下会出现外边距合并?如何合并?如何不让相邻元素外边距合并?给个父子外边距合并的范例
①相邻的兄弟元素的外边距margin会有合并现象会塌陷collapse,但是浮动的元素不会边距合并。
②父元素和它的第一个/最后一个子元素——如块级元素有margin-top与它的子元素margin-top之间没有padding、border等任何东西的分割,那么父元素和子元素就会有边距合并的结果。
③块级元素——如果块级元素之间margin-top和margin-bottom没有任何东西分割,那么会有上下边距合并的情况。
·不让相邻元素边距合并
一、可以为父元素创建BFC,为父元素写padding或者border
二、兄弟元素可以写float,position:absolute,display:inline-block。
2、去除inline-block内缝隙有哪几种常见方法?
①直接在HTML代码界面把例如li之间的符号链接起来,除去代码中的空白。
②给父元素写font-size:0px;
③使用负的margin强行拉位置,一般写-4px;
④省略结束标签
3、父容器使用overflow: auto| hidden撑开高度的原理是什么?
为父元素创建了BFC,相当于独立的小宇宙来囊括下面脱离文档流的子元素。
4、BFC是什么?如何形成BFC,有什么作用?
一、BFC(block formatting context)
二、给父元素写一下任何一个代码display:inlne-block;/ overflow:auto;/ overflow:hidden;
或者是.className:after{
display:block;
content:"";
clear:both;
}
className指的父元素的CSS名字,后面加:after写伪类。
三、作用是影响页面布局
5、浮动导致的父容器高度塌陷指什么?为什么会产生?有几种解决方法
浮动会让子元素脱离文档流,父元素不认可子元素的存在,自然不会撑开。
解决方法问题4的回答二已经做了解释。就是形成BFC来解决。
6、以下代码每一行的作用是什么? 为什么会产生作用? 和BFC撑开空间有什么区别?
.clearfix:after{
content:'';
display: block;
clear: both;
}
是放在父元素位置的,after是伪类选择器,原理是在父元素最后面加了一个空的内容,并且有clear:both让父元素内的脱离文档流的浮动元素又被父元素认可存在,来撑开父元素
.clearfix{
*zoom:1;
}
这是给IE6、7、8看的,因为IE老版本不识别上面的clearfix:after里面的代码,所以用zoom:1可以实现类似的效果
这里的方法不是直接的BFC撑开,是用了一个父元素里面多个子元素的时候,末尾的子元素写clear:both可以让前面的子元素被父元素识别的原理。