http://www.w3chtml.com/css3/units/length/vh.html

https://www.html.cn/book/css/values/length/vh.htm

  1. .em
  2.  
  3. 在做手机端的时候经常会用到的做字体的尺寸单位
  4.  
  5. 说白了 em就相当于“倍”，比如设置当前的div的字体大小为1.5em，则当前的div的字体大小为：当前div继承的字体大小*1.5
  6.  
  7. 但是当div进行嵌套的时候，em始终是按照当前div继承的字体大小来缩放，参照后面的例子。
  8.  
  9. .rem
  10.  
  11. 这里的r就是root的意思，意思是相对于根节点来进行缩放，当有嵌套关系的时候，嵌套关系的元素的字体大小始终按照根节点的字体大小进行缩放。
  12.  
  13. 参照后面给的demo
  14.  
  15. .vh
  16.  
  17. vh就是当前屏幕可见高度的1%，也就是说
  18.  
  19. height:100vh == height:%;
  20.  
  21. 但是有个好处是当元素没有内容时候，设置height:%该元素不会被撑开，
  22.  
  23. 但是设置height:100vh，该元素会被撑开屏幕高度一致。
  24.  
  25. .vw
  26.  
  27. vw就是当前屏幕宽度的1%
  28.  
  29. 补充一句，当设置width:%，被设置元素的宽度是按照父元素的宽度来设置，
  30.  
  31. 但是100vw是相对于屏幕可见宽度来设置的，所以会出现50vw 比50%大的情况
  32.  
  33. <!DOCTYPE html>
  34. <html lang="Zh-cn">
  35. <head>
  36. <meta charset="UTF-8">
  37. <title>恭贺新春</title>
  38. </head>
  39. <style type="text/css" media="screen">
  40. html{
  41. font-size: 14px;
  42. }
  43. .em,
  44. .em > .em-son,
  45. .em > .em-son > .em-grandson {
  46. font-size: .2em;
  47. }
  48. .rem,
  49. .rem > .rem-son,
  50. .rem > .rem-son > .rem-grandson {
  51. font-size: .2rem;
  52. }
  53. .rem-box {
  54. background: #d60b3b;
  55. width:10rem;
  56. height: 10rem;
  57. color: #fff;
  58. text-align: center;
  59. line-height:5rem;
  60. }
  61. .vhvw-box {
  62. background: #d60b3b;
  63. width:50vw;
  64. height: 50vh;
  65. color: #fff;
  66. text-align: center;
  67. line-height:25vh;
  68. }
  69. </style>
  70. <body>
  71. <h1>em 继承父元素的字体大小，来变大或变小，多层嵌套字体变化</h1>
  72. <div class="em">
  73. 字体大小 1.2 * （父元素body） = 16px
  74. <div class="em-son">
  75. 字体大小 1.2 * (父元素em) = 20px
  76. <div class="em-grandson">
  77. 字体大小 1.2 * (父元素em-son) = 24px
  78. </div>
  79. </div>
  80. </div>
  81. <br>
  82. <h1>rem 继承根节点元素的字体大小，来变大或变小，多层嵌套字体不变化</h1>
  83. <div class="rem">
  84. 字体大小 1.2 * （根节点html） = 16px
  85. <div class="rem-son">
  86. 字体大小 1.2 * （根节点html） = 16px
  87. <div class="rem-grandson">
  88. 字体大小 1.2 * （根节点html） = 16px
  89. </div>
  90. </div>
  91. </div>
  92. <br>
  93. <h1>rem 也可作为固定长度单位设置宽高等</h1>
  94. <div class="rem-box">
  95. 宽： *  = 140px<br>
  96. 高： *  = 140px
  97. </div>
  98. <br>
  99. <h1>vh,vw 屏幕可见区域的高度，宽度的1%</h1>
  100. <div class="vhvw-box">
  101. 宽：屏幕宽度的50%<br>
  102. 高：屏幕高度的50%
  103. </div>
  104. </body>
  105. </html>
  106.  
  107. <!DOCTYPE html>
  108. <html lang="Zh-cn">
  109. <head>
  110. <meta charset="UTF-8">
  111. <title>恭贺新春</title>
  112. </head>
  113. <style type="text/css" media="screen">
  114. html{
  115. font-size: 14px;
  116. }
  117. .em,
  118. .em > .em-son,
  119. .em > .em-son > .em-grandson {
  120. font-size: .2em;
  121. }
  122. .rem,
  123. .rem > .rem-son,
  124. .rem > .rem-son > .rem-grandson {
  125. font-size: .2rem;
  126. }
  127. .rem-box {
  128. background: #d60b3b;
  129. width:10rem;
  130. height: 10rem;
  131. color: #fff;
  132. text-align: center;
  133. line-height:5rem;
  134. }
  135. .vhvw-box {
  136. background: #d60b3b;
  137. width:50vw;
  138. height: 50vh;
  139. color: #fff;
  140. text-align: center;
  141. line-height:25vh;
  142. }
  143. </style>
  144. <body>
  145. <h1>em 继承父元素的字体大小，来变大或变小，多层嵌套字体变化</h1>
  146. <div class="em">
  147. 字体大小 1.2 * （父元素body） = 16px
  148. <div class="em-son">
  149. 字体大小 1.2 * (父元素em) = 20px
  150. <div class="em-grandson">
  151. 字体大小 1.2 * (父元素em-son) = 24px
  152. </div>
  153. </div>
  154. </div>
  155. <br>
  156. <h1>rem 继承根节点元素的字体大小，来变大或变小，多层嵌套字体不变化</h1>
  157. <div class="rem">
  158. 字体大小 1.2 * （根节点html） = 16px
  159. <div class="rem-son">
  160. 字体大小 1.2 * （根节点html） = 16px
  161. <div class="rem-grandson">
  162. 字体大小 1.2 * （根节点html） = 16px
  163. </div>
  164. </div>
  165. </div>
  166. <br>
  167. <h1>rem 也可作为固定长度单位设置宽高等</h1>
  168. <div class="rem-box">
  169. 宽： *  = 140px<br>
  170. 高： *  = 140px
  171. </div>
  172. <br>
  173. <h1>vh,vw 屏幕可见区域的高度，宽度的1%</h1>
  174. <div class="vhvw-box">
  175. 宽：屏幕宽度的50%<br>
  176. 高：屏幕高度的50%
  177. </div>
  178. </body>
  179. </html>

