相邻垂直块元素设置margin时会遇到合并的问题:
这个有点儿像大哥和小弟的关系,谁手段高,谁是大哥,也就听谁的;
如图:(原始图):让上盒子和下盒子挨着;
此时给粉盒子不想和下面的绿盒子挨着,于是设置一个向下个外边距为50pxmargin-bottom: 50px;
;当绿盒子知道以后,也不想挨着粉盒子了,于是他设置了一个向上的外边距为100pxmargin-top: 100px;
;那么此时他们之间的距离是150px么?
如图:
为什么不是150px呢?因为盒子在垂直方向设置margin会造成边距合并,谁大按谁的算;那么你要问了,就想让他设置成150怎么办呢?简单:把两个盒子的外边距参数加起来,放到任意一个盒子身上设置:上盒子:margin-bottom:150px; or 下盒子:margin-top:150px;
盒子嵌套时设置margin触发的BFC,父盒子塌陷:
盒子嵌套时,想让子盒子在父盒子里面通过margin来设置垂直方向的位置,不能行得通:
// 结构:
<div class="father">
<div class="son">我是儿子</div>
</div>
// 样式:
.father {
width: 300px;
height: 400px;
}
.son {
width: 50px;
height: 50px;
background-color: pink;
}
如果给.son一个margin-top:50px;,理论上来讲子盒子应该距离父盒子会有一个想下的50px,但是实际上是没有的,并且会造成父盒子向下塌陷50px.
解决方法:
给父元素设置任意一个以下代码就可以成功解决这个问题:
- 给父元素添加一个向上的边框:border-top:xxx;
- 给父元素添加一个内边距;
- 给父元素添加一个属性overflow:hidden; 溢出隐藏;
盒子居中问题:
盒子块级元素居中:margin:0 auto;
文本居中的方式:
// 文本垂直居中的方式是:让文本的行高等于文本设置的高度;
height: 54px;
text-align: center; // 文本水平居中的方式;
line-height: 54px;