样式小问题记录(有关盒模型,背景图)

任务,要屏蔽异步组件中一个dom

开始,脚本异步控制dom,导致页面组件会先呈现,后隐藏,造成闪烁效果。
后来想,直接在样式脚本里写死那个异步加载的dom的样式呗,直接写死display nono掉,这样组件加进来就直接不会呈现啊,然后屏蔽后页面留空比较大,要加个背景图
开始想法是我append一个div,这个div就专门放背景图吧,后来发现,div紧跟着页面作为最后一个元素,内容少的时候,这个背景图距离底部有很大距离,显得丑。(这个图是那种宣传语类似的logo,放在页面最下方的)

改变方案,这个图直接作为body的背景图,坑:body不够长,背景图不会显示在最下方,于是body 的 min-height:100%,html也要设置height 100%,否则也是撑不开

这个背景图 高度120px ,宽度屏幕宽度就行了,与上方内容还要有个距离40px,于是设置padding-bottom : 160px;
盒子默认是box-sizing:content-box, 于是页面高度就是100%+160px,导致内容很少时候也会可以滑动,
改了下box-sizing:border-box,那个logo图就乖乖的呆在下方了。
background-size 不是特殊情况下,不要两个 100% ,只设置一个宽度100%就够了

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,790评论 1 92
  • 前端必读:浏览器内部工作原理[https://kb.cnblogs.com/page/129756/] 作者: T...
    我是强强阅读 1,165评论 0 2
  • 简介浏览器可以被认为是使用最广泛的软件,本文将介绍浏览器的工 作原理,我们将看到,从你在地址栏输入google.c...
    听风阁阅读 3,307评论 0 7
  • H5移动端知识点总结 阅读目录 移动开发基本知识点 calc基本用法 box-sizing的理解及使用 理解dis...
    Mx勇阅读 4,611评论 0 26
  • 中午睡觉的时候被舍友吵醒,于是,下午做题的时候不在状态,错了很多。为什么自己的情绪是如此的难自控。
    管理自己的过程阅读 286评论 1 1