金魚都能懂網頁設計入門 : 區塊尺寸計算

佔據空間的計算

預設情況下，一個物件在畫面上所佔據的空間，包含 margin（外距）、width（寬度）、 padding（內距）以及 border（邊框）

可見尺寸的計算

包含 width、 padding 以及 border

金魚都能懂網頁設計入門 : Float浮動

Float 使用時機

• 舊有系統的維護可能會使用到
• 文饒圖
• 多欄版面編排

假圖服務

• Fake image please
• Lorem Picsum

Float

• 只有 float: left 跟 float: right
• 子層浮動時，父層會抓不到浮動的子層物件的高度
• 浮動多搭配clear來讓父層抓到子層高度
• 常見使用 clear: both 的 class 名稱是 clearfix，父層等於被這個物件撐開，會跑到浮動物件的後方

margin/ padding

margin: 上下左右
margin: 上下 左右
margin: 上 左右 下
margin: 上 右 下 左

金魚都能懂網頁設計入門 : 網頁兩大主角

inline

會跟大家排在一起
不能設定寬跟高

block

不管內容多寡，都會佔掉一整列的空間
可以設定寬高

inline-block

繼承 inline 可以跟別人排在一起，block 可以調整寬高的特性

補充
製作 menu 時，a 標籤彼此間會有一個空白，4-5 不等px，此時透過設定 a 的外層 font-size 為 0，來消除這個空白，再在 a 標籤中補上需使用的 font-size

codepen 練習

金魚都能懂網頁設計入門 : 換個新盒子

box-sizing

控制盒模型的計算方式
簡單來說，控制寬度值要指定給誰

• border-box：把寬度值設定給邊框到邊框之間
• content-box：把寬度值指定給內容物

金魚都能懂網頁設計入門 : CSS Reset

為什麼需要 CSS Reset

各家瀏覽器中，有自己定義的 CSS 樣式，網頁的外觀基本上會倚賴內建的樣式，為避免不清楚各家設定的樣式為何，所以一般設計前會進行 Reset

大部分會先建構出一個 css 的檔案，要使用時再 link 過去

網站

• CSS Tools: Reset CSS
• Normalize.css

金魚都能懂網頁設計入門 : 排版的聖（ㄉㄨˊ）品

Flex

• 在父層設定 display: flex，子層會變為 flex item，有點像是 block，但是會橫排，而且中間不會有任何空白字元的問題
• 預設不折行，會自動調整內容寬度（等寬等高）
• 要折行，設定 flex-wrap: wrap

Amos Flex 教學影片