CSS盒模型（重點）

CSS三個大核心模塊：盒模型 、浮動和定位，其餘的都是細節。

• 網頁佈局

  就是把網頁元素（文字，圖片等）資源放入盒子裏，利用CSS合理擺放盒子的過程。

• 說明

  盒模型就是把HTML頁面中的元素看成是一個個矩形的盒子，裏面裝着內容的容器。每個矩形都由元素的內容（content）、內邊距（padding）、邊框（border）和外邊距（margin）組成。

• 盒子模型

• 在網頁中，每個盒子都是大小不等的矩形框，除了有自己大小和位置外，還影響着其他盒子的大小和位置。

一、邊框（border）

• 說明

  邊框就是裝手機的盒子。

• 語法

  div{border : border-width | border-style | border-color} 

  border-width ：邊框寬度

  border-color：邊框顏色

  border-style：邊框樣式

屬性值	說明
none	無邊框（默認）
solid	邊框爲單實線(最爲常用的)
dashed	邊框爲虛線
dotted	邊框爲點線
double	邊框爲雙實線

• 設置屬性

  設置	單個屬性設置	設置四個屬性
  上邊框	border-top-style:樣式；border-top-width:寬度； border-top-color:顏色	border-top:寬度 樣式 顏色;
  右邊框	border-right-style:樣式；border-right-width:寬度； border-right-color:顏色
  下邊框	border-bottom-style:樣式；border-bottom-width:寬度； border-bottom-color:顏色	border-bottom:寬度 樣式 顏色;
  左邊框	border-left-style:樣式；border-left-width:寬度； border-left-color:顏色
  屬性簡寫設置	border-style:上邊 [右邊 下邊 左邊]; border-width:上邊 [右邊 下邊 左邊]; border-color:上邊 [右邊 下邊 左邊];
  邊框簡寫設置	border:四邊寬度 四邊樣式 四邊顏色;

邊框擴展：表格單元格的邊框合併

學習HTML表格的時候，單元格邊框既粗又醜，在這裏只需要CSS簡單的設置就可以對我們的表格進行美化。

collapse 單詞是合併的意思

table{ border-collapse:collapse; }  /*表示邊框合併在一起*/

二、內邊距（padding）

• 說明

  padding屬性用於設置內邊距， 是邊框與內容之間的距離，也就是手機盒子裏的填充物的厚度。

• 語法

  div{
    /*分別設置四個內邊距的值*/
    padding-top:10px;/*上內邊距*/
  padding-right:10px;/*右內邊距*/
  padding-bottom:10px;/*下內邊距*/
  padding-left:10px;/*左內邊距*/
  }

  除了分別設置四個內邊距的值外，還有四種設置Padding屬性值的方式（按順時針方向）：

  四個值：上 右 下 左 {padding:10px 20px 30px 40px;}

  三個值：上 左右 下 {padding:10px 20px 30px ;}

  二個值：上下 左右 {padding:10px 20px ;}

  一個值：四個方向 padding:2px;

• 作用

  1. 用來調整子元素（內容）在父元素（容器）中的位置關係。 注：padding屬性需要添加在父元素上。
  2. padding值是額外加在元素原有大小之上的，如想保證元素大小不變，需從元素寬或高上減掉添加的padding值大小。

• 注意

  1. padding值不允許是負值！

  2. padding區域在border與content之間；背景色和背景圖像會覆蓋padding和content組成的區域；

三、外邊距（margin）

• 說明

  用於設置外邊距，設置外邊距會在元素與元素之間創建“空白”區域， 這段空白區域通常不能放置其他內容。

• 語法

  div{
    margin-top:10px;/*上外邊距*/
  margin-right:10px;/*右外邊距*/
  margin-bottom:10px;/*下外邊距*/
  margin-left:10px;/*上外邊距*/
  margin:10px;/*上外邊距 右外邊距 下外邊距 左外邊*/
  }

  除了可單獨設置某一方向填充，也可設置不同數量的值，取值順序跟內邊距相同，有以下4種方式：

  四個值：上 右 下 左 {margin:10px 2px 4px 3px ;}

  三個值：上 左右 下 {margin:2px 4px 6px;}

  二個值：上下 左右 {margin:2px 4px;}

  一個值： 四個方向 {margin:2px;}

外邊距實現盒子水平居中

通過設置盒子的外邊距，實現其水平居中，須滿足兩個條件：

1. 必須是塊級元素
2. 盒子必須指定了寬度

