CSS模型框學習筆記

最後更新：2018-12-07 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

CSS模型框概述：CSS框模型規定了元素框處理元素內容、內邊距、邊框、外邊距的方式；

圖解：一般所指的Width、Height說的是元素內容的寬和高，外邊距預設是透明的，不會遮擋其後面的元素，而一般所說的背景是指內容和內邊距所形成的地區，
內邊距、邊框和外邊距可以應用於一個元素的所有邊，也可以應用於單獨的邊，外邊距可以是負值，而且在很多情況下都要使用負值的外邊距；

一、Padding（內邊距）屬性：元素與邊框之間的空白地區，padding 屬性接受長度值或百分比值，但不允許使用負值；

<table  style="border-style:solid; border-color:Black;">   <tr>      <td style=" border-style:solid; border-color:Black; border-width:1px; padding:1cm; ">      設定四個相同的內邊距      </td>     <td style=" border-style:solid; border-color:Black; border-width:1px; padding:1cm  2cm 3cm 4cm; ">     設定四個不同的內邊距1      </td>      <td style=" border-style:solid; border-color:Black; border-width:1px; padding-top:1cm; padding-right:2cm; padding-bottom:3cm; padding-left:4cm;">      設定四個不同的內邊距2      </td>   </tr>   </table>

：

二、border（邊框）屬性：border是圍繞元素內容和內邊距的一條或多條線，CSSborder屬性允許你規定元素邊框的樣式，寬度和顏色；

1、邊框與背景：邊框繪製在元素的背景之上，元素的背景是內容、內邊距和邊框區的背景；2、邊框樣式：邊框樣式是邊框最重要的一個屬性，因為如果沒有邊框樣式，就根本不會出現邊框；

<table  style="border-style:solid; border-color:Black;">   <tr>      <td style="border-width:1; border-color:blue; padding:1cm; background-color:Red; ">      沒有設定邊框樣式或設定為none，邊框就不會出現，      </td>     <td style=" border-style:solid; border-width:0.5cm; border-color:Black; padding:1cm; background-color:Red; ">     設定了邊框樣式，規定此邊框顏色為黑色      </td>   </tr>   </table>

：

3、邊框寬度：為邊框指定寬度有兩種方法：可以指定長度值，比如 2px 或 0.1em；或者使用 3 個關鍵字之一，它們分別是 thin 、medium（預設值）和 thick。4、透明邊框：如果邊框沒有樣式，就沒有寬度。不過有些情況下您可能希望建立一個不可見的邊框；

<table  style="border-style:solid; border-color:Black; background-color:Blue;">   <tr >      <td style="border-style:solid;  border-width:0.5cm; border-color:green; padding:1cm; background-color:Red; ">      設定邊框色為綠色      </td>     <td style=" border-style:solid; border-width:0.5cm; border-color:transparent; padding:1cm; background-color:Red; ">      設定邊框色為透明      </td>   </tr>   </table>

：

三、margin（外邊距）屬性：圍繞在元素邊框的空白地區，這個屬性值可以接受任何長度單位，百分數，甚至負值；

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <title>無標題頁</title></head><body><p style="border-style:solid; margin:2cm;"> 四個外邊距為2cm</p><p style="border-style:solid; margin:2cm; "> 四個外邊距為2cm</p></body></html>

：

小結：

1、如果長度或寬度值為百分比，百分數是相對於父元素的寬度計算的，而元素的寬度是指元素內容的寬度；

2、沒有邊框樣式就沒有邊框；

3、值複製：

margin: top right bottom left
```
border:top right bottom left 
```
```
padding:top right bottom left
```

這些值的順序是從上外邊距 (top) 開始圍著元素順時針旋轉的：

如果為指定了 3 個值，則第 4 個值會從第 2 個值複製得到。如果給定了兩個值，第 4 個值會從第 2 個值複製得到，第 3 個值會從第 1 個值複製得到。最後一個情況，如果只給定一個值，那麼其他 3 個外邊距都由這個值複製得到。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More