margin的塌陷现象
标准文档流中,竖直方向的连个相邻的盒子的margin不叠加,以较大的为准。这就是margin的塌陷现象。例如:
此时两个盒子间的空白间隙是60px
如果不在标准流中,比如盒子都浮动了,那么两个盒子间是没有塌陷现象的。例如:
此时两个盒子之间的空白间隙是90px
margin 盒子居中
margin:0 auto
margin值可以为auto,表示自动。当left、right两个方向都为auto时,盒子居中:
margin-left: auto; margin-right: auto; |
简写为
margin:0 auto; |
注意:
(1) 使用margin:0 auto; 的盒子,必须有明确的width。
(2)只有标准流的盒子,才能使用margin:0 auto; 居中。即,当一个盒子浮动了、绝对定位了、固定定位了,都不能使用margin:0 auto;
(3) margin:0 auto;是在居中盒子,不是居中文本。
(4)文本的居中:text-align:center;
margin:0 auto; → 让这个div自己在大容器中居中。 text-align: center; → 让这个div内部的文本居中。 |
普及一下知识,text-align还有
1 text-align:left; 没啥用,因为默认居左 2 text-align:right; 文本居右 |