单位主要用在规定元素的数值性css属性的，这里主要讨论应用的比较多的是width height  padding margin font-size，而单位中应用最广泛就是%、px、em

百分比

百分比，关键就是参考的父元素，在正常流和浮动时，就是包裹着当前元素的元素；在相对定位、绝对定位时，就是当前元素相对于的定位的元素，其实这个很好理解，在这种情况下元素框从文档流完全删除，和原来的文档流没有关系，其包含块可能是文档中的另一个元素或者是初始包含块。下文中提到的父元素都是基于这些知识上，因此不再强调。严格意义上来说，百分比不能算是一种单位，可以理解为包含数值和单位的数据，不管父元素的该属性是什么单位，都是将数值*百分比+单位计算出child的属性值。

html代码如下：

<body>

  <div class="container">

    <div class="child"></div>

  </div>

</body>

css代码如下：

.container{

   width: 800px;

   height: 400px;

   padding: 10px;

   background-color: #228F45;

 }

.child{

   width: 80%;

   height: 80%;

   background-color: #D5DED8;

 }
width height

1.border-sizing为默认值content-box时，container（图1）与child的box model（图2）如下


图1


图2


图3


图4

container的内容宽度和高度为800、400,child的width=800*80%=640,heigth=400*80%=320,在这种情况下，container（图3）与      child的box model（图4）如上，由于设置box-sizing为border-box，所以container的内容宽度和高度分别为780、380，child的width=780*80%,height=380*80%;由此可见,元素的height或width设置成百分比，是相对于父元素的内容高度。

padding和margin

padding和margin的值为百分比是相对于父元素的width计算的，不管是padding-left,还是padding-top。将.container中添加padding:10%,child 的box model如下图


图5

padding = width*800,这是在box-sizing为默认的情况下计算的。margin同理。

font-size

设置container的font-size : 20px,.child的font-size：80%，则浏览器计算出来的结果为child 的font-size为16px.

em

em是相对单位长度，官方是这样描述的：相对于当前对象内文体的字体尺寸。官方说得比较含糊，但可以明确的是跟字体尺寸相关，具体到css属性就是font-size。

在正常情况下，浏览器的默认字体大小为16px(排除修改了浏览器的默认设置的)。所以在例子中，对于container的包含块body来说，由于没有设置body的font-size，因此body的font-size为16px,等同于1em，body的子元素如果没有设置font-size的情况下，都默认为            1em=16px来计算。

还是用上面的html做例子来说明，css代码如下：

.container{

      width: 20em;

      height: 10em;

      padding: 10px;

      background-color: #228F45;

}

.child{

      width: 10em;

      height: 5em;

      background-color: #D5DED8;

 }

查看container (图6)和 child(图7)的盒模型如下


图6


图7


图8


图9

container： width=20*16,height=10*16.child同理。这种情况比较简单。现在我们在.container中添加font-size:1.5em,child中添加font-size: 0.8em。body中还是1em=16px，container的font-size=16*1.5=24px，child的font-size=24*0.8=19.2px，所以在container一个字的宽度为24px, 即1em=24px，相对应地计算出宽和高为480*240，在child一个字的宽度为19.2px，即1em=19.2px，相对应地计算出宽和高为192*96。container (图8)和 child(图9)的盒模型见上方。以上可得知em为单位的换算会继承父元素，有累积效果。padding和margin的计算方式同width、height。

px

px是相对长度单位，指屏幕上的一个像素点，而每英寸的像素是dpi,dpi值越高越清晰。width、height、padding、margin、font-size属性值用这个为单位没有什么特殊的，目前在web上使用的比较广泛。其他几种单位在browser上也是转换成px来表现的。

总结

em和百分比比较类似，都是相对于父元素，有累积效果，em与px的换算并不是固定的。IE无法调整使用px为单位的字体大小，因此对于响应式变得如此流行的今天，当web应用移植到手机上时，显得不太合适。使用em作为字体单位，可以使页面字体得到恰当地缩放，效果也会好很多。

