切版有許多眉角需要注意，來探討那些經常導致切版結果與設計稿產生落差的原因。
一、文字的高度本體是 line-height
🔍 文字所佔據的高度不是由font-size決定，而是line-hight。
一開始練習切版時，都想著設定好字的尺寸和字重就 ok 了吧？殊不知這是造成切出來的網頁與設計稿尺寸落差很大的原因。
二、圖片
🔍 圖片底下預設會出現 3px 的空白，需要額外處理。因為放置圖片的 img 標籤預設帶有的 CSS 樣式
display:inline-block，行內元素都會帶有vertical-align:baseline，因此造就出下方 3px 的空白，下面就看看有哪些解決方式。解決方式
- 更改 vertical-align 屬性值為 baseline 以外的屬性，如
middle、top、bottom等等 → 推薦做法 - display 屬性改成
block→ 但會造成換行 - 將父層的
font-size設為 0，因為 vertical-align 屬性是根據文字基線來定位 → 但會造成父層有文字時會消失
三、UI 設計軟體的 border 算法和網頁不同
🔍 網頁裡的 border 會佔據面積，在 UI 設計軟體裡線段卻不會有面積，因此造成了誤差
解決方式
- 一樣用 border 製作 → 推薦做法
- 使用偽元素並搭配絕對定位 → 不推薦
- 使用
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;
}
今天先分享這幾點，之後會再做補充，下次切版時可以留意看看哦～
