## 重要提醒
* 設計稿的 1920px 是表示滿版，不會寫 width: 1920px;
* 以[個人履歷](https://www.figma.com/file/eB5X8OYO4whPx3btCZdr3w/2023-%E5%88%87%E7%89%88%E5%A4%8F%E5%AD%A3%E7%8F%AD-W1---%E5%80%8B%E4%BA%BA%E5%B1%A5%E6%AD%B7?node-id=0%3A1&mode=dev)來說，內容寬度會是 1296 (636+636+24 或用格線系統來算)
* 不管畫面奪大，都要讓內容居中。因為人的視覺觀看每行是有極限的，內容太寬，閱讀上會很吃力

## 滿版 / 內容居中
### 範例一
footer 不需要寫寬度，因為 div (區塊元素)會佔滿寬度

<div class="footer">
	<div class="container">
		1234
	</div>	
</div>

.footer {
	border-top: 3px solid red;
	padding-top: 30px;
	background: red;
}

.container {
	width: 400px;
	margin: 0 auto;  /* 左右自動對齊 ➡️ 置中 */
}

### 範例二
共同樣式獨立出來，方便管理，避免重複
例如: container

<div class="container header">header</div>
<div class="container faq">faq</div>	

.container {
	width: 400px;
	margin: 0 auto;  /* 左右自動對齊 ➡️ 置中 */
	background: gray;
}

.header {
	color: white;
}

.faq {
	color: red;
}

### 範例三
滿版還是不會滿版?

<div class="container">
	<div class="footer">1234</div>
</div>

.container {
	width: 400px;
	margin: 0 auto;  /* 左右自動對齊 ➡️ 置中 */
	background: gray;
}

.footer {
	border-top: 3px solid red;
	padding-top: 30px;
	background: red;
}

:::spoiler
不會滿版。
div 是撐滿「父層」(看他老爸)，footer 的父層是 container，container 寬度 400px，所以 footer 只會撐滿 400。
:::

## 內容高度不建議寫死
* 透過 div 自適應高度和 padding 來撐出高度
* 寫死容易超出去