CSS3 长度单位的更多相关文章

  1. 浅谈css3长度单位rem，以及移动端布局技巧

    rem是什么? rem是css3中新增加的一个单位属性(font size of the root element),根据页面的根节点的字体大小进行转变的单位.root!!!!!!!!!根节点,也就是 ...

  2. css3新属性的学习使用

    display 可选值:none隐藏元素: block显示为块级元素: inline显示为行级元素 inlineblock显示为内联块级元素,本身将是一个行级元素,但是拥有 块级元素的所有属性,比如宽 ...

  3. css3带你实现酷炫效果

    css3 私有前缀 -webkit- chrome/safari等webkit内核浏览器 -moz- firfox -o- opera -ms- IE css3 盒子模型 box-sizing 值co ...

  4. CSS 高级

    1.CSS 盒模型(Box Model) 所有 HTML 元素都可以看作是盒子,在 CSS 中,“Box Model”这一术语主要是在布局时使用. CSS 盒模型(Box Model)规定了处理元素内 ...

  5. 学习HTML5的第二周

    ---恢复内容开始--- 这是我学习H5的第二周,在本周,我独立完成了一个网站的首页和一个二级页,虽然在做网页的时候我遇到了许多问题,但我自己想办法解决了其中的大部分,只留下了一小部分没有头绪的问题等 ...

  6. H5手机页面剖析

    <!--强制使用webkit内核进行渲染--><meta http-equiv="X-UA-COMPATIBLE" content="IE=edge, ...

  7. 第七十七节，CSS3前缀和rem长度单位

    CSS3前缀和rem长度单位 学习要点: 1.CSS3前缀 2.长度单位rem 本章主要探讨HTML5中CSS在发展中实行标准化的一些问题,重点探讨CSS3中新属性前缀问题和新的单位rem. 一 CS ...

  8. CSS3与页面布局学习总结（四）——页面布局大全

    一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...

  9. CSS3与页面布局学习总结（一）——概要、选择器、特殊性与刻度单位

    web前端开发者最最注的内容是三个:HTML.CSS与JavaScript,他们分别在不同方面发挥自己的作用,HTML实现页面结构,CSS完成页面的表现与风格,JavaScript实现一些客户端的功能 ...

随机推荐

  1. nginx反向代理原理及配置详解

    nginx概述nginx是一款自由的.开源的.高性能的HTTP服务器和反向代理服务器:同时也是一个IMAP.POP3.SMTP代理服务器:nginx可以作为一个HTTP服务器进行网站的发布处理,另外n ...

  2. poj1952 BUY LOW, BUY LOWER[线性DP(统计不重复LIS方案)]

    如题.$N \leqslant 5000$. 感觉自己思路永远都是弯弯绕绕的..即使会做也会被做繁掉..果然还是我太菜了. 递减不爽,先倒序输入算了.第一问做个LIS没什么说的.第二问统计个数,考虑什 ...

  3. 在哪里查看java的jar包版本？

    jar包根目录里的META-INF目录下的MANIFEST.MF文件里一般有会记录版本信息,可以到这个文件里查看 .

  4. 【Wince-DataTable填充ListView】DataTable的数据填充到ListView控件，适用.Net2.0

    在开发WinCE6.0程序的时候,要把DataTable的数据显示到ListView控件上,无法使用绑定, 只能使用循环遍历. 思路:外循环遍历行,内循环遍历列 //DataTable:dt2 //L ...

  5. 树莓派设定笔记（Raspberry Pi 3 B+）

    树莓派默认用户名密码 pi / raspberry 一.启用root用户 设置root用户密码 sudo passwd root 开启root账户 sudo passwd --unlock root ...

  6. pip安装源和虚拟环境的搭建

    一.pip安装源 1.介绍 采用国内源,加速下载模块的速度 常用pip源: 豆瓣:https://pypi.douban.com/simple 阿里:https://mirrors.aliyun.co ...

  7. 论文阅读：FlowBlaze: Stateful Packet Processing in Hardware

    摘要: 尽管可编程NIC可以提供更好的可扩展性以处理不断增长的网络工作量,但为硬件中的有状态网络功能编程提供表达能力却又简单的抽象仍然是一项研究挑战. 我们使用FlowBlaze解决了这个问题,Flo ...

  8. Python实用黑科技——找出最大/最小的n个元素

    需求: 快速的获取一个列表中最大/最小的n个元素. 方法: 最简便的方法是使用heapq模组的两个方法nlargest()和nsmallest(),例如: In [1]: import heapqIn ...

  9. 按下enter触发事件

    原理:按下enter的事件属于键盘事件,我们可以先用下面函数来获取enter的键码(键盘上的按键都有各自的键码),通过这个键码可以来判断按下的是哪个键 document.addEventListene ...

  10. Linux环境下TomCat使用指定JDK的版本

    服务器是web服务器,在上面安装了jdk1.7和jdk1.8.及多个tomcat应用,默认/etc/profile 配置的jdk1.7,大部分tomcat应用使用的也是jdk1.7, 但目前有一个新项 ...