區塊與行內元素概念
區塊元素
行內元素
- ex: a、span
box-model 與行距設定
容器觀念
- 寫網頁必備盒模型觀念!
- 預設 box-sizing: content-box, 實體寬度就要連 width \ padding \ border 一起算
- 不想算數學的方法: box-sizing: border-box
- margin 只影響瀏覽器佈局，不影響box 本體寬度
行距觀念 / line height
- 網頁字預設16px, 行距預設1倍
- 文字高度不是透過文字大小撐起，而是透過行距推擠
- 高度是透過行距產生
神秘的圖片高度
- 圖片預設有2-3px 留白
- 解決方法
- vertical-align: middle
- display: block
注意項目
- 起手式：reset
- 常用的HTML tag: div
- 不要寫死高度, 除非是logo
- [ * ] 權重比較低
- br 的使用時機：同一段落時使用
- px 是螢幕上的，pt 是印刷用的
- 做事要有一致性
- margin-top 有時候會有bug，儘量使用margin-bottom
- 盡量語意命名，避免用方向、數字
實作
滿版式網頁
- 滿版閱讀性不是很好, 所以需要斟酌使用
- 可在滿版與內容非滿版交互運用，以footer為例
1 | .footer |
container
- 習慣放置閱讀用的容器 / 居中內容內容
- 中間容器大多 1000 - 1280