（中級）快捷樣式屬性

李鬆峰發表於2012-11-20

本文節選自《CSS設計指南（第3版》。
第1章完全免費試讀，電子書線上熱賣中：http://www.ituring.com.cn/book/1111

以下內容節選自第3章。

快捷樣式屬性

CSS為邊框、內邊距和外邊距分別規定了快捷屬性，讓你通過一條宣告就可以完成設定。在每個快捷宣告中，屬性值的順序都是上、右、下、左。想象一下順時針旋轉就記住了。舉個例子吧，如果要設定盒子的外邊距，不用快捷屬性就得這樣寫：

{margin-top:5px; margin-right:10px; margin-bottom:12px; margin-left:8px;}

而使用快捷屬性，則可以簡寫為這樣：

{margin:5px 10px 12px 8px;}

注意，4個值之間有空格，但不能是其他分隔符（比如逗號之類的）。甚至，你都不用把4值全都寫出來——如果哪個值沒有寫，那就使用對邊的值。

{margin:12px 10px 6px;}

對這個例子來說，由於沒有寫最後一個值（左邊的值），所以左邊就會使用右邊的值，即10px。而在下面的例子中：

{margin:12px 10px;}

只寫了兩個值，上和右，因此缺少的下和左就會被設定為12px和10px。最後，如果你只寫一個值：

{margin:12px;}

那麼4個邊都取這個值。使用這種快捷屬性，不能繞開上和右，只給下和左設定值，即使上和右都是零也不行。繞不開怎麼辦？如果它們真是零的話，那就寫0唄，比如：

{margin:0 0 2px 4px;}

另外，每個盒子的屬性也分三種粒度，到底選擇哪個粒度的屬性，要看你想把選擇哪條邊，以及那條邊的哪個屬性。這三種粒度從一般到特殊分別是舉例如下。

  1. 全部3個屬性，全部4條邊
    {border:2px dashed red;}
  2. 1個屬性，全部4條邊
    {border-style:dashed;}
  3. 1個屬性，1條邊
    {border-left-style:dashed;}

混合使用這三種粒度的快捷屬性達成設計目標是很常見的。比如說吧，我想為盒子的上邊和下邊新增4畫素寬的紅色邊框，為左邊新增1畫素寬的紅色邊框，而右邊沒有邊框。可以這樣寫：

{border:4px solid red;}  /* 先給4條邊設定相同的樣式 */    
{border-left-width:1px;} /* 修改左邊框寬度 */  
{border-right:none;}     /* 移除右邊框 */

類似地，其他屬性也都有這三級粒度，例如padding和border-radius等。

相關文章