盒模型

• HTML中，萬物皆是盒模型
• 只要HTML中的標籤，你都可以通過設定盒模型相關的內容，對這個元素產生影響

盒模型的組成

• 月餅　content ：width；height
• 填充物　　padding：內邊距
• 月餅盒　border：邊框
• 月餅盒外　margin：外邊距

content

• width
• height

背景

• 設定背景顏色：background-color　顏色的寫法
  
  • 1、英文
  • 2、#ffffff
  • 3、rgb()
  • 4、rgba()
• 設定背景圖片：background-image　url()
• 設定背景重複方式：background-repeat
  
  • 1、repeat（重複）
  • 2、repeat-x
  • 3、repeat-y
  • 4、no-repeat
• 設定背景定位：background-position：如果設定了一個數值，另外一個數值預設是center
• 背景的複合寫法：background
  
  • 書寫順序：
  • 1、顏色
  • 2、圖片
  • 3、定位
  • 4、重複方式
• 背景隨著頁面的滾動：background-attachment，會造成偏移
  
  • scroll：滾動，預設值
  • fixed：固定的
• 設定背景圖片尺寸：background-size： CSS 3 的屬性，可以設定背景圖片的大小

padding

• 用於控制 盒子內容 和 盒子邊框 之間的位置
• 內邊距
  
  • padding-top
  • padding-right
  • padding-bottom
  • padding-left
  • 複合寫法
  • 如果四個值，分別對應：上、下、左、右
  • 如果三個值，分別對應：上、左右、下
  • 如果兩個值，分別對應：上下、左右
  • 如果一個值，四周都相同

border

• 邊框
• border
  
  • 書寫順序
  • 寬度
  • 樣式
  • 顏色
  • 樣式
  • solid：實線
  • double：如果寬度為1px，無效果
  • dotted：點狀線，在大部分瀏覽器顯示為實線
  • dashed：虛線，在大部分瀏覽器顯示為實線
• border-width
• border-color
• border-style
• border-radius：CSS3的屬性

margin

• 外邊距
• 專門用於控制盒子和盒子之間的一個位置
• 可以設定負數
• margin有兩種特殊情況：
  
  • 如果兩個元素是兄弟關係：第一個元素的 margin-bottom 和第二個元素的 margin-top 會產生疊壓(去絕對值最大值)
  • 如果兩個元素是父子關係：子級第一個元素的margin-top會傳遞給父級
  • 解決方案：
    
    • 給父級設定邊框
    • 給父級設定 overflow：hidden
    • 給父級設定 padding 注意盒子的大小

盒模型的實際大小

• 橫向：border-left + padding-left + width + padding-right + border-right

• 縱向：border-top + padding-top + height + padding-bottom + border-bottom