DDR爱好者之家

calc()实现满屏背景定宽内容
站长资源 2024/11/24 佚名
39 1538
DDR爱好者之家 Design By 杰米

在过去的几年间，有一种网页设计手法逐渐流行起来，我将它称作背景宽度满屏，内容宽度固定。这个设计的一些典型特征如下。

页面中包含多个大区块，每个区块都占据了整个视口的宽度，区块的背景也各不相同。

内容是定宽的，即使在不同分辨率下的宽度不一样，那也只是因为媒体查询改变了这个固定的宽度值而已。在某些情况下，不同区块的内容也可能具有不同的宽度。

有时候，整个网页都是由这种风格的多个区块组成的满屏背景的定宽内容。不过在更多的情况下，页面中只有某个特定区域是以这个风格来设计的，最典型的就是导航或页脚。

要实现这种设计风格，最常见的方法就是为每个区块准备两层元素：外层用来实现满屏的背景，内层用来实现定宽的内容。后者是通过 margin: auto实现水平居中的。举例来说，采用这种设计的页脚通常需要把结构代码写成：

<footer>
<div class="wrapper">
<!-- 页脚的内容写在这里 -->
</div>
</footer>

同时用 CSS 来设置这两层元素的样式：

footer {
background: #333;
}
.wrapper {
max-width: 900px;
margin: 1em auto;
}

看起来很眼熟对不对？目前绝大多数的前端工程师都是这样写的。难道为了这个效果就一定要添加一层额外的元素？我们能否在现代 CSS的帮助下彻底抛弃这个累赘？

我们先来想一想，margin: auto 在这个场景下到底发挥了什么作用。这条声明所产生的左右外边距实际上都等于视口宽度的一半减去内容宽度的一半。由于百分比在这里是基于视口宽度来解析的（假设所有祖先元素都没有显式指定宽度），我们可以把这个外边距的值表达为 50% – 450px。幸好CSS3定义了这样一个 calc() 函数，它允许我们在 CSS 中直接以这种简单的算式来指定属性的值。如果用 calc() 取代原先的 auto，这个内层容器的样式就会变成：

.wrapper {
max-width: 900px;
margin: 1em calc(50% - 450px);
}

之所以要在页脚内加一层容器元素，唯一的原因就是为了给它的margin 指定神奇的 auto 关键字，从而实现内容的水平居中布局。不过，现在我们已经用 calc() 替代了这个神奇的 auto，而且这个新值实际上可以作为一个通用的 CSS 长度值应用到任何一个接受长度值的属性上。这意味着如果我们愿意，还可以把这个长度值应用到父元素的 padding 上，而整个效果是保持不变的：

footer {
max-width: 900px;
padding: 1em calc(50% - 450px);
background: #333;
}
.wrapper {}

经过这一番改造之后，我们已经把内层容器上的所有 CSS代码都剥离干净了。也就是说，它其实已经不需要参与布局了，我们可以安全地把它从结构代码中去掉。终于，我们在纯净无冗余的 HTML 结构上实现了想要的设计风格。这个方案还有进一步优化的空间吗？没错。你要相信，追求卓越的道路是永无止境的！

如果把 width 这一行声明注释掉，你会发现其实没有影响。视觉效果是完全一样的，而且不论视口尺寸如何变化都是如此。这是为什么呢？因为当内边距是 50% – 450px 时，只可能给内容留出 900px（2×450px）的可用空间。只有把 width 显式地设置为 900px 之外（或大或小）的其他值，我们才有可能看出区别。由于我们想要得到的内容宽度本来就是 900px，这一行声明其实就是冗余的，我们可以把它去掉，让代码更加简洁。

另一个可以优化的地方在于，我们可以增加一条回退样式来增强向后兼容性。这样即使浏览器不支持 calc()，我们也至少可以得到一个相对合理的内边距：

footer {
padding: 1em;
padding: 1em calc(50% - 450px);
background: #333;
}

终于大功告成了。我们抛弃了冗余的标签，花费了三行 CSS 代码，最终达成了这个完美的结果：样式灵活、代码简练，还具有良好的兼容性！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米