CSS中的那點事兒（一）--- CSS中的單位1

時間 2019-11-08

標籤 css 那點事兒單位欄目 CSS 简体版

原文原文鏈接

單位主要用在規定元素的數值性css屬性的，這裏主要討論應用的比較多的是width height padding margin font-size，而單位中應用最普遍就是%、px、emcss

百分比

百分比，關鍵就是參考的父元素，在正常流和浮動時，就是包裹着當前元素的元素；在相對定位、絕對定位時，就是當前元素相對於的定位的元素，其實這個很好理解，在這種狀況下元素框從文檔流徹底刪除，和原來的文檔流沒有關係，其包含塊多是文檔中的另外一個元素或者是初始包含塊。下文中提到的父元素都是基於這些知識上，所以再也不強調。嚴格意義上來講，百分比不能算是一種單位，能夠理解爲包含數值和單位的數據，無論父元素的該屬性是什麼單位，都是將數值*百分比+單位計算出child的屬性值。html

html代碼以下：web

<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）以下字體

圖1spa

圖2code

圖3htm

圖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設置成百分比，是相對於父元素的內容高度。blog

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。