• px像素(Pixel,像素px是相对于显示器屏幕分辨率而言的。
  • em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于父级元素字体尺寸(若父级元素未指定font-size,则一层一层的往上找;若找不到,则相对于浏览器的默认字体尺寸)。
    对应的html代码   <div><p></p></div>
    若设置样式 div{font-size:16px;} p{font-size:1em},那么p元素的font-size为16px。
  • rem是CSS3新增的一个相对单位(root em),根em。 使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。

    可以设置html,body{font-size=62.5%},那么1rem=10px,方便使用。

  • %百分比,是相对于父元素的比列。

    我们在设置width的时候,经常会用到%。如{width:90%;margin:0 auto} 

css 单位-px、em、rem、百分比的更多相关文章

  1. css单位px,em,rem区别

    在css中单位长度用的最多的是px.em.rem,这三个的区别是: px是固定的像素,一旦设置了就无法因为适应页面大小而改变. em和rem相对于px更具有灵活性,他们是相对长度单位,意思是长度不是定 ...

  2. css 单位 px em rem

    http://www.cnblogs.com/leejersey/p/3662612.html

  3. css大小单位px em rem的转换和详解

    css大小单位px em rem的转换和详解 PX特点1. IE无法调整那些使用px作为单位的字体大小:2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位:3. Firefox能 ...

  4. css中px,em,rem,rpx的区别

    今天看到一个面试题为 px,em的区别,为了更好地让读者区分css的长度单位,我总结下css中常用的长度单位: px,em,rem,rpx 像素px是我们在定义CSS中经常用到的尺寸大小单位,而em在 ...

  5. 详细讲解css单位px,em和rem的含义以及它们之间的区别

    一.首先介绍一下px px就是css中最基本的长度单位了,用px做单位基本上没什么问题,可以做到让页面按套路精确的展现! 可但是!但可是!如果全篇用px布局会暗藏一个蛋疼的问题,就是当用户和Ctrl滚 ...

  6. css里px em rem特点(转)

    1.px特点: 1.IE无法调整px作为单位的字体大小: 2.Firefox能够调整px.em和rem. px是像素,是相对长度单位,是相对于显示器屏幕分辨率而言的. 2.em特点: 1.em的值并不 ...

  7. CSS尺寸单位 % px em rem 详解

    在CSS中,尺寸单位分为两类:相对长度单位和绝对长度单位.相对长度单位按照不同的参考元素,又可以分为字体相对单位和视窗相对单位.字体相对单位有:em.ex.ch.rem:视窗相对单位有:vw.vh.v ...

  8. 搞清css的单位 px,em,rem的区别

    前言:现在上大街一眼望去,基本上90%的人都拿着手机,走路,逛街,吃东西都不停着,所以对于我们这种前端开发的程序猿来说,让网页适应于移动端可以说是必须要满足的.所以最近也是一直在学习和实践.然后就接触 ...

  9. Css单位px,rem,em,vw,vh的区别

    px px就是pixel像素的缩写,相对长度单位,网页设计常用的基本单位.像素px是相对于显示器屏幕分辨率而言的 em em是相对长度单位.相对于当前对象内文本的字体尺寸(参考物是父元素的font-s ...

  10. css中px em rem vw vh vmax vmin等单位的区别--转载

    px:绝对单位,页面按精确像素展示 em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值. rem:相对 ...

随机推荐

  1. Jquery数组操作

    jQuery的数组处理,便捷,功能齐全. 最近的项目中用到的比较多,深感实用,一步到位的封装了很多原生js数组不能企及的功能. 最近时间紧迫,今天抽了些时间回过头来看 jQuery中文文档 中对数组的 ...

  2. Difference between applicationContext.xml and spring-servlet.xml in Spring Framework

    Question: Are applicationContext.xml and spring-servlet.xml related anyhow in Spring Framework? Will ...

  3. ubuntu14升级到15后遇到的问题

    ubuntu14的unity坏了,于是就找了个镜像升级到15.但是升级完android开发环境出了点问题.. 1:Picked up JAVA_TOOL_OPTIONS: -javaagent:/us ...

  4. mysql 联合索引(转)

    http://blog.csdn.net/lmh12506/article/details/8879916 mysql 联合索引详解 联合索引又叫复合索引.对于复合索引:Mysql从左到右的使用索引中 ...

  5. Mono addin 学习笔记 4 再论数据扩展点(Data only extension point)

    1. Attribute声明方式 定义扩展属性 [AttributeUsage(AttributeTargets.Assembly, AllowMultiple= true)] public clas ...

  6. Js_Ajax_用户名检测

    输入"root",OK:输入其它,Error ajax.jsp var xhr; function createXhr() { if (window.XMLHttpRequest) ...

  7. 用wireshark抓包分析TCP三次握手、四次挥手以及TCP实现可靠传输的机制

    关于TCP三次握手和四次挥手大家都在<计算机网络>课程里学过,还记得当时高超老师耐心地讲解.大学里我遇到的最好的老师大概就是这位了,虽然他只给我讲过<java程序设计>和< ...

  8. 树莓派_360wifi2_佳能MP236打印机

    入手树莓派后一直没时间弄,设想用360wifi做无线网卡,也一直不得解,今天成功写下经验 本人刷的是官方系统,版本为3.12.28,首先更新系统内核,参考以下网址: http://groenholdt ...

  9. CodeBlocks配置pthread环境

    参考资料:MinGW配置pthread环境 按[参考资料]里说的[下载资源]后,将libpthreadGC2.a放到codeBlocks安装目录下的MinGW\lib目录下,然后将pthread.h ...

  10. VBS操作剪切板

    '设置剪切板的内容 Dim Form, TextBox Set Form = CreateObject("Forms.Form.1") Set TextBox = Form.Con ...