外边距的合并
首先要明白,外边界的合并出现在垂直方向上,由于默认的普通流中,块级元素从上到下排列,通过margin
来控制元素之前的相互距离。但是有这个普通流中对于垂直上的边距有以下几个特征。
- 父子外边距。一个元素包含一个元素后。
-
我们给子元素设置一个边距的话,它会默认的添加到父元素上面。
-
父元素和子元素都有垂直方向的margin,取2个绝对值的最大值合并外边界。
- 兄弟元素的外边距合并
-
在同一个容器内包裹的2个元素之前会出现垂直方向上,一个元素的下边界和一个元素的上边界会发生合并。
- 也可以通过浮动元素来解决问题。
- 空元素外边距合并
- 空元素的上下边距也会合并,取上下边距的最大值合并。
如果我们想不让兄弟元素的外边距合并
我们可以让之中一个元素形成自己的空间即BFC
在这个基础上我试了下
margin-top: 20px
,由于形成了独立的BFC,所以父子外边距合并的问题也可以解决了。进一步想,如果我不给container添加形成BFC的样式,那个外边距合并的问题还是不会消除。
也可以给2个元素都添加包含容器,分别形成BFC,来消除外边距合并的问题。
父子元素的消除外边距合并
- 可以给父元素添加一个
border
- 给父元素添加一个
padding
- 给子元素一个容器形成一个独立的BFC
特别主要在子元素上面添加形成BFC,是没有作用的,只会相对于子元素的子元素形成了一个独立的空间
- 让父元素形成一个独立的BFC
查看demo
去除inline-block缝隙的常用做法
案例分析,我们想用inline-block
让ul中的li水平排列。实现了需求,发现没有设置margin,但是中间出现了一些间隙
理解这个间隙的由来,行内元素对于文字中出现多个空格会默认的变成一个空格,由于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撑开高度的原理
案例分析当一个元素内部的子元素出现浮动的时候,由于浮动元素脱离了普通文本流,所以父元素感觉不到元素的高度,所以就出现了传说中高度塌陷。
神奇的事情发生了,我们不清除浮动,通过overflow: auto| hidden
就可以撑开高度了。如果你不理解BFC这个,可能不知道这个原理,让给父元素添加了overflow: auto| hidden
的时候,父元素形成了一个BFC,由于BFC的特性之一,可以感知浮动元素的高度,所以撑开了高度。
BFC的理解
- BFC是什么。BFC(块级元素格式上下文)形成了一个独立的空间,空间内部和外部没有影响。我们可以理解为一个箱子(实际上是看不见摸不着的),箱子里面物品的摆放是不受外界的影响的。
- 形成BFC的条件
-
overflow
不为visible。常用的auto``hidden
- 浮动元素和绝对定位元素
- 非块级盒子的块级容器。
display:inline-block
display:table-cells
display:table-captions
- BFC作用
- 可以让父元素看到内部浮动的子元素
- 可以运用于清楚外边距合并的问题。
- 可以清楚浮动元素对文字的影响,由于默认情况下,文字会围绕在浮动元素旁边,但是形成了BFC,就不受外面的元素影响。
浮动导致的父容器高度塌陷
原因当一个元素内部的子元素出现浮动的时候,由于浮动元素脱离了普通文本流,所以父元素感觉不到元素的高度,所以就出现了传说中高度塌陷。
解决方法
- 清除内部浮动(注意兼容性)
.parent:after{
display: block;
clear: both;
content:"";
}
- 父元素形成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的时候会改变,麻烦老师看看需要修改的