[第六週] CSS Part3 - Box Model 盒模型

什麼是盒模型

• 每個 html 的元素都是一個 Box Model， 主要裡包含了 Margin, Border, Padding, Contant，合在一起就是我們看到的網頁內容。
  
  圖片來源

• 基本的 box model:

.box {
  width: 350px;
  height: 150px;
  margin: 10px;
  padding: 25px;
  border: 5px solid black;
}

Box Model 排版跑掉怎麼辦

box-sizing 的功能是用來調整區塊的內距與邊框計算方式，避免因為設定 padding 、 border 後，整個 div區塊大小都變了。
box-sizing:border-box;

display 分三種

1. block，一個元素一行，可調整任何東西, div、p、h1 的 display 預設都是 block。
2. inline，元素都在同一行，無法調整寬高及邊距, span、a 的 display 預設都是 inline。調整 padding、margin 時只有跟左右的元素距離會動到，上下元素間不變。
3. inline-block，對外像 inline，可併排在同一行; 對內像 block，可調整任何屬性

BEM 命名法

BEM 的名稱源於該方法學的三個組成部分英文字首，分别為：
Block 區塊
Element 元素
Modifier 修飾符
block__elemen--modifier