知識點 2017年9月25日

內邊距的百分比數值

百分數值是相對於其父元素的 width 計算的,這一點與外邊距一樣。所以,如果父元素的 width 改變,它們也會改變。

下面這條規則把段落的內邊距設置爲父元素 width 的 10%:

p {padding: 10%;}

例如:如果一個段落的父元素是 div 元素,那麼它的內邊距要根據 div 的 width 計算:

<div style="width: 200px;">
<p>This paragragh is contained within a DIV that has a width of 200 pixels.</p>
</div>

注意:上下內邊距與左右內邊距一致;即上下內邊距的百分數會相對於父元素寬度設置,而不是相對於高度

邊框樣式

如果希望顯示某種邊框,就必須設置邊框樣式,比如 solid 或 outset。
如果把 border-style 設置爲 none,即使自己設置了邊框的寬高屬性,也會自動變爲0
由於 border-style 的默認值是 none,如果沒有聲明樣式,就相當於 border-style: none。因此,如果希望邊框出現,就必須聲明一個邊框樣式。

值複製

有時,我們會輸入一些重複的值:

p {margin: 0.5em 1em 0.5em 1em;}

通過值複製,您可以不必重複地鍵入這對數字。上面的規則與下面的規則是等價的:

p {margin: 0.5em 1em;}

這兩個值可以取代前面 4 個值。這是如何做到的呢?CSS 定義了一些規則,允許爲外邊距指定少於 4 個值。規則如下:

  • 如果缺少左外邊距的值,則使用右外邊距的值。
  • 如果缺少下外邊距的值,則使用上外邊距的值。
  • 如果缺少右外邊距的值,則使用上外邊距的值。

下圖提供了更直觀的方法來了解這一點:

這裏寫圖片描述

換句話說,如果爲外邊距指定了 3 個值,則第 4 個值(即左外邊距)會從第 2 個值(右外邊距)複製得到。如果給定了兩個值,第 4 個值會從第 2 個值複製得到,第 3 個值(下外邊距)會從第 1 個值(上外邊距)複製得到。最後一個情況,如果只給定一個值,那麼其他 3 個外邊距都由這個值(上外邊距)複製得到。

例如:

h1 {margin: 0.25em 1em 0.5em;}  /* 等價於 0.25em 1em 0.5em 1em */
h2 {margin: 0.5em 1em;}     /* 等價於 0.5em 1em 0.5em 1em */
p {margin: 1px;}            /* 等價於 1px 1px 1px 1px */
  • 要使文字在盒子中垂直居中,可以設置文字的line-height值與盒子高度相等
發佈了28 篇原創文章 · 獲贊 18 · 訪問量 2萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章