CSS進階（4）—— 溫和padding中的詭異CSS現象

盒模型的四你們族，原覺得content部分比較複雜，單獨寫了一章，但在看padding部分的時候又遇到一個很是詭異的CSS現象，通過不斷測試，終於獲得一個比較接近於「真相」的解釋，在測試這個詭異現象以前，先將padding的一些特性簡單介紹一下，最後再來解釋這個問題。

1.padding與塊元素的尺寸

padding是盒模型的內邊距（也稱內補間），在CSS中，box-sizing默認的值是content-box，因此使用padding會增長元素的尺寸，例如 {width : 60px;padding : 0 20px},若是不考慮其餘CSS干擾，此時content-box的寬度是60+20*2=100。爲了方便對照設計稿快速的完成頁面骨架搭建，咱們每每會直接取到元素的寬高，而不考慮內邊距是多少，否則你的寬高都須要經過計算才能獲得，影響開發效率。所以咱們會將box-sizing設成border-box，認爲這樣寬高就固定了，不會隨着padding影響容器尺寸。事實上大部分狀況確實如此，但有一種特殊狀況你應該瞭解，就是當padding的值足夠大時，padding+content>width時，以下面這種狀況：

<style> .box{ display:block; width:80px; padding:0 60px; box-sizing:border-box; } </style>
複製代碼

此時padding > width,那麼元素最終的寬度爲120px，而不是80px，上述表現是針對塊狀特性的元素而言的，對於內聯元素，會有一些細節須要經過實踐來進行說明。

2.padding與內聯元素的尺寸

這裏先糾正一個錯誤的觀點，內聯元素的padding只會影響水平方向，不會影響垂直方向。這種認知是很是片面的，雖然內聯元素在垂直方向的行爲徹底受line-height和vertical-align(CSS2.1,flex佈局是CSS3的內容)的影響，視覺上並無改變上下兩行的間距，但咱們只須要作一個小測試，給內聯元素加上背景色就能夠發現，內聯元素在垂直方向上的空間也會受到padding的影響。

