css中bug记录

1.margin塌陷，通俗叫法。

    假如一个盒子box里边嵌套了两个盒子（记为box1,box2)。box1的margin-top不会如预想的一样在box顶部撑开一个边距，而是以包含box的容器上边界为基准撑开边距。

    解决方法：一、设置box1 padding-top.

                  二、设置box display:absolute.

                  三、设置box overflow：hidden。

2.如图示：

                 此类问题代码为：box{width:500px ; height:50px;line-height:50px;  text-align:center; border:1px solid #333;}

                                       box span{display:inline-block; width:100px; height: 20px;}

 

    出现此问题有如下几点：父级元素设置text-align:center;使得盒子内文字居中，此时若不设置 span 为inline-block; ,span会自动撑开；

                                   若span设置为inline-block; ,其宽 度和高度的设置不影响文字位置。

    解决方法为：一、父元素设置padding-top。

                     二、父元素仍设置居中，span 不设置内联块盒子，而设置其内边距，撑开所需要的宽度。

    效果如下： 

。