html vh和百分比,css中height 100vh的应用场景,动态高度百分比布局,浏览器视区大小单位...
css中height 100vh的应用场景,动态高度百分比布局,浏览器视区大小单位
height:100vh
一些只能vw, vh才能完成的应用场景:
1. 场景之:元素的尺寸限制
vw vh 主要是实现了动态高度百分比布局,比如宽高比不固定的图片,vw很轻易的实现正方形图片缩略图
原始大图的尺寸限制问题——因为很有可能图片过大,尼玛一屏显示器区域不够放,我们需要对其进行缩放处理。
这类限制的实现,在当下,需要获得图片的原始大小,以及浏览器内部尺寸,算大小,算比例等,算是比较折腾的。
但是,vw, vh等单位本身就是浏览器视区大小相关单位,直接使用其做限制,岂不省了N多JS代码?
CSS代码:
.vw_vh_img {
max-width: 90vw;
max-height: 90%;
max-height: 90vh;
}
HTML代码:
2. CSS3新vw, vh单位与纯CSS定位的弹框屏幕居中效果实例页面
3. 视区覆盖以及边界定位
vh确实是相对于屏幕的,但默认body有一个margin,100%加上这个margin就超出了就会出现滚动条。清除body的margin即可。
body{margin:0;}
=====================
在做手机端的时候经常会用到的做字体的尺寸单位
说白了 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%大的情况
恭贺新春
html{
font-size: 14px;
}
.em,
.em > .em-son,
.em > .em-son > .em-grandson {
font-size: 1.2em;
}
.rem,
.rem > .rem-son,
.rem > .rem-son > .rem-grandson {
font-size: 1.2rem;
}
.rem-box {
background: #d60b3b;
width:10rem;
height: 10rem;
color: #fff;
text-align: center;
line-height:5rem;
}
.vhvw-box {
background: #d60b3b;
width:50vw;
height: 50vh;
color: #fff;
text-align: center;
line-height:25vh;
}
em 继承父元素的字体大小,来变大或变小,多层嵌套字体变化
字体大小 1.2 * 14(父元素body) = 16px
字体大小 1.2 * 16(父元素em) = 20px
字体大小 1.2 * 20(父元素em-son) = 24px
rem 继承根节点元素的字体大小,来变大或变小,多层嵌套字体不变化
字体大小 1.2 * 14(根节点html) = 16px
字体大小 1.2 * 14(根节点html) = 16px
字体大小 1.2 * 14(根节点html) = 16px
rem 也可作为固定长度单位设置宽高等
宽:14 * 10 = 140px
高:14 * 10 = 140px
vh,vw 屏幕可见区域的高度,宽度的1%
宽:屏幕宽度的50%
高:屏幕高度的50%
恭贺新春
html{
font-size: 14px;
}
.em,
.em > .em-son,
.em > .em-son > .em-grandson {
font-size: 1.2em;
}
.rem,
.rem > .rem-son,
.rem > .rem-son > .rem-grandson {
font-size: 1.2rem;
}
.rem-box {
background: #d60b3b;
width:10rem;
height: 10rem;
color: #fff;
text-align: center;
line-height:5rem;
}
.vhvw-box {
background: #d60b3b;
width:50vw;
height: 50vh;
color: #fff;
text-align: center;
line-height:25vh;
}
em 继承父元素的字体大小,来变大或变小,多层嵌套字体变化
字体大小 1.2 * 14(父元素body) = 16px
字体大小 1.2 * 16(父元素em) = 20px
字体大小 1.2 * 20(父元素em-son) = 24px
rem 继承根节点元素的字体大小,来变大或变小,多层嵌套字体不变化
字体大小 1.2 * 14(根节点html) = 16px
字体大小 1.2 * 14(根节点html) = 16px
字体大小 1.2 * 14(根节点html) = 16px
rem 也可作为固定长度单位设置宽高等
宽:14 * 10 = 140px
高:14 * 10 = 140px
vh,vw 屏幕可见区域的高度,宽度的1%
宽:屏幕宽度的50%
高:屏幕高度的50%
html vh和百分比,css中height 100vh的应用场景,动态高度百分比布局,浏览器视区大小单位...相关推荐
- CSS中height:100vh和height:100%的区别是什么?
CSS中height:100vh和height:100%的区别 首先,我们得知道1vh它表示的是当前屏幕可见高度的1/100,而1%它表示的是父元素长或者宽的1%(可以这么理解?) 1.对于设置hei ...
- 解决css中height:100%失效的问题
解决css中height:100%失效的问题 参考文章: (1)解决css中height:100%失效的问题 (2)https://www.cnblogs.com/wangweizhang/p/111 ...
- CSS中固定定位、相对定位、绝对定位以及flex布局高效定位
CSS中固定定位.相对定位.绝对定位以及flex布局高效定位 一.固定布局 将元素固定到一个位置,不管屏幕怎样移动,元素的位置不移动. <style>body {height: 3000p ...
- CSS中height:100%和height:inherit的异同
1. height:100%和height:inherit的异同 1.1 兼容性差异 height:100% IE6+ √ height:inherit IE8+ √ 1.2 大多数情况作用是一样的 ...
- css如何自适应浏览器的高度,div css 高度 宽度 自适应浏览器 屏幕大小
DIV布局--IT北瓜原创 html,body{ font: 100% 微软雅黑, 宋体, 新宋体; margin: 0; /* 最好将 body 元素的边距和填充设置为 0 以覆盖不同的浏览器默认值 ...
- css单位计算方法,CSS中的单位和百分比计算
CSS中的单位和百分比计算 发布时间:2020-05-23 15:53:59 来源:亿速云 阅读:217 作者:鸽子 CSS中的单位 绝对单位 in-英寸: cm; mm; pt-磅 相对单位 em- ...
- css中涉及到的百分比
1.css 中某个元素分别设置宽高为百分比形式 元素的宽和高的百分比参考分别是基于父元素的宽和高 示例 <head><meta charset="UTF-8"&g ...
- CSS中绝对定位对子元素height的影响
CSS中height:100%和height:inherit的异同 by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhang ...
- 弄清楚CSS单位px、em、rem、vh、vw、vmin、vmax的应用场景
1.px:绝对单位,页面按精确像素展示 2.em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值. em ...
最新文章
- 河南单招哪所学校主学计算机,河南单招学校王牌专业 2021年河南单招王牌专业...
- lamp架构-访问控制-禁止php解析、屏蔽curl命令访问
- C++ 指向类成员的指针
- 产品经理常犯的七大错误
- 隐藏/显示jeecg-boot 后端管理页面的右侧的系统设置
- CentOS7下安装Tomcat
- 帧中继环境下ospf的使用(点到点模式)
- 了解Java密码扩展的基础
- 安装CentOS操作系统(超详细)
- mac 安装pip教程
- bootstrap插件bootbox参数
- Matlab导入Excel数据快速绘图
- QQ查询信息接口php源码,免登录获取QQ用户信息API接口源码
- 九九乘法表居中c语言,excel图文教程:九九乘法表的制作方法,你会哪种?
- Linux用户层和内核文件读写
- W3C 标准 较详细
- matlab patch 六面体,[MATLAB数学相关] 求正六面体的细分格式
- Proteus和Keil两个软件的联合使用
- (MATLAB)一元线性回归和多元线性回归
- 实心和空心哪个抗弯能力强_同样材质,同样长度,质量相同的空心管和实心管,实心管抗弯曲能力强 (4.0分)...