CSS深刻理解學習筆記之padding

本文轉載於:猿2048網站☞CSS深刻理解學習筆記之padding

一、padding與容器尺寸之間的關係

　　對於block水平元素：①padding值暴走，必定會影響尺寸；②width非auto，padding影響尺寸；③width爲auto或box-sizing爲border-box，同時padding值沒有暴走，不影響尺寸。

　　對於inline水平元素：水平padding影響尺寸，垂直padding不影響尺寸，可是影響背景色。當垂直padding大到超出父容器，會影響scrollHeight。

二、padding負值和百分比值

　　關於padding負值：padding不支持任何形式的負值。

　　關於padding百分比值：padding百分比均是相對於寬度計算的。

　　inline水平元素的padding百分比值：①一樣相對於寬度計算；②默認的高度寬度細節有差別；③padding會斷行。

三、標籤元素的內置padding

　　ol/ul列表：ol/li元素內置padding-left，可是單位是px不是em，例如chrome瀏覽器下是40px，因此字號很小間距就會很大，字號很大序號就會爬出容器。小經驗：文字大小爲12-14px時，padding-left取值22-25px會比較合適。

　　其餘元素：①全部瀏覽器input/textarea輸入框內置padding；②全部瀏覽器button按鈕內置padding；③部分瀏覽器select下拉內置padding，如Firfox IE8+能夠設置padding；④全部瀏覽器radio/checkbox單複選框無內置padding；⑤button按鈕元素的padding最難控制。

　　button表單按鈕padding：

　　

　　

　　正由於如此，咱們在作按鈕的時候多用<a>標籤去模擬按鈕

　　

四、padding與圖形繪製

　　

五、padding與佈局

　　使用百分比單位構建固定比例佈局結構：

　　

　　配合margin等高佈局：

　　

　　兩欄自適應佈局：