height:100vh,width:100vw
1.em
在做手机端的时候经常会用到的做字体的尺寸单位
说白了 em就相当于“倍”,比如设置当前的div的字体大小为1.5em,则当前的div的字体大小为:当前div继承的字体大小*1.5
但是当div进行嵌套的时候,em始终是按照当前div继承的字体大小来缩放,参照后面的例子。
2.rem
这里的r就是root的意思,意思是相对于根节点来进行缩放,当有嵌套关系的时候,嵌套关系的元素的字体大小始终按照根节点的字体大小进行缩放。
参照后面给的demo
3.vh
vh就是当前屏幕可见高度的1%,也就是说
height:100vh == height:100%;
但是有个好处是当元素没有内容时候,设置height:100%该元素不会被撑开,
但是设置height:100vh,该元素会被撑开屏幕高度一致。
4.vw
vw就是当前屏幕宽度的1%
补充一句,当设置width:100%,被设置元素的宽度是按照父元素的宽度来设置,
但是100vw是相对于屏幕可见宽度来设置的,所以会出现50vw 比50%大的情况
height:100vh,width:100vw相关推荐
- height:100vh
1.em 在做手机端的时候经常会用到的做字体的尺寸单位 说白了 em就相当于"倍",比如设置当前的div的字体大小为1.5em,则当前的div的字体大小为:当前div继承的字体大小 ...
- CSS中height:100vh和height:100%的区别是什么?
CSS中height:100vh和height:100%的区别 首先,我们得知道1vh它表示的是当前屏幕可见高度的1/100,而1%它表示的是父元素长或者宽的1%(可以这么理解?) 1.对于设置hei ...
- html vh和百分比,css中height 100vh的应用场景,动态高度百分比布局,浏览器视区大小单位...
css中height 100vh的应用场景,动态高度百分比布局,浏览器视区大小单位 height:100vh 一些只能vw, vh才能完成的应用场景: 1. 场景之:元素的尺寸限制 vw vh 主要是 ...
- 关于height:100vh和height:100%的区别
1.em 在做手机端的时候经常会用到的做字体的尺寸单位 说白了 em就相当于"倍",比如设置当前的div的字体大小为1.5em,则当前的div的字体大小为:当前div继承的字体大小 ...
- height:100%和height:100vh的区别
(1)vh (视口高度)和 vw(视口宽度)介绍 vh就是当前屏幕可见高度的1%,也就是说 height:100vh == height:100%; 效果: 当元素没有内容时候,设置height:10 ...
- 100vh和100vw是什么意思?
vw/vh 目标:能够使用vw单位设置网页元素的尺寸 它们是 相对单位,对视口的尺寸计算结果 l vw:viewport width 1vw = 1/100视口宽度 l vh:viewport hei ...
- 详解 height 和 width 属性
为什么要使用 height 和 width 属性 您是否见过当文档加载时其内容会显示不规律的移动.之所以会这样,是因为浏览器为了能够显示每一个加载的图像,而不断地重新调整页面的布局.浏览器通过下载并解 ...
- jquery获取设置元素宽高位置height()、width()、offset()、position()、scrollTop()、scrollLeft()
全栈工程师开发手册 (作者:栾鹏) jquery系列教程2-style样式操作全解 jquery获取设置元素宽高位置 jquery的通过height().width().offset().positi ...
- 解决height:100vh超出屏幕高度的问题
废话不多说 , 先来看看问题 期望的样子 : 实际的样子 : 怎么样 , 看出问题了吧 , 那来看看代码吧 ! ( 只看有关的代码哦 ) // 此处使用stylus书写样式 .evaluation / ...
最新文章
- python输入正整数n、求n以内能被17整除的最大正整数_求100之内自然数中最大的能被17整除的数...
- qq无限时间撤回消息bug_手机QQ新功能汇总,比微信有意思多了
- linux安装jdk教程
- iOS彩票项目--第三天,搭建竞技场和发现,搭建幸运选号和我的彩票界面
- python投资组合
- 【cs229-Lecture7】支持向量机(SVM)
- shell脚本中执行 source /etc/profile 或者 source ~/.bashrc 不能生效的原因
- 转载:使用Auto Layout中的VFL(Visual format language)--代码实现自动布局
- Mysql的体系结构概览
- 如何把两个域控同步_同步带噪音大,怎么办?
- PHP中的预定义常量
- leetcode-Combination Sum-39
- 委外订单_ERP软件教程:金蝶ERP的委外加工业务流程(一)
- 局域网限速软件_8款Windows实用软件推荐,满满的干货,总有一款是你必备的
- 前端,到底什么来路?
- Python实战从入门到精通第二十讲——调用父类方法
- 荷兰研制出世界最小U盘:长度不到2厘米
- (秒杀项目) 4.6 分布式状态管理
- 远程调用中间件(RPC
- 内部审计具体准则第28号—信息系统审计