CSS

控制背景圖片的位置設定 可以設定背景圖片根據外邊框（border-box）、內距邊框（padding-box）以及內容邊框（content-box）來定位 Ref: CSS3 background-origin 屬性 »

寫 css 的時候，有時候會遇到套用樣式後。效果卻沒有出現，或是被覆蓋掉 這時候就是 css 優先權的問題 優先權: !important > inline style > id > class > element 計算 * 如果元素具有 inline style，(1,0,0,0) * 每個 id，(0,1,0,0) * 每個 class (或偽類或屬性選擇器)，(0,0,1,0) * 每個 element，(0,0,0,1) margin 和 padding 不能被繼承 Ref »

css 裡的 width、height(寬/高) 計算方法 是 padding(外邊框) + margin(內邊框) + border(邊框) + width/height(寬/高)本身 example 範例中 a 與 b width 都是 500px，margin 20px b 多了 padding 20px 與 border-width 10px b 就比 a 長了很多 解法參考 [CSS] box-sizing Ref: Introduction to the CSS »

解決 padding、margin 影響寬度造成破版的問題 box-sizing: content-box; 元素實際寬高，為 CSS 指定寬高，再加上 border/padding/margin box-sizing: border-box; 元素實際寬高，即為 CSS 所指定寬高 (已包含 border/padding/margin) example Ref: CSS3 box-sizing 屬性 »