1.当我第一次看到这个小节的标题时,我不是很理解什么是浮动背景,更不用说固定内容了。幸好作者给出了几个网站,我好像明白了!(如果不正确,请指出)
大家可以先看看这些网站的效果,再来阅读下文
大家可以尝试改变浏览器窗口宽度(滚轮缩放一下),大概就能看到效果了。
用W3School的页面对比一下,可以更明显的感觉到(W3School的背景并不是浮动的)
2.这个效果我们常用于页尾,也建议用于页尾
小练习
html
<footer>
<div class="wrapper">
<!-- Footer content here -->
</div>
</footer>
css
footer{
background: #333;
padding: 1em calc(50% - 450px);
}
.wrapper{
background: #ccc;
height: 200px;
}
我们并没有设置内容wrapper宽度,而是以padding形式来设置的
这里的宽度为 450*2 = 900px