---
tags: 網頁切版直播班 - 2021 夏季班
---

## 1 px 也不差的容器觀念

* 網頁可以切分為容器與元素
* 範例網站：[Yahoo 首頁](ht2tps://tw.yahoo.com/)、[Yahoo 新聞](https://tw.yahoo.com/)

## 1 px 也不差的區塊與行內元素概念

* display: block、inline 概念複習
* margin、padding 用法
* **小問題**：哪些 HTML 標籤是區塊元素？
* h1、ul、a、li、p、span、div

## 1 px 也不差的 box-model 與行距設定

* **盒模型**：margin 與 padding 推擠
* **行距設定**：line-height 的高度影響
* **圖片距離分享**

## 1px 也不差的常見誤區

* 常看到寫死高度與寬度
* 上下 margin、padding 推擠用 %

## 相對定位與絕對定位
1. 使用絕對定位 / 相對定位 設計版型

2. 相對定位、絕對定位元素技巧：z-index - relative、absolute

## 心得分享

* 推擠方向請盡量一致，以方便維護，例如 margin-bottom
* 透過父層 padding 留白，統一設定

## 滿版式網頁與 CSS 選擇器設計

* [蝦皮](https://shopee.tw/)
* [IT 鐵人邦](https://ithelp.ithome.com.tw/)
* [T 客邦](https://www.techbang.com/)
* [IT HOME](https://www.ithome.com.tw/)
* [範例程式碼](https://codepen.io/liao/pen/yLYyYaZ)

## 常見問題
- 要給每個區塊自訂的 class 名稱
- class 名稱順序，共用的 class 性質放自訂的 class 名稱後面，例如：`<div class="profile container">`
- 不可以寫死容器寬高
- 圖片要設定 `display: block;`