margin的无边界问题以及图片的block属性问题-创新互联

公司主营业务:网站设计制作、做网站、移动网站开发等业务。帮助企业客户真正实现互联网宣传,提高企业的竞争能力。成都创新互联公司是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化,感谢他们对我们的高要求,感谢他们从不同领域给我们带来的挑战,让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。成都创新互联公司推出岢岚免费做网站回馈大家。

Document

这是移动端开发的一个小测试。按照上面的代码,最终的结果是页面产生了滚动条,为啥呢!!!,纠结死。。。

究其原因,发现其实是margin的无边界问题,.top-img设置了绝对定位,所以在给.div1加上margin-top后由于没有相对的边界所以body的高度被撑开了所以就有了滚动体。

解决办法,去掉.top-img的绝对定位改为:

.top-img{

    width:100%;

    height:0.4rem;

}

以为这样就行了,no!,这个时候.top-img会把上面下面都撑开一段距离,不止3像素,不知道到底是啥原因,反正再加上display:block就搞定了。。。


创新互联www.cdcxhl.cn,专业提供香港、美国云服务器,动态BGP最优骨干路由自动选择,持续稳定高效的网络助力业务部署。公司持有工信部办法的idc、isp许可证, 机房独有T级流量清洗系统配攻击溯源,准确进行流量调度,确保服务器高可用性。佳节活动现已开启,新人活动云服务器买多久送多久。


本文名称:margin的无边界问题以及图片的block属性问题-创新互联
转载注明:http://hbruida.cn/article/digpej.html