HTML 盒模型（box model）和background

部分內容來自菜鳥教程

所有HTML元素可以看作盒子，在CSS中，”box model”這一術語是用來設計和佈局時使用。
CSS盒模型本質上是一個盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實際內容。
盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。

不同部分的說明：

• Margin(外邊距) - 清除邊框外的區域，外邊距是透明的。
• Border(邊框) - 圍繞在內邊距和內容外的邊框。
• Padding(內邊距) - 清除內容周圍的區域，內邊距是透明的。
• Content(內容) - 盒子的內容，顯示文字和影象。
  為了在所有瀏覽器中的元素的寬度和高度設定正確的話，你需要知道的盒模型是如何工作的。
  當您指定一個CSS元素的寬度和高度屬性時，你只是設定內容區域的寬度和高度。要知道，完全大小的元素，你還必須新增填充，邊框和邊距。

最終元素的總寬度計算公式是這樣的：
總元素的寬度=寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距
元素的總高度最終計算公式是這樣的：
總元素的高度=高度+頂部填充+底部填充+上邊框+下邊框+上邊距+下邊距

border 使用

-必須要寫的三個元素
邊框的寬度（可選：預設是寬度的 medium 3px）

    border-width:1px  

邊框的樣式

solid：實線  
double : 雙實線  
dashed: 虛線  
dotted: 點狀線  

邊框的顏色（可選： 如果不寫 預設黑色）

border-color:red;

padding 內邊距 可以寫

padding: 10px 

margin使用

它可以指定不同的側面不同的邊距：

margin-top:
margin-bottom:
margin-right:
margin-letf

- 為了縮短程式碼，有可能使用一個屬性中margin指定的所有邊距屬性。這就是所謂的縮寫屬性。
所有邊距屬性的縮寫屬性是”margin”

margin:25px 50px 75px 100px;

     1. 上邊距為25px
     2. 右邊距為50px
     3. 下邊距為75px
     4. 左邊距為100px

margin:25px 50px 75px;

    1.  上邊距為25px
    2.  左右邊距為50px
    3.  下邊距為75px
 

margin:25px 50px;

    1.  上下邊距為25px
    2.  左右邊距為50px

margin:25px;

    1.  所有的4個邊距都是25px

margin 摺疊

• 什麼時候會觸發

  1. 兩個或者多個
     說明其數量必須是大於一個，又說明，摺疊是元素與元素間相互的行為，不存在 A 和 B 摺疊，B 沒有和 A 摺疊的現象。

  2. 毗鄰
     是指沒有被非空內容、padding、border 或 clear 分隔開，說明其位置關係。

  3. 垂直方向
     是指具體的方位，只有垂直方向的 margin 才會摺疊，也就是說，水平方向的 margin 不會發生摺疊的現象。

  如果是父子關係（巢狀關係） 子元素的margin-top 會向父元素傳遞

background 使用

1.分步使用

1. 背景圖片平鋪方式
   background-repeat: no-repeat
   
   • 四個屬性：
     
     1. repeat : 預設 x - y 兩個平鋪
     2. repeat-x: 橫向平鋪
     3. repeat-y: Y向平鋪
     4. no-repeat: 不平鋪
2. 背景圖片定位
   
   • 英文單詞（left right top bottom）
   • 百分比（background-position: 30% 20% ;）
   • 距離（background-position: 200px 100px ;）
   • 簡寫（background-position: center;） 另一個屬性預設是center

2.複合寫法 (background: 顏色 圖片 定位 平鋪方式)

background: red url("圖片路徑") center no-repeat;