盒模型

width

• 寬（內容的寬）
• 單位是px
• 當塊級元素（div，h1，li等）等沒有設定width屬性時，將自動撐滿

height

• 高（內容的高）
• 單位是px
• 如果height如果不設定，預設是0，但有內容的話會被自動撐開

padding

• 內邊距
• padding是四個方向的，我們可以分別的設定
• 四個數值，上右下左
  padding：10px 20px 30px 40px
• 三個數值，上，左右，下
  padding：10px 20px 10px
• 兩個數值，上下，左右
• 一個數值，全部
• 如果3個方向一樣，一個不一樣
  padding：20px；
  padding-top：10px；

border

邊框

margin

• 外邊距
• 豎直方向的margin會塌陷，以大的為主
• 設定上下左右時，和內邊距一樣

盒子的水平居中

• margin：0 auto；
• 和文字居中是兩個概念

盒模型計算

• 一個盒子的總面積等於
• 寬+padding+margin
• 高+padding+margin

box-sizing屬性

將盒子加上box-sizing:border-box;

• padding和border會變成內縮，而不是外擴
• 一個盒子的寬高等於width和height
• 會大量用於移動端

行內元素和塊級元素

• 塊級元素可以設定寬高，上下排列，行內元素不能設定寬高，只能並排顯示

行內塊

• img
• 表單元素
• 他們可以並排名，也可以設定寬高

行內元素和塊級元素的相互轉換

• 使用display：block，轉為塊級元素
• 使用display：inline，轉為行內元素（很少）
• 使用display：inline-block，轉為行內塊
  例如span這種行內元素，如果不轉成行內塊，直接padding，可能會壓蓋到上面的內容

元素的隱藏

display：none

元素將徹底放棄位置，和沒有一樣

visibility：hidden

元素不放棄自己位置，但是不顯示

萬用字元選擇器

在開始製作網頁時，可以用
*{padding：0；
margin：0；
}