1、padding與容器尺寸之間的關係
對於block水平元素：①padding值暴走，一定會影響尺寸；②width非auto，padding影響尺寸；③width為auto或box-sizing為border-box，同時padding值沒有暴走，不影響尺寸。
對於inline水平元素：水平padding影響尺寸，垂直padding不影響尺寸，但是影響背景色。當垂直padding大到超出父容器，會影響scrollheight。
2、padding負值和百分比值
關於padding負值：padding不支援任何形式的負值。
關於padding百分比值：padding百分比均是相對於寬度計算的。
inline水平元素的padding百分比值：①同樣相對於寬度計算；②預設的高度寬度細節有差異；③padding會斷行。
3、標籤元素的內建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：
正因為如此，我們在做按鈕的時候多用標籤去模擬按鈕
4、padding與圖形繪製
5、padding與布局
使用百分比單位構建固定比例布局結構：
配合margin等高布局：
兩欄自適應布局：
學習筆記 CSS深入理解之float
張鑫旭的css深入理解之float浮動學習筆記float為產生文字環繞效果而生 包裹 即產生乙個bfc 破壞 使父容器塌陷，元素脫離文件流，產生inline boxes環繞 方式一 使用clear，類似於產生乙個連線索道，使前文和後文關聯，會產生margin重疊效果。方式二 父容器bfc或者hasl...
學習筆記 CSS深入理解之margin
張鑫旭的css深入理解之margin學習筆記前提 只應用於block元素 不考慮writing mode的情況下，只發生在垂直方向 場景 兄弟元素發生重疊 父元素和第乙個 最後乙個子元素發生重疊 margin bottom重疊 最後乙個子元素設定margin bottom相對于父元素設定margin...
CSS深入理解學習筆記之relative
1 relative和absolute的相煎關係 限制作用 限制left top right bottom定位 限制z index層級 限制在overflow下的囂張氣焰。relative和fixed限制作用 限制z index層級。2 relative和定位 特性 相對自行進行定位 無侵入，不影響...