数码控科技猎奇Iphone动漫星座游戏电竞lolcosplay王者荣耀攻略allcnewsBLOGNEWSBLOGASKBLOGBLOGZSK全部技术问答问答技术问答it问答代码软件新闻开发博客电脑/网络手机/数码笔记本电脑互联网操作系统软件硬件编程开发360产品资源分享电脑知识文档中心IT全部全部分类全部分类技术牛文全部分类教程最新网页制作cms教程平面设计媒体动画操作系统网站运营网络安全服务器教程数据库工具网络安全软件教学vbscript正则表达式javascript批处理更多»编程更新教程更新游戏更新allitnewsJava新闻网络医疗信息化安全创业站长电商科技访谈域名会议专栏创业动态融资创投创业学院 / 产品经理创业公司人物访谈营销开发数据库服务器系统虚拟化云计算嵌入式移动开发作业作业1常见软件all电脑网络手机数码生活游戏体育运动明星影音休闲爱好文化艺术社会民生教育科学医疗健康金融管理情感社交地区其他电脑互联网软件硬件编程开发360相关产品手机平板其他电子产品摄影器材360硬件通讯智能设备购物时尚生活常识美容塑身服装服饰出行旅游交通汽车购房置业家居装修美食烹饪单机电脑游戏网页游戏电视游戏桌游棋牌游戏手机游戏小游戏掌机游戏客户端游戏集体游戏其他游戏体育赛事篮球足球其他运动球类运动赛车健身运动运动用品影视娱乐人物音乐动漫摄影摄像收藏宠物幽默搞笑起名花鸟鱼虫茶艺彩票星座占卜书画美术舞蹈小说图书器乐声乐小品相声戏剧戏曲手工艺品历史话题时事政治就业职场军事国防节日风俗法律法规宗教礼仪礼节自然灾害360维权社会人物升学入学人文社科外语资格考试公务员留学出国家庭教育学习方法语文物理生物工程学农业数学化学健康知识心理健康孕育早教内科外科妇产科儿科皮肤科五官科男科整形中医药品传染科其他疾病医院两性肿瘤科创业投资企业管理财务税务银行股票金融理财基金债券保险贸易商务文书国民经济爱情婚姻家庭烦恼北京上海重庆天津黑龙江吉林辽宁河北内蒙古山西陕西宁夏甘肃青海新疆西藏四川贵州云南河南湖北湖南山东江苏浙江安徽江西福建广东广西海南香港澳门台湾海外地区

calc()实现满屏背景定宽内容

来源:脚本之家  责任编辑:小易  

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

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

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

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

要实现这种设计风格,最常见的方法就是为每个区块准备两层元素:外层用来实现满屏的背景,内层用来实现定宽的内容。后者是通过 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 代码,最终达成了这个完美的结果:样式灵活、代码简练,还具有良好的兼容性!

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


  • 本文相关:
  • css3中的calc函数浅析
  • 巧用css3的calc()宽度计算做响应模式布局的方法
  • css3 calc()会计算属性详解
  • 详解css 3 中的 calc() 方法
  • 浅谈css3中calc在less编译时被计算的解决办法
  • css3 calc实现滚动条出现页面不跳动问题
  • css3的calc()做响应模式布局的实现方法
  • css3 函数技巧 用css 实现js实现的事情(clac counters tooltip)
  • 使用css3中的calc()属性来以算式表达尺寸数值
  • 浅析css中calc()的使用
  • 免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved