1.px

像素,绝对单位长度,可设定固定的长度大小。(像素是相对于显示器屏幕分辨率而言)

所有浏览器都显示为一样大小。

eg:

  html:

    <p>这是一段正常段落</p>
    <p class="change">这是一个设置了大小为30像素大小的段落</p>

  css:

    p.change{font-size:30px}

效果如图:

2.em

值不固定,相对单位长度,会继承父级元素的字体大小。

em是以字为单位,1em是占一个字符的宽度,大小随着字符的字号而变化。

eg:

  html:

    <p>这是一段正常段落</p>

    <p class="change">这是一个设置了大小为1.3em的段落</p>

  css:

    p.change {font-size:1.3em;}

效果如图:

3.rem

rem是CSS3新增的一个相对单位(root em,根em)

这个单位与em的区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。

通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。

4.fr

剩余空间分配数

fr单位被用于在一系列长度值中分配剩余空间,如果多个已指定了多个部分,则剩下的空间根据各自的数字按比例分配。

----关于css中常见单位----的更多相关文章

  1. css中关于单位的一些问题

    Css中关于单位的一些问题 相对字体长度: Em:Em 是一个相对单位.起初排版度量时是基于当前字体大写字母”M”的尺寸的.当改变font-family时,它的尺寸不会发生改变,但在改变font-si ...

  2. css3系列-2.css中常见的样式属性和值

    css3系列-2.css中常见的样式属性和值 继续上一篇文章的继续了解css的基础知识,关注我微信公众号:全栈学习笔记 css中常见的样式属性和值 字体与颜色 背景属性 文本属性 边框属性 内外边距 ...

  3. div+css中常见的浏览器兼容性处理-兼容不同浏览器

    在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! div+cs ...

  4. 一起来看看css中的单位

    一起来看看css中的单位 由于一直以来对于css中的百分比单位究竟是相对于谁的比例,这个问题不是很了解,所以就专门找资料看了一下. <div class="container w500 ...

  5. css中常见几种float方式以及倒计时(刷新页面不清)

    css中常见几种float方式 http://jingyan.baidu.com/article/72ee561a670269e16138dfd5.html <script type=" ...

  6. CSS中常见的布局

    一.css中常见的布局有哪些? (1)两列布局 (2)三列布局 (3)弹性布局 (4)圣杯布局 (5)双飞翼布局 二.具体实现  (1)两列布局 https://www.cnblogs.com/qin ...

  7. CSS中的单位px、em、rem、%、vw、vh、vm

    px 相对长度单位,像素px 是相对于显示器屏幕分辨率而言的.是我们网页设计常用的单位,也是基本单位. 通过 px 可以设置固定的布局或者元素大小,缺点是没有弹性.用 px 设置字体大小时,比较稳定和 ...

  8. CSS中常见的长度单位

    原文地址:https://segmentfault.com/a/1190000008934791?utm_source=tuicool&utm_medium=referral px - 像素 ...

  9. 关于CSS中的单位px、em、rem

    首先,px.em.rem都是相对单位: px(pixel像素)是相对于显示器屏幕分辨率的,IE无法调整那些使用px作为单位的字体大小: em是相对于当前对象内文本字体的尺寸,如当前对行内文本的字体尺寸 ...

随机推荐

  1. Spark 性能调优-内存设置-GC设置

    http://mt.sohu.com/20150604/n414449770.shtml http://my.oschina.net/mkh/blog/330386 http://itindex.ne ...

  2. nginx的启动,停止和重启

    启动 启动代码格式:nginx安装目录地址 -c nginx配置文件地址 例如: [root@LinuxServer sbin]# /usr/local/nginx/sbin/nginx -c /us ...

  3. rest api方式实现对文档库的管理

    写在前面 刚入职一家新公司,在对接app的时候需要获取到某公司的sharepoint上面的文档库,获取文档库列表,团队文档库中的文件和文件夹列表,个人文档库中的文件文件夹列表,及在app端进入文件夹的 ...

  4. win7 80端口被iis占用

    下载iis管理器,打开,关闭80端口占用

  5. H5兼容ie做法

    IE浏览器支持新的标签:可以在使用新标签之前用javascript创建一个虚假的标签,这样就可以识别了.如<article>标签,在使用前,创建一个虚假的<article>标签 ...

  6. GC(垃圾处理机制)面试题

    1: 详细解释Java中垃圾收集的主要流程.  垃圾收集主要有两种形式:手工.自动 自动会不定期进行回收,以释放无用的空间 手工调用的是System类中的gc()方法,此方法实际上调用的是Runtim ...

  7. android 开发 View _8_ 动态图片自定义View

    转载地址:https://blog.csdn.net/mengks1987/article/details/77770922 先来看下效果: 是不是有一种熟悉感,其实这种效果使用序列帧动画也是可以实现 ...

  8. form转化json

    ;(function($){ /** * 依赖jquery-1.4.2 * 依赖jquery.json-2.2,参考http://code.google.com/p/jquery-json/ * 用于 ...

  9. kettle实现多表同步

    本样例实现源库的所有表到目标库的同步sqlserver=>mysql(目标表存在表结构则同步),总调度如下: 由于复制记录到结果保存了多个表名,存在多个值,在高级选择对每个输入行执行一次进行循环 ...

  10. __getattr__ __delattr__ __setattr__ __getattribute__使用(重写python提供的错误信息)

    自己定义了这些attr 查找删除设置就会触发自己定义的逻辑,如果不重新,pyton会提供自己报错信息class Room: def __init__(self,name): self.name = n ...