最後，將其左右外邊距都設置爲auto即可。

.header{ width:1000px; margin:0 auto;}

PS：經常使用此方式進行網頁佈局。

外邊距調整元素在盒子中位置

• 說明

  利用外邊距調整元素在容器中的位置。

• 用法

  div img {  
  width: 200px;/* 插入圖片更改大小 width 和 height */
  height: 210px;
  margin-top: 30px;  /* 插入圖片更改位置 可以用margin 或padding  盒模型 */
  margin-left: 50px; /* 插入當圖片也是一個盒子 */
  }

• 用途

  盒子中插入圖片，最多的應用在產品展示中。

清除元素的默認內外邊距

• 說明

  爲了更方便地控制網頁中的元素，在網頁佈局時，通常會先清除元素的默認內外邊距：

  * {
   padding:0;         /* 清除內邊距 */
   margin:0;          /* 清除外邊距 */
  }

• 注意

  行內元素是隻有左右外邊距的，沒有上下外邊距。 內邊距，在ie6等低版本瀏覽器也會有問題。因此，儘量不要給行內元素指定上下的內外邊距就好了。

外邊距合併

margin定義塊元素的垂直外邊距時，可能會出現兩種外邊距的合併的情況：相鄰塊元素垂直外邊距的合併和嵌套塊元素垂直外邊距的合併。

相鄰塊元素垂直外邊距的合併

• 外邊距塌陷

  也稱爲相鄰塊元素垂直外邊距的合併，當上下相鄰的兩個塊元素相遇時，如果上面的元素有下外邊距margin-bottom，下面的元素有上外邊距margin-top，則他們之間的垂直間距不是margin-bottom與margin-top之和，而是==兩者中的較大者==。

嵌套塊元素垂直外邊距的合併

• 說明

  對於兩個嵌套關係的塊元素，如果父元素沒有上內邊距及邊框，則父元素的上外邊距會與子元素的上外邊距發生合併，合併後的外邊距爲兩者中的較大者，即使父元素的上外邊距爲0，也會發生合併。

• 解決

  1. 爲父元素定義1px的上邊框或上內邊距。
  2. 爲父元素添加overflow:hidden。

四、盒子大小的計算

• 說明

  使用寬度width和高度height可以對盒子的大小進行控制。

  width和height的屬性值可以爲不同單位的數值或相對於父元素的百分比%，實際工作中最常用的是像素值。

• 盒子實際佔有寬度區域

  =margin-left + border-left + padding-left+width+padding-right+border-right+margin-right

• 盒子實際佔有寬度區域

  =margin-left + border-left + padding-left+width+padding-right+border-right+margin-right

• 盒子實際佔有高度的區域

  =margin-top + border-top + padding-top + height + padding-bottom+ border-bottom + margin-bottom

標準盒模型

標準盒模型（W3C盒子模型），設置的width或height是對 實際內容（content）的width或height進行設置，內容周圍的border和padding另外設置，即盒子模型的width（height）=設置的content的寬高+padding+border+margin
注：除內容content外，其他爲上下左右都有

怪異盒模型

怪異盒模型（IE盒子模型），設置的width或height是對 實際內容（content）+內邊距（padding）+邊框（border）之和的width和height進行設置的，其盒模型的width（height）=設置的width（height）+外邊距margin

解決兩者的兼容問題

可嘗試對父元素使用內邊距，對子元素使用外邊距

box-sizing的應用==(CSS3盒模型)==

box-sizing 屬性允許你以特定的方式定義匹配某個區域的特定元素。即指定盒模型的類型是標準盒模型，還是怪異盒模型。

• box-sizing值爲content-box

  寬度和高度分別應用到元素的內容框，在寬度和高度之外繪製元素的內邊距和邊框。（即 標準盒模型）

• box-sizing值爲border-box時

  爲元素設定的寬度和高度決定了元素的邊框盒，就是說，爲元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪製，通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。（即 怪異盒模型）
  box-sizing值爲inherit時：規定應從父元素繼承 box-sizing 屬性的值。

• 區別

  content-box和border-box的主要區別是二者的盒子的寬度是否包含元素的邊框和內邊距。

• 舉例

  <div id="box1" class="box"></div>
  <div id="box2" class="box"></div>
  <style>
  .box{
        width:100px;
        height:100px;
        background:red;
        border:5px solid yellow;
        padding:10px}
  
  #box1{box-sizing:content-box}
  #box2{box-sizing:border-box}
  </style>