当前位置:Gxlcms > html代码 > css中bug记录_html/css_WEB-ITnose

css中bug记录_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:22人阅读

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 不设置内联块盒子,而设置其内边距,撑开所需要的宽度。

效果如下:

人气教程排行