CSS中的那点事儿（一）--- CSS中的单位1

最新推荐文章于 2024-08-24 03:47:49 发布

转载最新推荐文章于 2024-08-24 03:47:49 发布 · 63 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lanse-yan/p/4095595.html

本文详细解析了CSS中常用单位%、px、em的应用场景与计算原理，包括这些单位在不同属性如width、height、padding、margin及font-size中的表现。

单位主要用在规定元素的数值性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作为字体单位，可以使页面字体得到恰当地缩放，效果也会好很多。

转载于:https://www.cnblogs.com/lanse-yan/p/4095595.html