热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

CSS单位——px,em,rem...

1.px#px(像素)是一个虚拟长度单位,是计算机系统的数字化图像长度单位#特点:#1.px是一种绝对单位

1. px

        # px(像素)是一个虚拟长度单位,是计算机系统的数字化图像长度单位

        # 特点:

                #1. px是一种绝对单位(absolute units)。其他的绝对单位有:mm(毫米),cm(厘米),in(英寸),pt(点),pc(十二点活字)

                #2. IE无法调整使用px作为单位的字体大小(缩放)

                #3. 国外大部分网站能够调整的原因在于使用了相对单位em和rem

                #4. Firefox可以调整px,em和rem,但大部分中国网民使用的还是IE内核或浏览器

2. em

        # em指字体高,浏览器的默认字体高是16px。所以未经调整的浏览器符合:1em=16px

        # 特点:

                #1. em是一种相对单位,它相对于父元素的字体大小

                #2. 需要注意标签嵌套情况下的字体大小问题,所以不适用于布局。(如父标签font-size:1.2em; 字标签font-size:1.2em;那么最终字体为1.2*1.2=1.44)

                #3. 当设置为1em时,表示当前元素的字体大小与父元素相同。

3. rem

        # rem(全称root em)是CSS3新增的一个相对单位

                #1. rem是一种相对单位,它相对于根元素(html标签)的字体大小

                #2. rem可以避免em因为标签嵌套产生的字体大小问题

                #3. IE8及以下浏览器不支持rem

                #4. 当使用rem来设置字体大小时,就必须要设置html标签的字体大小,否则按照默认1rem=16px;

                #5. rem本质是等比缩放,一般是基于宽度,通常用于移动端页面的布局

4. vh和vw

        # vh/vw单位类似于百分比单位,也是一种相对单位

        # 特点:

                #1. 百分比单位的布局依赖于父级的宽高,而vh/vw则是相对于视口的宽高

                #2. 适用于移动端,支持度基本全支持

5. vmin和vmax

        # vmin是指vh和vw中较小的那一个的大小,vmax是指vh和vw中较大的那一个的大小

        # 特点:

                #1. 使用vmin/vmax单位时,我们并不关心宽高,而是按照大小来区分

                #2. 在移动端用的较多

6. ex和ch

        # 使用的频率不高。ex被定义为当前字体下的字符0(数字)的高度,ch被定义为当前字体下的字符x(小写)的宽度

        # 特点:

                #1. ch适用于等宽字体,可以设置一个盒子能够容纳多少个字符

                #2. ex通常用于排版微调

                #3. 由于中文和英文的字体宽度不一样,所以ch并不适用于布局

                #4. ex的应用场景基本都可以用em来实现









推荐阅读
  • CSS|网格-行-结束属性原文:https://www.gee ... [详细]
  • Voicewo在线语音识别转换jQuery插件的特点和示例
    本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件,该插件具有快速、架构、风格、扩展和兼容等特点,适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]
  • css元素可拖动,如何使用CSS禁止元素拖拽?
    一、用户行为三剑客以下3个CSS属性:user-select属性可以设置是否允许用户选择页面中的图文内容;user-modify属性可以设置是否允许输入 ... [详细]
  • 本文介绍了lua语言中闭包的特性及其在模式匹配、日期处理、编译和模块化等方面的应用。lua中的闭包是严格遵循词法定界的第一类值,函数可以作为变量自由传递,也可以作为参数传递给其他函数。这些特性使得lua语言具有极大的灵活性,为程序开发带来了便利。 ... [详细]
  • VScode格式化文档换行或不换行的设置方法
    本文介绍了在VScode中设置格式化文档换行或不换行的方法,包括使用插件和修改settings.json文件的内容。详细步骤为:找到settings.json文件,将其中的代码替换为指定的代码。 ... [详细]
  • 《数据结构》学习笔记3——串匹配算法性能评估
    本文主要讨论串匹配算法的性能评估,包括模式匹配、字符种类数量、算法复杂度等内容。通过借助C++中的头文件和库,可以实现对串的匹配操作。其中蛮力算法的复杂度为O(m*n),通过随机取出长度为m的子串作为模式P,在文本T中进行匹配,统计平均复杂度。对于成功和失败的匹配分别进行测试,分析其平均复杂度。详情请参考相关学习资源。 ... [详细]
  • 动态规划算法的基本步骤及最长递增子序列问题详解
    本文详细介绍了动态规划算法的基本步骤,包括划分阶段、选择状态、决策和状态转移方程,并以最长递增子序列问题为例进行了详细解析。动态规划算法的有效性依赖于问题本身所具有的最优子结构性质和子问题重叠性质。通过将子问题的解保存在一个表中,在以后尽可能多地利用这些子问题的解,从而提高算法的效率。 ... [详细]
  • Java验证码——kaptcha的使用配置及样式
    本文介绍了如何使用kaptcha库来实现Java验证码的配置和样式设置,包括pom.xml的依赖配置和web.xml中servlet的配置。 ... [详细]
  • 高质量SQL书写的30条建议
    本文提供了30条关于优化SQL的建议,包括避免使用select *,使用具体字段,以及使用limit 1等。这些建议是基于实际开发经验总结出来的,旨在帮助读者优化SQL查询。 ... [详细]
  • 本文介绍了指针的概念以及在函数调用时使用指针作为参数的情况。指针存放的是变量的地址,通过指针可以修改指针所指的变量的值。然而,如果想要修改指针的指向,就需要使用指针的引用。文章还通过一个简单的示例代码解释了指针的引用的使用方法,并思考了在修改指针的指向后,取指针的输出结果。 ... [详细]
  • 本文介绍了网页播放视频的三种实现方式,分别是使用html5的video标签、使用flash来播放以及使用object标签。其中,推荐使用html5的video标签来简单播放视频,但有些老的浏览器不支持html5。另外,还可以使用flash来播放视频,需要使用object标签。 ... [详细]
  • Apache Shiro 身份验证绕过漏洞 (CVE202011989) 详细解析及防范措施
    本文详细解析了Apache Shiro 身份验证绕过漏洞 (CVE202011989) 的原理和影响,并提供了相应的防范措施。Apache Shiro 是一个强大且易用的Java安全框架,常用于执行身份验证、授权、密码和会话管理。在Apache Shiro 1.5.3之前的版本中,与Spring控制器一起使用时,存在特制请求可能导致身份验证绕过的漏洞。本文还介绍了该漏洞的具体细节,并给出了防范该漏洞的建议措施。 ... [详细]
  • css,背景,位置,y,background, ... [详细]
  • (PC+WAP)织梦模板户外设备类网站
    模板介绍:织梦内核开发的模板,该模板属于户外设备、宣传栏类企业都可使用,这款模板使用范围极广,不仅仅局限于一类型的企业&#x ... [详细]
  • pyecharts 介绍
    一、pyecharts介绍ECharts,一个使用JavaScript实现的开源可视化库,可以流畅的运行在PC和移动设备上,兼容当前绝大部 ... [详细]
author-avatar
个阖家团圆
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有