CSS中的那点事儿（一）--- CSS中的单位1的更多相关文章

  1. css样式布局中position的那些事儿

    哎,页面布局及设计开发.对于一个一直从事后台开发来说屌丝来说,确实是件非常费时.费力,非常艰难的一件事. 今晚是想实现把多张重叠在一起.或是标记一张图片中不同的位置然后赋以超链接.花了一晚上的时间,才 ...

  2. iOS之在webView中引入本地html,image,js,css文件的方法 - sky//////////////////////////////////////ZZZZZZZZZZZZZZZ

    iOS之在webView中引入本地html,image,js,css文件的方法   2014-12-08 20:00:16CSDN-sky_2016-点击数:10292     项目需求 最近开发的项 ...

  3. Web开发中20个很有用的CSS库

    来源: 微信公众号文章 在过去的几年中,CSS已经成为一大部分开发者和设计者的最爱,因为它提供了一系列功能和特性.每个月都有无数个围绕CSS的工具被开发者发布以简化WEB开发.像CSS库,框架,应用这 ...

  4. Web 开发中 20 个很有用的 CSS 库

    转自:http://www.oschina.net/translate/css-libraries-for-developers 在过去的几年中,CSS已经成为一大部分开发者和设计者的最爱,因为它提供 ...

  5. jQuery中添加/改变/移除改变CSS样式例子

    在jquery中对于div样式操作我们会使用到CSS() removeClass() addClass()方法来操作了,下面我们就整理了几个例子大家一起来看看吧.     CSS()方法改变CSS样式 ...

  6. css padding在ie7、ie6、firefox中的兼容问题

    padding 简写属性在一个声明中设置所有内边距属性. 说明这个简写属性设置元素所有内边距的宽度,或者设置各边上内边距的宽度.行内非替换元素上设置的内边距不会影响行高计算:因此,如果一个元素既有内边 ...

  7. CSS知识总结之设计模式（持续学习中）

    OOCSS 参考:http://coding.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss  ...

  8. 文字在div中水平和垂直居中的的css样式

    文字在div中水平和垂直居中的的css样式 text-align:center; /*水平居中*/ line-height: 20px; /*行距设为与div高度一致*/ 示例如下: HTML元素 & ...

  9. 【CSS】思考和再学习——关于CSS中浮动和定位对元素宽度/外边距/其他元素所占空间的影响

      一.width:auto和width:100%的区别   1.width:100%的作用是占满它的参考元素的宽度.(一般情况下参考元素 == 父级元素,这里写成参考元素而不是父级元素,在下面我会再 ...

随机推荐

  1. 【单调队列+二分查找】bzoj 1012: [JSOI2008]最大数maxnumber

    [题意] 维护一个单调递减的q数组,用id数组记录q数组的每个下标对应在原数组的位置,那么id数组一定有单调性(q数组中越靠后,原数组中也靠后),然后二分查找这个数 [AC] #include< ...

  2. 如何让Gridview在没有数据的时候显示表头[没有使用SqlDataSource控件时]

    原文发布时间为:2008-08-03 -- 来源于本人的百度文章 [由搬家工具导入] 要看全文请点击http://blog.csdn.net/windok2004/archive/2007/10/28 ...

  3. bash变量类型详解

    本地变量:作用于当前shell,对当前shell之外的其他shell进程和当前shell子进程均无效. 本地变量赋值为 name='value' value可以是字符串或者是变量,引用变量使用${na ...

  4. Codeforces 451 E Devu and Flowers

    Discription Devu wants to decorate his garden with flowers. He has purchased n boxes, where the i-th ...

  5. Ubuntu官方Wiki教程资源

    前言:通常学习一样新知识时,最快的方式是通过搜索引擎然后以最快的方式拿枪上战场,如果接下来还一直依赖搜索引擎去打,那么你会发现自己永远都在打游击:那么如果要解决这个问题,必须要学会系统的学习,只有连贯 ...

  6. 游戏server主程白皮书-序言

    在从事游戏开发的6年时间里面.涉及的内容包含运营平台.GM工具.MMORPG.FPS游戏. 游戏都已经上线而且稳定执行.单server的承载量在1万-5万之间.对于这种成绩我自己还是比較惬意了.期间得 ...

  7. HDU - 4630 No Pain No Game (线段树 + 离线处理)

    id=45786" style="color:blue; text-decoration:none">HDU - 4630 id=45786" style ...

  8. Scala学习笔记 & 一些不错的学习材料 & 函数编程的历史八卦

    参考这篇文章: http://www.ibm.com/developerworks/cn/java/j-lo-funinscala1/ 这也是一个系列 严格意义上的编程范式分为:命令式编程(Imper ...

  9. VC++_错误 无法打开包括文件“glglut.h” No such file or directory 怎么办

    在网上看到类似的问题,查找资料找到了解决方案,现整理如下,有些更改,好让自己多些印象,附原文网址:http://blog.csdn.net/bigloomy/article/details/62265 ...

  10. BeagleBone Black Industrial 进阶设置（性能优化以及延长板载eMMC存储寿命）

    前言 原创文章,转载引用务必注明链接.水平有限,欢迎指正. 本文使用markdown写成,为获得更好的阅读体验,推荐访问我的博客原文: http://www.omoikane.cn/2016/09/1 ...