<div><span class="havePad">hello</span><span class="havePad">world</span></div>
<style type="text/css"> body{ margin: 40px; } .havePad{ padding: 20px; border: 1px solid #ccc; background: #E6A23C; } </style>
複製代碼

因爲markdown編輯器支持標籤語言，所以咱們能夠直接預覽最終效果以下（小提示：你能夠經過瀏覽器直接檢查下面的元素看到CSS樣式）

hello world

咱們能夠看到，padding會影響內聯元素的尺寸，並且當你給父容器加上overflow:auto的時候，父容器還會出現滾動條，這也印證了上面的觀點，因此相似"垂直方向padding對內聯元素沒用"的說法顯然是不正確的。那麼，知道了這個特性以後，咱們能夠利用它作什麼呢？最多見的做用就是增長元素的點擊區域，比方說文章中的文字連接，默認狀況下這些連接的點擊區域受font-size字體大小控制，這個時候咱們只要增長他的上下padding，即可以在"不影響可視佈局"的狀況下增大點擊區域。

3.padding的百分比值

padding的屬性與margin不一樣，padding是不支持負值的，padding的百分比值和寬高的表現略有不一樣，padding的百分比值不管是水平方向仍是垂直方向，都是相對於父容器的寬度進行計算的，由於CSS默認是水平流，因此寬度值會一直有效。基於padding百分比基於寬度計算的特色能夠實現一些特定的功能。做者舉了個固定頭圖的例子，在網頁開發的時候須要一個橫穿整個屏幕的頭圖，若是定製了高度，則可能致使在分辨率較低的屏幕中圖片被壓縮效果很差，這個時候就能夠利用padding的寬高百分比都基於寬度計算的特色來實現一個固定寬高比的頭圖。代碼以下

<style> .box{ position:relative; padding:10% 50%; } .box > img{ position:absolute; width:100%; height:100%; left:0; top:0; } </style>
複製代碼

padding屬性的百分比值在內聯元素的表現略有不一樣，下面會經過一個詭異的CSS現象來講明padding的百分比在內聯元素中的一些特殊屬性。

4.padding百分比值在內聯元素中的詭異表現

做者在探究padding百分比值對於內聯元素的影響時給出了一段詭異CSS代碼，下面會一步步引導你去探究CSS的詭異事件。有興趣的能夠本身在本地測試一下。代碼以下：

<div class="box">
    <span class="span">一二三四</span>
</div>
<style type="text/css"> body{ margin: 0; padding: 300px; } .box{ width: 400px; height: 100px; background: green; } .span{ line-height: 40px; padding: 50%; background: gray; } </style>
複製代碼

產生的結果以下圖所示（這裏用圖片會更清楚一些因此就不直接用HTML代碼了）

在結果中產生了兩個比較詭異的樣式：

（1）"一"這個字不見了

（2）生成了一個「五邊形」

原文這樣描述這個問題，「CSS的不少現象難以解釋，緣由在於其表現每每是多個屬性多個規則一塊兒生效的結果，例如本例，雖然幾乎沒用實用價值，可是對咱們深刻理解內聯元素的世界頗有幫助」。關於這個問題的產生，我提取了做者三個比較明確的說明。有助於你理解這段CSS是如何做用的。

• 對於內聯元素，其padding是會自動斷行的。
• padding區域會隨着內容一塊兒換行。
• 層疊樣式具備覆蓋性，層級相同的樣式，後者>前者。

下面我會一點點解釋這三個點，在這以前，咱們能夠明確一點，就是padding的百分比值是基於父元素的寬度進行計算的，在本例中，上下左右的padding值均爲400px*50%=200px。（關於padding：50%和padding在內聯元素中的表現請關注本章對padding基礎的一些總結和概括。）所以該內聯元素最終的寬度=內聯元素content的寬度+左右padding的值。能夠肯定的是，這個寬度必定>父級元素的寬度，因此該元素會自動斷行也就不奇怪了。至此，咱們已經向前邁出了一小步。咱們能夠看到，"四"這個字，確實是換行了。

這個時候，咱們須要作一點小小的改變，咱們把內聯元素的背景色去掉，看看會發生什麼。

當咱們把background去掉以後，發現「一」其實就在二三的前面，只是好像被背景色給覆蓋了。這裏咱們就須要用到做者給出的的第二個和第三個解釋了，首先，因爲「四」換行了，致使「四」後面的padding-right區域會隨着內容一塊兒換行。而"一二三"的寬度是padding-left + 3個字的寬度，而"四"換行以後的寬度是padding-left+1個字的寬度，這個時候padding-left和padding-right寬度抵消，因爲層疊樣式的覆蓋性，層級相同的樣式，後來的"四"攜帶着換行的padding正好覆蓋了前面一行一個文字長度的區域，致使正好一個"一"字被覆蓋了，同時，因爲上面的二三的寬度是多出來的部分，下面的四因爲padding換行也多出一個字的高度，所以正好產生了右下角的空白區。至此，咱們已經解決了，"一"去哪兒了以及右下角空白部分的問題。

看似上面提出的兩個問題都解決了，但我仍然不知足，再提出一個問題

（3）爲何是"四"換行，而不是"三四」,也不是"二三四"。

要解決這個問題，咱們得往這個內容區多加一些字看看，最終我將字添加到一二三四五六七八九十一二三四，才發現最後兩個字"三四"換行了。

因爲有兩個字換行，所以遮住了開頭的"一二"，這正好印證了我以前的說法，同時我也提出一個何時字會換行的猜測，根據第二章講到的元素包裹性的內容，我猜想，當內容區未將要超出父容器的寬度減padding-left時，content部分的最後一個子會自動換行，同時寬度自適應，當內容即將要超出父容器的寬度減padding-left時，content多餘的部分會換行。這裏僅根據元素包裹性提出一個猜測，有更好的說明的歡迎指正。

不忘初心，方得始終

喜歡博主的童鞋能夠掃描二維碼加博主好友~ 也能夠掃中間二維碼入駐博主的粉絲羣（708637831）~固然你也能夠掃描二維碼打賞並直接包養帥氣的博主一枚。