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

任务,要屏蔽异步组件中一个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%就够了

你可能感兴趣的:(样式小问题记录(有关盒模型,背景图))