我要成為切版魔法師 #3 - 揪出網頁切版與設計稿有落差的元兇

切版有許多眉角需要注意，來探討那些經常導致切版結果與設計稿產生落差的原因。

一、文字的高度本體是 line-height

🔍 文字所佔據的高度不是由font-size決定，而是line-hight。

一開始練習切版時，都想著設定好字的尺寸和字重就 ok 了吧？殊不知這是造成切出來的網頁與設計稿尺寸落差很大的原因。

二、圖片

🔍 圖片底下預設會出現 3px 的空白，需要額外處理。

因為放置圖片的 img 標籤預設帶有的 CSS 樣式 display:inline-block，行內元素都會帶有vertical-align:baseline，因此造就出下方 3px 的空白，下面就看看有哪些解決方式。

解決方式

1. 更改 vertical-align 屬性值為 baseline 以外的屬性，如middle、top、bottom等等 → 推薦做法
2. display 屬性改成block → 但會造成換行
3. 將父層的font-size設為 0，因為 vertical-align 屬性是根據文字基線來定位 → 但會造成父層有文字時會消失

三、UI 設計軟體的 border 算法和網頁不同

🔍 網頁裡的 border 會佔據面積，在 UI 設計軟體裡線段卻不會有面積，因此造成了誤差

解決方式

1. 一樣用 border 製作 → 推薦做法
2. 使用偽元素並搭配絕對定位 → 不推薦
3. 使用box-shadow屬性做出邊線效果 → 不推薦

四、具備容器概念

會發現網頁有些區塊有置中，有些會滿版，好管理的做法是新增一個定寬容器，並在置中區塊使用該容器；滿版區塊則另外寫，並在內層放入定寬容器。

<!--置中版面-->
<div class="profile container">
	<h2>這是一個標題<h2>
	<p>一段文字</p>
</div>

<!--背景滿版+置中版面-->
<footer>
	<div class="container">
		<h2>這是一個標題<h2>
		<p>一段文字</p>
	</div>
</footer>

.container{
	margin:0 auto;
	width:1200px;
}

五、載入 CSS Reset

🔍 瀏覽器在各個 HTML 標籤都會帶有預設樣式，包括 margin、padding 這些會佔據面積的屬性。

幸好現在有兩個主流的 CSS Reset 可以幫忙解決這個問題：

• meyerweb：清除所有預設樣式
• normalize：只留下標籤的基本樣式，例如 ul、ol 列表標籤

六、熟悉盒模型 (box-model) 的計算方式

🔍 預設的 box-model 除了元素本身的寬度、高度，border、padding 都會向外推，但不計入 margin。需要注意 margin 雖然沒有算入 box-model，在網頁上仍然會佔據面積。

解決方式：設定 box-sizing:border-box

這時元素本身的寬度、高度就會包含 border 和 padding (不會向外推)，排版時可省去計算的麻煩：

*,
*::before,
*::after {
  box-sizing: border-box;
}

今天先分享這幾點，之後會再做補充，下次切版時可以留意看看哦～