---
# System prepended metadata

title: Week7

---

# Week7

第一步
CSS Reset 是我們設計網頁時
重要的起手式
為了讓各瀏覽器的網頁外觀維持一致

例如
設定 content-box：表示box-sizing控制的寬度值width要指定給內容物
![](https://i.imgur.com/j7KP14R.jpg)

設定 border-box：表示box-sizing控制的寬度值width要指定給邊框到邊框之間的尺寸
![](https://i.imgur.com/1P5d9vw.jpg)

第二步
如何背景滿版([教材](https://codepen.io/original541029/pen/MWvJGLK))

Background-size:cover 
* 不變形
* 寬高等比例
* 在必要時局部裁切

Background-size:contain
* 不變形
* 寬高等比例
* 不可裁切


第三步
認識 Chrome DevTools 

只要在瀏覽器的畫面中
使用快捷鍵開啟： Mac：Command + Option + I. Windows：F12 
就能開啟這個工具

開啟開發者工具之後
* 針對樣式的設定
* 在用戶端就可以透過直接修改來看更動效果
* 使用各種裝置大小


Flex遊戲
https://flexboxfroggy.com/#zh-tw
