2016/5/31
1.在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例
-
相邻的兄弟元素外边距合并，两个元素都在正常的文档流里面，父亲没有边框或者padding,那它们之间就会产生外边距合并。合并的结果就是二者的最大值
0_1464364301975_upload-495d4d0b-cd27-46af-9c85-24b7d8960d04 -
父子元素外边距合并，合并的结果就是二者的最大值
0_1464415667240_upload-9727c866-f71c-418d-8c35-f9d7ea28a8fc - 总之，两个元素外边距之间没有存在边界线，没有任何阻挡就会出现外边距合并，（float和display:inlie-block比较特殊）甚至是它自身如果没有阻挡也会出现外边距的合并，边界线指的是border,padding,或者BFC
-
父子外边距合并的例子：
0_1464416682232_upload-0f8ae183-9f97-4cb2-afc1-751d6b7e0962 -
1.给父级元素加border消除：
0_1464416433085_upload-c2189e1b-d534-473e-9b07-da790f0c59c1 -
给父级元素加padding消除:
0_1464416585208_upload-aa934ab6-ae67-454e-a66b-3c803f1b8596
-
-
加float属性
0_1464422235641_upload-114ecba7-ea18-486f-b8f4-c50b535d100d
-
-
加display:inline-block;
0_1464422494931_upload-5c41f8cb-cbab-43fd-8673-fe22746393e4
-
-
5.形成BFC:
0_1464423240691_upload-51a5e5fd-56f9-493c-8288-e07062bb9299
2.去除inline-block内缝隙有哪几种常见方法?
-
直接去掉空白
0_1464174383186_upload-99571ce2-a5fa-4a1d-b636-c8348ec8d863
0_1464174517066_upload-62d77de7-b92f-4f70-af58-b8f179dd2f5b
-
-
2.加负margin值，一般为-4px，此方法会发生偏移，以及其他问题，一般不建议适用。
0_1464174755015_upload-83c5b5c9-340c-47ad-ab73-8a5495d28987 -
3.给父元素添加overflow:auto,子元素添加float属性；
0_1464173955966_upload-9f21af5f-af34-44ea-8a6d-e8021e7cbc39 -
给父元素设置font-size:0,子元素加display:inline-block
0_1464173884769_upload-b2f8299d-f1a5-4de0-b6ad-4b0b8babc1e2
-
3.父容器使用overflow: auto| hidden撑开高度的原理是什么？
父容器使用overflow: auto| hidden相当于给父容器定义为BFC,而BFC规定当这个父容器有子元素脱离文档流时，它会强制父元素将子元素包围起来，于是将高度撑开了。
4.BFC是什么？如何形成BFC，有什么作用?
-
父元素撑开，形成空间，形成独立的渲染效果。相当于形成一个盒子，盒子里面的元素不受盒子外面元素的影响，只受到盒子里面元素的影响。
0_1464325985971_upload-4695ab16-3599-4570-89c7-b7340c667b2b -
形成BFC的方法：
1.给父级加display:inline-block;
0_1464326214729_upload-f4575fb9-7cbd-4594-ab6e-84d902c968f5
2.给父级加overflow:auto;或者overflow:hidden;
0_1464326395960_upload-4d4421d4-2d3b-4d64-8ccb-31d939183c63
3.给父级加float:left;
0_1464326470445_upload-f2bfaac2-9338-4da4-a537-5b3ca81856cc
5.浮动导致的父容器高度塌陷指什么？为什么会产生？有几种解决方法
- 父容器无法支撑浮动元素，导致无法包裹浮动元素
- 解决方法：
- 1.给父级添加zoom:1
-
2。在父级下面加个空的相邻的子div,再clear:both清浮动
0_1464333044435_upload-483cfaeb-e100-435a-9741-2aa5b1ed538e -
用伪元素，然后清浮动（改善语义化）
0_1464334041451_upload-ba1ec581-d655-460f-9575-138fcc966eb0
-
- 4.形成BFC,清浮动，通过给父级元素加overflow:auto(hidden);display:inline-block;float:left;
6.以下代码每一行的作用是什么？ 为什么会产生作用？ 和BFC撑开空间有什么区别？
.clearfix:after{//声明一个伪类
content: ''; //添加空白元素
display: block;//将其设置为块级元素
clear: both;//清除两侧浮动
}
.clearfix{
*zoom: 1;//是为了兼容IE,csshack
}
