2回答

樱桃小胖子

2019-05-30

已采纳

确实会有同学说的问题，header会超出body，这种方法是一种比较暴力的解决方案，相对来说比较温和的解决办法如下：

希望可以帮到你！

0

樱桃小胖子

2019-05-30

这个问题发生的原因是根据规范，一个盒子如果没有上补白(padding-top)和上边框(border-top)，那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠，说白点就是：父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding，就会不断一层一层的找自己“领导”(父元素，祖先元素)的麻烦，只要给领导设置个有效的 border或者padding就可以有效的管制这个目无领导的margin，防止它越级，把自己的margin当成领导的margin执行。这里header和banner的父元素是body，如果给body设置border或者是padding，会破坏整体布局，但是因为header设置了position:fixed;所以，可以给header设置一个固定的定位的位移量top:0即可解决

希望可以帮到你！

0

heonard_

h 哦哦，给了top：0之后header上去了，但还是有点不理解。老师的意思是这样吗，body这个父元素没有设置border-top或paddiong-top，就也执行了子元素banner的margin-top，也有了一个上外边距?但是即便这样body的内容大小没变呀，为啥header给了top：0就会上去呢，这样岂不是子元素header超出了父元素body的范围，跑到body的外边距margin-top的位置去了

h019-05-30

共1条回复