外边距的合并
首先要明白，外边界的合并出现在垂直方向上，由于默认的普通流中，块级元素从上到下排列，通过margin来控制元素之前的相互距离。但是有这个普通流中对于垂直上的边距有以下几个特征。
- 父子外边距。一个元素包含一个元素后。
-
我们给子元素设置一个边距的话，它会默认的添加到父元素上面。
0_1481550574971_1.png
-
父元素和子元素都有垂直方向的margin，取2个绝对值的最大值合并外边界。
0_1481551692021_2.png
- 兄弟元素的外边距合并
-
在同一个容器内包裹的2个元素之前会出现垂直方向上，一个元素的下边界和一个元素的上边界会发生合并。
0_1481552597275_3.png
- 也可以通过浮动元素来解决问题。
- 空元素外边距合并
- 空元素的上下边距也会合并，取上下边距的最大值合并。
如果我们想不让兄弟元素的外边距合并
我们可以让之中一个元素形成自己的空间即BFC
0_1481553040971_4.png
在这个基础上我试了下
margin-top: 20px，由于形成了独立的BFC，所以父子外边距合并的问题也可以解决了。进一步想，如果我不给container添加形成BFC的样式，那个外边距合并的问题还是不会消除。也可以给2个元素都添加包含容器，分别形成BFC,来消除外边距合并的问题。
父子元素的消除外边距合并
- 可以给父元素添加一个
border - 给父元素添加一个
padding - 给子元素一个容器形成一个独立的BFC
特别主要在子元素上面添加形成BFC，是没有作用的，只会相对于子元素的子元素形成了一个独立的空间 - 让父元素形成一个独立的BFC
查看demo
去除inline-block缝隙的常用做法
案例分析，我们想用inline-block让ul中的li水平排列。实现了需求，发现没有设置margin,但是中间出现了一些间隙
0_1481554340550_5.png
理解这个间隙的由来，行内元素对于文字中出现多个空格会默认的变成一个空格，由于inline-block的有行内元素的特性，所以默认的每一个元素之间出现了空格，但是你又会想，在IE情况下，为什么没有空格，其实是IE的bug，它有一个haslayout。消除间隙的一些方法。
- 给一个父元素添加一个
font-size：0,然后给子元素添加字号大小font-size：16px - 改变标签的样式，让相互结束的时候不出现空格
<li>首页</li><li>博客</li><li>学习</li>
<li>首页</li
><li>博客</li
><li>学习</li>
- 通过负边距来实现,给元素添加一个
margin-left: -4px,然后给第一个子元素消除负边距。
父容器使用overflow: auto| hidden撑开高度的原理
案例分析当一个元素内部的子元素出现浮动的时候，由于浮动元素脱离了普通文本流，所以父元素感觉不到元素的高度，所以就出现了传说中高度塌陷。
0_1481556118543_6.png
神奇的事情发生了，我们不清除浮动，通过overflow: auto| hidden就可以撑开高度了。如果你不理解BFC这个，可能不知道这个原理，让给父元素添加了overflow: auto| hidden的时候，父元素形成了一个BFC，由于BFC的特性之一，可以感知浮动元素的高度，所以撑开了高度。
BFC的理解
- BFC是什么。BFC（块级元素格式上下文）形成了一个独立的空间，空间内部和外部没有影响。我们可以理解为一个箱子（实际上是看不见摸不着的），箱子里面物品的摆放是不受外界的影响的。
- 形成BFC的条件
-
overflow不为visible。常用的auto``hidden - 浮动元素和绝对定位元素
- 非块级盒子的块级容器。
display:inline-blockdisplay:table-cellsdisplay:table-captions
- BFC作用
- 可以让父元素看到内部浮动的子元素
- 可以运用于清楚外边距合并的问题。
- 可以清楚浮动元素对文字的影响，由于默认情况下，文字会围绕在浮动元素旁边，但是形成了BFC，就不受外面的元素影响。
浮动导致的父容器高度塌陷
原因当一个元素内部的子元素出现浮动的时候，由于浮动元素脱离了普通文本流，所以父元素感觉不到元素的高度，所以就出现了传说中高度塌陷。
解决方法
- 清除内部浮动(注意兼容性)
.parent:after{
display: block;
clear: both;
content:"";
}
0_1481557266890_7.png
- 父元素形成BFC，能够感知到浮动元素的高度。(注意bug)
.parent{
border: 2px solid;
overflow: hidden;
}
清楚浮动的代码作用
.clearfix:after{
content: '';
display: block;
clear: both;
}
.clearfix{
*zoom: 1;
}
我们来一个个解析
给class=clearfix的元素添加一个after伪类，重要的是伪类里面的这三行代码
-
content: ""content属性为空，相对于为元素添加了一个空内容的行内元素。 -
display: block让这个行内元素变成块级元素占据一行。 -
clear: both;清楚这个块级元素左右2边的浮动
.clearfix{
*zoom: 1;
}
用来触发IE浏览器的haslayout 解决ie下的浮动，撑开元素
又要想为什么不是:before呢？这样做了为什么可以呢？
我们给元素添加这个伪类，就是在元素最后面添加了一个块级元素，并且这个块级元素没有内容，清除了浮动，摆在了浮动元素的最后面，让元素显示出包裹了浮动元素的效果。
和BFC的区别
我们这样通过伪类清楚浮动元素，并不是父元素感觉到了子元素中的浮动元素，而是在后面添加了一个块级元素。而元素形成BFC，是因为元素感觉到了子元素中浮动元素的宽度，而不是通过添加元素撑开父元素。
代码题
代码一地址
老师这个我做了一个响应式的，900px的时候会改变，麻烦老师看看需要修改的
网友评论