搜索
博主信息
博文 40
粉丝 0
评论 1
访问量 43908
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
css基础学习(rem / em /vh/ vw的原理与应用场景)
景云
原创
849人浏览过
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>em</title>
  7. <style>
  8. .btn
  9. {
  10. background-color: aqua;
  11. color:rgb(60, 63, 63);
  12. border: none;
  13. padding: 0.5em 1em;
  14. outline: none;
  15. border-radius: 0.3em;
  16. }
  17. .btn:hover
  18. {
  19. /* 透明度 */
  20. opacity: 0.8;
  21. /* 将鼠标设置为手型 */
  22. cursor: pointer;
  23. /* 阴影效果 */
  24. box-shadow: 0 0 5px red;
  25. /* 延时体现效果 */
  26. transition: 0.2s;
  27. }
  28. /* 改变按钮不同大小可通过改变其字号即可,可通过px定义,也可以用em */
  29. .small
  30. {
  31. font-size: 0.7em;
  32. }
  33. .normal
  34. {
  35. font-size: 1em;
  36. }
  37. .big
  38. {
  39. font-size: 1.5em;
  40. }
  41. </style>
  42. </head>
  43. <body>
  44. <!--
  45. em是用户代理的值,可以响应式的设置盒模型的属性,以达到不同屏幕显示不同大小的目的。
  46. 用户代理默认值为1em,换算为px通常为16px;可通过设置祖先元素字体大小更改em的大小,例如:设置html的font-size:20px,则1em等于20px;
  47. -->
  48. <button class="btn small">button</button>
  49. <button class="btn normal">button</button>
  50. <button class="btn big">button</button>
  51. <!-- rem为固定ban的em,不会随自身和祖先元素的字号变化而变化 -->
  52. <!-- vw为可视窗口的初始包含块宽度的百分之一; -->
  53. <!-- vh为视口的初始化包含块高度的百分之一; -->
  54. <!-- 初始化包含块可简单理解为html -->
  55. <!-- 宽高以vmin、vmin为单位时,将以较小尺寸为主,以vmax/vmax为单位时将以较大尺寸为主 -->
  56. </body>
  57. </html>
批改老师:天蓬老师天蓬老师

批改状态:合格

老师批语:
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学