html设置导背景宽度,calc()实现满屏背景定宽内容
在过去的几年间,有一种网页设计手法逐渐流行起来,我将它称作背景宽度满屏,内容宽度固定。这个设计的一些典型特征如下。
页面中包含多个大区块,每个区块都占据了整个视口的宽度,区块的背景也各不相同。
内容是定宽的,即使在不同分辨率下的宽度不一样,那也只是因为媒体查询改变了这个固定的宽度值而已。在某些情况下,不同区块的内容也可能具有不同的宽度。
有时候,整个网页都是由这种风格的多个区块组成的满屏背景的定宽内容。不过在更多的情况下,页面中只有某个特定区域是以这个风格来设计的,最典型的就是导航或页脚。
要实现这种设计风格,最常见的方法就是为每个区块准备两层元素:外层用来实现满屏的背景,内层用来实现定宽的内容。后者是通过 margin: auto实现水平居中的。举例来说,采用这种设计的页脚通常需要把结构代码写成:
同时用 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 代码,最终达成了这个完美的结果:样式灵活、代码简练,还具有良好的兼容性!
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
html设置导背景宽度,calc()实现满屏背景定宽内容相关推荐
- [css] 移动端页面不满一屏时如何实现满屏背景?
[css] 移动端页面不满一屏时如何实现满屏背景? body {min-height: 100vh; } 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨 ...
- html背景幻灯片图片,CSS3全屏背景图像幻灯片
我们将使用一个无序列表的幻灯片,我们会添加一个跨度为每个图像和一个标题: Image 01 re·lax·a·tion 让我们首先定义无序列表的样式.这将是固定的.我们还将使用:在伪元素以地方模式的图 ...
- html全屏背景视频特效,HTML5全屏背景视频特效插件Vidage.js源码
下面我们对HTML5全屏背景视频特效插件Vidage.js源码文件阐述相关使用资料和HTML5全屏背景视频特效插件Vidage.js源码文件的更新信息. HTML5全屏背景视频特效插件Vidage.j ...
- css 设置body的最小高度是100%,满屏显示
解决问题: 1.body里的内容不满一屏时,body的高度满屏: 2.当内容超出屏幕高度时,内容的高度就是body的高度. 方法一:没有设置body的高度,内容不满屏,但是背景色却铺满整个屏幕,方法如 ...
- Html手机web背景全屏,使用全屏背景的网页设计欣赏 全屏网页背景教程
使用全屏背景的网页设计欣赏 & 全屏网页背景教程 Sponsor 全屏的大背景网站之前分享过不少,这是2012年以及2013年的设计趋势,适合用全屏背景的网站有很多,比如摄影类.建筑类.餐厅美 ...
- vue 设置背景图地址_vue-生成自动铺满的背景图
生成如上图的背景图 需要以下的代码: div部分: <template> <div class="bg" :style ="bg"> & ...
- CSS设置背景图片满屏
折腾了很久,图片长一点或者宽一点,怎么设置宽和高都有问题,设置背景图片满屏,网上也搜了很多,都没有好的解决方案. 最后抠了某个网站的源码,找到了目前的一个解决方案 <!DOCTYPE html& ...
- HTML背景单张自动拉满全屏并且不重复怎么设置?
HTML背景单张自动拉满全屏并且不重复怎么设置? 很多小伙伴都被HTML因为像素不够导致全屏放了一堆的图片,那么,今天小编就来告诉你们如何设置图片不重复! 话不多说,直接上代码: <body c ...
- html背景图片不重叠铺满,css背景图片怎么铺满
该方法适用于所有品牌的电脑. CSS设置拉伸背景图片铺满屏幕 新建一个html文件,命名为test.html,用于讲解CSS中如何设置拉伸背景图片铺满屏幕. 在test.html文件内,使用div标签 ...
- CSS实现背景图片详解全屏铺满自适应的方式
问题: CSS实现背景图片全屏铺满自适应的方式 解决: (1)background-image:可添加多张背景图片.参数:url() || none(默认)background-image: url( ...
最新文章
- UVa719 Glass Bread(后缀数组解法)
- 遍历groupBox控件的每一个子控件的写法
- mysql 分组group
- Vue 项目部署出现css样式失效的解决方案
- MatchingFrontier包简介及R实现
- basis问题专区(文档)
- 实时音频编解码之二编码学数学知识
- 解决iconfont 图标不显示问题
- Accer 4752G添加固态硬盘 双系统
- 通过挑土豆—我学会了如何区分JS数组的遍历方法
- 电销CRM客户关系管理系统开发12大核心功能
- SSH Tunnel隧道
- C++ multimap的简单使用
- odrive搭建差速小车+轮毂电机+RC航模控制器
- Linux下编译cscope,Linux cscope命令
- U盘装系统装了一半就装不了 U盘装系统失败了怎么办
- (声纳+惯性+视觉)Sonar Visual Inertial SLAM of Underwater Structures
- JAR 文件打包方法
- uniapp 微信小程序最简单的生成图片示例
- 【JAVA】通过ISBN一键获取书籍信息