登录  /  注册
博主信息
博文 28
粉丝 0
评论 0
访问量 28589
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
CSS单位的使用场景和比较
G
原创
1042人浏览过

CSS单位

1.单位有那些

  1. em
  2. rem
  3. vw
  4. vh
  5. vmin
  6. vmax
  7. px
  8. ……

2.单位细说

  • em

em是什么:默认是浏览器/用户代理的字号的引用
特性:继承性
从哪继承:
1.浏览器/用户代理字号
2.父级元素
3.当前元素
用在哪:用在依赖字号的属性的上,paddingmarginwidthheight….
注意:在嵌套时,要小心使用em设置font-size

  1. .box {
  2. /* em的应用场景:通常在width height padding margin border-radius等可以自适应调整的地方 */
  3. box-sizing: border-box;
  4. width: 10em;
  5. height: 10em;
  6. background-color: aqua;
  7. padding: 1.5em 1.8em;
  8. margin: 1em 1.2em;
  9. /* 设置一个边框,但是边框要用px绝对单位来做单位
  10. 为什么边框要用绝对单位呢?
  11. 你这样想,如果一个自适应页面的边框会根据页面自动调
  12. 整大小,那这个页面是不是会变的很那看,边框线是不是会变的特别粗 */
  13. border: 2px solid green;
  14. }
  • px

对于只需要适配少部分移动设备,分辨率对页面影响不大时,使用px
最常在border上使用

border: 1px solid red;

  • rem

也称根em,只修改根元素:root,就可以调整字体大小,所以浏览器均支持rem,可以避免字体大小逐层复合的连锁反应。使用时 可以和px两者都使用。避免有些用户不兼容。

  1. :root{
  2. font-size:1em;
  3. }
  4. .box{
  5. /*这里引用根元素的字号大小来作为rem 计算的一个单位,如根元素1em=16px,这里就是1.5*16=24px*/
  6. font-size:1.5rem;
  7. }

总结:
1.em通常用于padding margin border-radius height width 等自适应调整能够达到比较好的效果的地方
2.rem引用的是根元素:root的font-size的字号大小,而em可以是继承父级元素的字体大小,也可以是继承
浏览器默认字号大小,还可以是继承当前元素的字号大小
3.px绝对单位通常用于border等不较适用绝对单位的地方
4.px是绝对单位,不能根据当前页面来自适应调整,而em rem可以

  • vh vw vmin vmax

    它们是什么:也是相对单位,但是不是针对font-size属性来设置和继承,而是叫视口
    单位:1vh=视口高度的1% 1vw=视口宽度的1%
    vhview height 视口”初始包含块”高度的 1 / 100
    vwview width 视口”初始包含块”宽度的 1 / 100
    vminvmax:选择视口宽或高中较小或较大的一个值
    视口:文档在浏览器中的可视区域,浏览器窗口中用来显示文档的可视区域, 不包括地址栏,菜单,工具条,状态栏,控制台。

案例展示

  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>vw 和 vh制作三个色块</title>
  7. </head>
  8. <style>
  9. .box1 {
  10. /* 色块1 */
  11. width: 100vw;
  12. height: 50vh;
  13. background-color: aqua;
  14. }
  15. .box2 {
  16. width: 100vw;
  17. height: 30vh;
  18. background-color: blueviolet;
  19. }
  20. .box3 {
  21. width: 100vw;
  22. height: 20vh;
  23. background-color: blanchedalmond;
  24. }
  25. </style>
  26. <body>
  27. <div class="box1">视口1</div>
  28. <div class="box2">视口2</div>
  29. <div class="box3">视口3</div>
  30. </body>
  31. </html>

效果展示:

非手机端自适应调整:

手机端,自适应调整:

vminvmax实战分析:

设置一个正方形的容器,确保在横屏和竖屏都能完美的显示成一个正方形

  • 想要设置一个正方形,如果用px可以实现。
    width:200px;height:200px;
  • 但是如果是用vw vh 就不能实现。
    width:50vw;height:50vh;

所有vmin和vmax就能派上用场了。

  1. /*用最小的一条边来设置一个正方形*/
  2. width:50vmin;
  3. height:50vmin;

  1. /*用最大的一条边(宽or高)来设置一个正方形*/
  2. /*最后该正方形会比利用最小值设置的要大*/
  3. width:50vmax;
  4. height:50vmax;

批改老师:天蓬老师天蓬老师

批改状态:合格

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

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

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