html铺满整个页面_前端实践:怎么让一个HTML元素（标签）的区域铺满全屏？

现在很多网页都做得特别绚，因此很多时候大家都想着实现一些看上去吊炸天的效果，而这些前端的效果不管怎么华丽最原始的基础还是那一行行的代码，HTML+CSS+JS就是前端的三剑客。

今天我们就讲一讲我们最近的一个实践，吗就是让一副图片填满整个屏幕(除去浏览器所占区域哦)。通常有两种比较经典的效果，用到的原理之一就是这个。一个就是在PC上经常看到一些网页鼠标动一下翻一整页，另外一个就类似与手机APP第一次打开是的引导页。

而不管是哪个实例，我们都要做到的一个效果就是让一个HTML元素(标签)的区域铺满全屏？就算是传统的PC网页，我们也要接受不同的电脑屏幕高度，在传统的网页设计中我们可能采用一个固定的宽度，比如960px、1000px、1200px，当然现在这种固定宽度的设计依然很流行，只是把这个固定的宽度增加了(电脑屏幕的提升，呵呵)。但如果要实现上述我们提到的看上去酷炫的风格，我们显然不能使用固定的宽度和高度。

显然，我们需要使用自适应的宽高；大家都知道宽度自适应似乎比高度自适应来的更简单。可能大家都有这样的经历，认为宽度100%比高度100%的适用范围更加广；而实际上也是如此。

假设我们现在值在网页上写了、

、三个最基本的标签(实际上就是很多编辑器新建一个document默认所拥有的)，我们来看的盒模型

大家可以看到宽度是1350px，其实就如果出去margin就是我当前可用屏幕区域的100%宽度，而高度显然不是这样；这样我们可以通俗地理解为宽度的100%比高度的100%应用范围更广。

因此要实现我们的需求，宽度方面在没有特殊情况下直接使用100%即可解决；而高度我们自然也想到过用100%,但不得不考虑它的适用范围了。其实不管是宽度也好，高度也罢，它们的100%(当然其他数值也一样)是以它们的父节点作为参考的，而最大的“祖宗”的默认宽度就是100%，而高度为0。

因此得到全屏展示当然我们也想到了两种方式，一种是CSS，另外一种则是在静态CSS无法实现的时候采用JS对HTML进行DOM操作动态改变元素的CSS属性值。

CSS方式

在使用CSS方式的时候必须有前提的，就拿高度的100%来说，咱们必须定义它的父级元素的高度，而且高度为铺满全屏的高度。同时注意不要有其他的CSS冲突，比如我们使用position:absolute(绝对定位)的时候我们使用高度100%就会失效了。

javascript方式

如果因为我们的这个模块的需求，导致我们不能满足使用CSS完成这一需求的时候，我们就要动用JS，来做了。当然我们不管是用原生的JS还是jquery等框架。我们必须选对相应的对象及其方法。比如很多人说应该选择Screen对象，其实我觉得不是这样的，因为不管是我们的pc也好还是我们的移动端也好，浏览器本身往往已经占用了一定的位置，因此我建议使用window对象来获取尺寸的数值，然后通过DOM对HTML元素的CSS属性值进行改变。

html铺满整个页面_前端实践:怎么让一个HTML元素（标签）的区域铺满全屏？相关推荐

怎么让背景铺满整个页面_必能用到，一页PPT中想放超多图片怎么办？
本期介绍一个很实用的PPT技巧, 在公司介绍.活动总结.成果展示的最后, 我们经常会在一页PPT中, 放上大量头像或者活动照片. 放头像能让内部人员产生认同感, 让观众感觉到人情味. 放照片能将很多边 ...
java按钮触发另一个页面_前端跨页面通信，你知道哪些方法？
戳蓝字「前端技术优选」关注我们哦! 引言在浏览器中,我们可以同时打开多个Tab页,每个Tab页可以粗略理解为一个"独立"的运行环境,即使是全局对象也不会在多个Tab间共享.然而有 ...
显示外部页面_前端设计-响应式页面开发基础
随着终端设备类型的丰富,设备尺寸的型号也越来越多,如果实现前端页面在不同终端设备中,按照设备的尺寸型号进行自动布局,保证良好的人际交互体验效果,已经成为网页前端设计所需要考虑的问题,当前支持响应式开发 ...
sessionstorage ie8下跨页面_前端页面布局困难？教你用盒子模型一招解决
CSS 盒子模型 CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用. CSS盒模型本质上是一个 ...
的run窗口不显示_「玩转deepin」如何安装VirtualBox增强功能使得deepin全屏显示？...
在Windows上通过Virtualbox安装deepin深度操作系统,安装完成后,为了让deepin可以在virtualbox中全屏显示,需要安装增强工具,但是不少同学点击安装增强工具后会出现无法安 ...
bootstrap设计登录页面_前端小白如何在10分钟内打造一个爆款Web响应式登录界面？...
对于前端小白(例如:专注后端代码N年的攻城狮),自己编写一个漂亮的Web登录页面似乎在设计上有些捉襟见肘,不懂UI设计,颜色搭配极度的混乱(主色,辅助色,配色,色彩渐变,动画效果等等,看起来一堆乱七八 ...
a标签传值到另一个页面_前端开发入门——HTML基础标签
本文创建于2020年8月,以下为正文: HTML是用于创建可以从一个平台移植到另一平台的超文本文档的一种简单标记语言,经常用来创建web页面.HTML是制作网页的基础,我们在网络营销种讲的静态网页,就 ...
mssql 计划怎每隔n秒_前端：调你一个接口6秒还配资深工程师？后端：有24部分需要处理！...
有关于做web开发的程序员,不知道你们有没有这样一种感受,那就是前端工程师与后端工程师之间有时也会存在鄙视链的关系,比如前端程序员会认为后端程序员没什么技术含量,不就是写个接口,获取一些数据而已,而前 ...
js取iframe 上级页面_原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法...
用原生js在父页面获取iframe子页面的元素,以及在子页面获取父页面元素,这是平时经常会用到的方法,这里写一个例子来总结下: 1.父页面(demo.html),在父页面修改子页面div的背景色为灰色 ...

html铺满整个页面_前端实践:怎么让一个HTML元素（标签）的区域铺满全屏？

html铺满整个页面_前端实践:怎么让一个HTML元素（标签）的区域铺满全屏？相关推荐

最新文章

热门文章