為什么Margin、Padding和其他間距技術(shù)應(yīng)使用 Px 單位
CSS margin 和 padding 屬性經(jīng)常被放在一起討論，原因有兩個(gè)：
- 它們都影響空白區(qū)域，并且在 CSS 盒模型中緊挨著，只有在存在邊框的情況下才會(huì)被邊框分隔開來(lái)。
- 它們的值接受幾乎完全相同的 CSS 數(shù)據(jù)類型： length 和 percentage （ margin 也接受 auto ，但這對(duì)我們現(xiàn)在討論的內(nèi)容并不重要）。
CSS 的長(zhǎng)度和百分比數(shù)據(jù)類型是什么？
CSS 長(zhǎng)度是距離值的一種。CSS 百分比與長(zhǎng)度類似，但區(qū)別在于它們總是頁(yè)面中其他內(nèi)容的一部分，具體取決于它們與什么屬性一起使用。長(zhǎng)度可以是絕對(duì)值，也可以是相對(duì)值。
絕對(duì)單位和相對(duì)單位有什么區(qū)別？
CSS 提供了兩種類型的單元，因此我們可以建立靈活的網(wǎng)站，使其適用于各種設(shè)備和配置。
- 絕對(duì)長(zhǎng)度單位總是相同的，而不是基于頁(yè)面中的其他內(nèi)容
- 相對(duì)長(zhǎng)度單位單位可以改變，并基于字體和視口
如何確定何時(shí)使用絕對(duì)或相對(duì) CSS 單位？
在決定使用絕對(duì)還是相對(duì) CSS 單位來(lái)處理某個(gè) CSS 屬性時(shí)，你需要考慮用戶想要做什么。
你可能已經(jīng)熟悉了在文本大小方面使用相對(duì)長(zhǎng)度單位。對(duì)于 font-size 屬性使用 rem 單位是最佳實(shí)踐，因?yàn)樗试S用戶通過(guò)個(gè)人設(shè)備上的設(shè)置來(lái)自定義他們的瀏覽體驗(yàn)
相對(duì)長(zhǎng)度單位也常用于根據(jù)用戶的視口尺寸改變頁(yè)面外觀。我們就是這樣實(shí)現(xiàn)響應(yīng)式設(shè)計(jì)的，無(wú)論用戶使用何種設(shè)備、窗口大小、頁(yè)面縮放或文字大小，都能正常運(yùn)行。
那么，在使用相對(duì)長(zhǎng)度單位時(shí)，我們要針對(duì)哪些用戶行為進(jìn)行設(shè)計(jì)呢？
- 增加文字大小設(shè)置
- 調(diào)整瀏覽器窗口大小
- 放大或縮小頁(yè)面
- 使用移動(dòng)設(shè)備閱讀
在所有這些情況下，用戶最關(guān)心的是什么？是內(nèi)容，還是內(nèi)容之間的間距？這兩點(diǎn)中哪一點(diǎn)對(duì)理解網(wǎng)頁(yè)至關(guān)重要？
為什么不應(yīng)該對(duì) margin、padding 或其他間距使用相對(duì)單位？
當(dāng)用戶在定制自己的觀看體驗(yàn)時(shí)，對(duì)他們來(lái)說(shuō)最重要的是內(nèi)容和手頭的任務(wù)。間距對(duì)于用戶完成任務(wù)來(lái)說(shuō)往往并不重要，因此不需要像內(nèi)容本身那樣以同樣的速度增長(zhǎng)或縮放。
就垂直間距而言，最終也會(huì)增加用戶完成任務(wù)的難度。由于水平空間有限，文字必須換行到下一行，對(duì)此你無(wú)能為力，但你也不想讓頁(yè)面變得更高，因?yàn)槟愕拇怪遍g距會(huì)隨著文字大小的增加而增加。
對(duì)于只想以不同方式閱讀內(nèi)容的用戶來(lái)說(shuō)，過(guò)高的頁(yè)面意味著更多的滾動(dòng)和操作，而且他們一次能看到的內(nèi)容也會(huì)更加有限。
代碼演示：margin 和 padding 的絕對(duì)單位與相對(duì)單位之間的區(qū)別
在增大文字大小之前
以下是在不增加文字大小的情況下一頁(yè)的基本視圖。從高層次來(lái)看，它具有
- 帶有徽標(biāo)、多個(gè)鏈接和幾個(gè)按鈕的導(dǎo)航標(biāo)題
- 一個(gè)兩欄式的行動(dòng)號(hào)召布局，包含大號(hào)文本、描述、按鈕和一個(gè)圣誕主題的圖形。
- 三欄細(xì)目，提供頁(yè)面上銷售產(chǎn)品的其他信息
增加文字大小后
要測(cè)試僅增加文字大小會(huì)發(fā)生什么情況，可以在頁(yè)面的主 <html> 元素中添加一個(gè) CSS 屬性： font-size: 200% 。這樣做的目的是將網(wǎng)站使用的基本字體大小加倍，因?yàn)榫W(wǎng)站使用 rem 單位來(lái)實(shí)際調(diào)整文字大小。
遺憾的是，在大多數(shù)元素中，它們還將 rem 單位用于 margin 和 padding 中。我們可以看到這一點(diǎn)：
- 導(dǎo)航標(biāo)題現(xiàn)在非常高，幾乎占據(jù)了窗口高度的一半，還遮住了下一部分內(nèi)容。
- 雙欄行動(dòng)號(hào)召部分仍然是兩欄，沒(méi)有為所有文字留出太多的水平空間。
- 在 "行動(dòng)呼吁 "部分的文字欄中，文字周圍的空間更大，留給閱讀文字的水平空間更小。大號(hào)文字每行顯示大約一個(gè)字，而小號(hào)文字每行只顯示幾個(gè)字。
更新為 px 單位后
為了展示如果這個(gè)網(wǎng)頁(yè)使用 px 單位而不是 rem 單位來(lái)設(shè)置 margin 和 padding，它將會(huì)是什么樣子，我使用了瀏覽器開發(fā)者工具檢查了 HTML 和 CSS，并覆蓋了一些 CSS 值。
- 導(dǎo)航頁(yè)眉右側(cè)的內(nèi)容仍然被截?cái)?，但長(zhǎng)度大大縮短，這意味著我們有更多的空間來(lái)查看頁(yè)面上的主要內(nèi)容。
- 在兩欄的 "行動(dòng)呼吁 "中，我調(diào)整了文字組周圍和之間的填充，使其不再縮放，從而為顯示文字提供了更多的水平空間。
- 此外，我還將兩欄的 "行動(dòng)呼吁 "改為一欄，以降低文本部分的高度。這充分體現(xiàn)了讓該部分的媒體查詢使用 rem 單位而不是 px 單位的好處。
