• 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. 复制到剪贴板的JS实现--ZeroClipboard (兼解决IE下兼容问题)

    复制到剪贴板的JS实现--ZeroClipboard (兼解决IE下兼容问题) 相信绝大多数人都遇到过这样的功能实现,“复制”或者“复制到剪贴板”这样的功能.但是由于各大浏览器的实现方案不一样,导致几 ...

  2. ES6 Set和Map

    一.Set遍历方法: set.key() set.values() set.entries() 二.Set例子: var s = new Set(); var arr = [1,1,2,3,6,8,8 ...

  3. Hadoop学习15--编程相关

    1.新版本:mapreduce包 2.job设置: a.JobName便于调试 b.FileInputFormat.addInputPath 添加输入路径,可添加多个:可以是具体文件,还可以是文件夹. ...

  4. CSAPP(前言)

    很久之前就听过有过CSAPP这本书的传闻了,今天终于决定上手这本神作:既然是神作,就要仔细拜读一下,今天看了一下前言部分还真的令人耳目一新,单单是前言部分就让我学习到几个新的知识点: 1.c和Java ...

  5. HTML 事件属性_03

    全局事件属性 HTML 4 的新特性之一是可以使 HTML 事件触发浏览器中的行为,比方说当用户点击某个 HTML 元素时启动一段 JavaScript. 如果你想学习更多关于事件属性,请访问 Jav ...

  6. SQL Server 2008 数据库镜像部署实例之一 数据库准备

    SQL Server 2008 数据库镜像部署实例之一 数据库准备 一.目标 利用Sql Server 2008 enterprise X64,建立异步(高性能)镜像数据库,同时建立见证服务器实现自动 ...

  7. [Tex学习笔记]数学公式再次测试

    \begin{align*}\sum_{n=0}^{\infty}\frac{(n!)^{2}2^{n+1}}{(2n+1)!}&=\sum_{n=0}^{\infty}\int_{0}^{1 ...

  8. iOS Storyboard全解析

    来源:http://iaiai.iteye.com/blog/1493956 Storyboard)是一个能够节省你很多设计手机App界面时间的新特性,下面,为了简明的说明Storyboard的效果, ...

  9. django Q和F查询

    Q查询——对对象的复杂查询F查询——专门取对象中某列值的操作 Q查询1.Q对象(django.db.models.Q)可以对关键字参数进行封装,从而更好地应用多个查询,例如: from django. ...

  10. Android dispatchTouchEvent介绍

    一个最简单的屏幕触摸动作触发了一系列Touch事件:ACTION_DOWN->ACTION_MOVE->ACTION_MOVE->ACTION_MOVE...->ACTION_ ...