使用钙()函数怎么实现满屏背景定宽内容 - 行业资讯 - 肥雀云

　　介绍

这期内容当中小编将会给大家带来有关使用钙()函数怎么实现满屏背景定宽内容,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。

& lt; footer> 　　& lt; div 类=皐rapper"祝辞　　& lt; !——,页脚的内容写在这里,——比; 　　& lt;/div> 　　& lt;/footer>

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

footer { 　　背景:# 333; 　　} 　　.wrapper { 　　max-width: 900 px; 　　保证金:1 em 汽车; 　　}

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

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

.wrapper { 　　max-width: 900 px; 　　保证金:1 em 钙(50%,安康;450 px); 　　}

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

footer { 　　max-width: 900 px; 　　填充:1 em 钙(50%,安康;450 px); 　　背景:# 333; 　　} 　　.wrapper {}

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

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

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

footer { 　　填充:1 em; 　　填充:1 em 钙(50%,安康;450 px); 　　背景:# 333; 　　}

上述就是小编为大家分享的使用钙()函数怎么实现满屏背景定宽内容了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注行业资讯频道。