[TOC] >[info]盒子模型是CSS的基石之一，布局最重要的概念，它指 定元素如何呈現在頁面當中。網頁就是由許多個盒子通 過不同的排列方式（縱向排列，橫向排列，嵌套排列） 堆積而成。 頁面上的每個元素都被瀏覽器看成是一個矩形的盒子， 這個盒子由元素的內容、填充、邊框和邊界組成。 默認情況下盒子的邊框是無，背景色是透明，所以我們 在默認情況下看不到盒子。 ## 盒子實例1  ## 盒子實例2  ## 一、盒子的幾個概念和屬性 ### 1、內容 >[danger]盒子里面所包含的元素和內容 ### 2、填充(內邊距) (padding) >[danger]盒子里面的內容到盒子的邊框之間的距離。 <table class="dataintable"> <tbody> <tr> <th> 屬性 </th> <th> 描述 </th> </tr> <tr> <td> <a title="CSS padding 屬性"> padding </a> </td> <td> 簡寫屬性。作用是在一個聲明中設置元素的所內邊距屬性。 </td> </tr> <tr> <td> <a title="CSS padding-bottom 屬性"> padding-bottom </a> </td> <td> 設置元素的下內邊距。 </td> </tr> <tr> <td> <a title="CSS padding-left 屬性"> padding-left </a> </td> <td> 設置元素的左內邊距。 </td> </tr> <tr> <td> <a title="CSS padding-right 屬性"> padding-right </a> </td> <td> 設置元素的右內邊距。 </td> </tr> <tr> <td> <a title="CSS padding-top 屬性"> padding-top </a> </td> <td> 設置元素的上內邊距。 </td> </tr> </tbody> </table> ### 3、邊框(border) >[danger]盒子本身沒有邊框(border)。 <table class="dataintable"> <tbody> <tr> <th> 屬性 </th> <th> 描述 </th> </tr> <tr> <td> <a title="CSS border 屬性"> border </a> </td> <td> 簡寫屬性，用于把針對四個邊的屬性設置在一個聲明。 </td> </tr> <tr> <td> <a title="CSS border-style 屬性"> border-style </a> </td> <td> 用于設置元素所有邊框的樣式，或者單獨地為各邊設置邊框樣式。 </td> </tr> <tr> <td> <a title="CSS border-width 屬性"> border-width </a> </td> <td> 簡寫屬性，用于為元素的所有邊框設置寬度，或者單獨地為各邊邊框設置寬度。 </td> </tr> <tr> <td> <a title="CSS border-color 屬性"> border-color </a> </td> <td> 簡寫屬性，設置元素的所有邊框中可見部分的顏色，或為 4 個邊分別設置顏色。 </td> </tr> <tr> <td> <a title="CSS border-bottom 屬性"> border-bottom </a> </td> <td> 簡寫屬性，用于把下邊框的所有屬性設置到一個聲明中。 </td> </tr> <tr> <td> <a title="CSS border-bottom-color 屬性"> border-bottom-color </a> </td> <td> 設置元素的下邊框的顏色。 </td> </tr> <tr> <td> <a title="CSS border-bottom-style 屬性"> border-bottom-style </a> </td> <td> 設置元素的下邊框的樣式。 </td> </tr> <tr> <td> <a title="CSS border-bottom-width 屬性"> border-bottom-width </a> </td> <td> 設置元素的下邊框的寬度。 </td> </tr> <tr> <td> <a title="CSS border-left 屬性"> border-left </a> </td> <td> 簡寫屬性，用于把左邊框的所有屬性設置到一個聲明中。 </td> </tr> <tr> <td> <a title="CSS border-left-color 屬性"> border-left-color </a> </td> <td> 設置元素的左邊框的顏色。 </td> </tr> <tr> <td> <a href="/cssref/pr_border-left_style.asp" title="CSS border-left-style 屬性"> border-left-style </a> </td> <td> 設置元素的左邊框的樣式。 </td> </tr> <tr> <td> <a title="CSS border-left-width 屬性"> border-left-width </a> </td> <td> 設置元素的左邊框的寬度。 </td> </tr> <tr> <td> <a title="CSS border-right 屬性"> border-right </a> </td> <td> 簡寫屬性，用于把右邊框的所有屬性設置到一個聲明中。 </td> </tr> <tr> <td> <a title="CSS border-right-color 屬性"> border-right-color </a> </td> <td> 設置元素的右邊框的顏色。 </td> </tr> <tr> <td> <a title="CSS border-right-style 屬性"> border-right-style </a> </td> <td> 設置元素的右邊框的樣式。 </td> </tr> <tr> <td> <a title="CSS border-right-width 屬性"> border-right-width </a> </td> <td> 設置元素的右邊框的寬度。 </td> </tr> <tr> <td> <a title="CSS border-top 屬性"> border-top </a> </td> <td> 簡寫屬性，用于把上邊框的所有屬性設置到一個聲明中。 </td> </tr> <tr> <td> <a title="CSS border-top-color 屬性"> border-top-color </a> </td> <td> 設置元素的上邊框的顏色。 </td> </tr> <tr> <td> <a title="CSS border-top-style 屬性"> border-top-style </a> </td> <td> 設置元素的上邊框的樣式。 </td> </tr> <tr> <td> <a title="CSS border-top-width 屬性"> border-top-width </a> </td> <td> 設置元素的上邊框的寬度。 </td> </tr> </tbody> </table> ### 4、外邊距(margin) >[danger]邊框外和其它盒子之間。 <table class="dataintable"> <tbody> <tr> <th> 屬性 </th> <th> 描述 </th> </tr> <tr> <td> <a title="CSS margin 屬性"> margin </a> </td> <td> 簡寫屬性。在一個聲明中設置所有外邊距屬性。 </td> </tr> <tr> <td> <a title="CSS margin-bottom 屬性"> margin-bottom </a> </td> <td> 設置元素的下外邊距。 </td> </tr> <tr> <td> <a title="CSS margin-left 屬性"> margin-left </a> </td> <td> 設置元素的左外邊距。 </td> </tr> <tr> <td> <a title="CSS margin-right 屬性"> margin-right </a> </td> <td> 設置元素的右外邊距。 </td> </tr> <tr> <td> <a title="CSS margin-top 屬性"> margin-top </a> </td> <td> 設置元素的上外邊距。 </td> </tr> </tbody> </table> ## 盒子屬性的簡寫 >[danger] 簡寫屬性在一個聲明中設置所有外邊距屬性。該屬性可以有 1 到 4 個值。 **例1** ~~~ <style type="text/css"> p{ margin: 10px; } </style> ~~~ >[info] 所有 4 個外邊距都是 10px **例2** ~~~ <style type="text/css"> p{ margin: 10px 5px; } </style> ~~~ >[info] 上外邊距和下外邊距是 10px 右外邊距和左外邊距是 5px **例3** ~~~ <style type="text/css"> p{ margin: 10px 5px 15px; } </style> ~~~ >[info] 上外邊距是 10px 右外邊距和左外邊距是 5px 下外邊距是 15px **例4** ~~~ <style type="text/css"> p{ margin: 10px 5px 15px 20px; } </style> ~~~ >[info] 上外邊距是 10px 右外邊距是 5px 下外邊距是 15px 左外邊距是 20px **圖例**  ## 二、 常見問題 * 大部分html元素的盒子屬性(margin,padding )默認 值都為0，有少數html元素的(margin,padding)瀏 覽器默認值不為0，例如：body,p,ul,li,form 標記等，因此我們有時有必要先設置它們的這些屬性為0。css全局reset。 * 外邊距合并指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。 合并后的外邊距的高度等于兩個發生合并的外邊距的高度中的較大者。  * 當一個元素包含在另一個元素中時（假設沒有內邊距或邊框把外邊距分隔開），它們的上和/或下外邊距也會發生合并。請看下圖：  * 盒子的寬高：如果沒有指定寬度，那么塊級元素寬度默認是100%，行級元素根據內容需要來自動設置寬度，如果沒設置高度，那么高度就會隨著內容的改變而改變。 * 設定一個塊級元素居中：margin:0 auto。 * margin可以設置負值，padding不可以。 * 行內元素的margin值，只有左右，沒有上下的值。 ## 三、CSS overflow 屬性 >[info] overflow 屬性規定當內容溢出元素框時發生的事情。 <table class="dataintable"> <tbody> <tr> <th> 值 </th> <th> 描述 </th> </tr> <tr> <td> <a>visible</a> </td> <td> 默認值。內容不會被修剪，會呈現在元素框之外。 </td> </tr> <tr> <td> <a>hidden</a> </td> <td> 內容會被修剪，并且其余內容是不可見的。 </td> </tr> <tr> <td> <a>scroll</a> </td> <td> 內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內容。 </td> </tr> <tr> <td> <a>auto</a> </td> <td> 如果內容被修剪，則瀏覽器會顯示滾動條以便查看其余的內容。 </td> </tr> <tr> <td> <a>inherit</a> </td> <td> 規定應該從父元素繼承 overflow 屬性的值。 </td> </tr> </tbody> </table> >[danger]**作業：**練習盒子，理解盒子的邊框，外邊距，內邊距。