padding 中規中矩，性格溫婉平和！
css padding與容器的尺寸關係複雜
對於block水平元素 沒有padding的時候 .gay padding影響元素尺寸 （理解為人身體的脂肪，人和人之間的距離）.gay
但是width:auto或box-sizing為border-box的時候 .gay
.text這個時候padding不會影響元素尺寸，但是當padding大小超過寬高的時候，.text這時候元素按內聯元素最小寬度顯示，此時padding同樣影響了元素的尺寸。
結論：對於block水平元素
1.padding值暴走，一定會影響尺寸；
2.width：auto，padding影響尺寸；
3.width為auto或box-sizing為border-box，同時padding值沒有暴走，不影響尺寸。
對於inline水平元素
水平padding影響尺寸，垂直padding不影響尺寸 .leader,但是會影響背景色（佔據空間）。大到比父元素還大的時候，設定overflow：auto會出現滾動條
如何利用這一特性
高度可控的分割線
1.直接使用字元：註冊|退出登入
2.inline-block控制：註冊|退出登入
3.使用inline padding：註冊|退出登入
註冊退出登入
span
1.關於padding的負值，padding不支援任何形式的負值。
2.關於百分比均是相對與寬度計算的。
如何實現這一特性，輕鬆實現乙個正方形 div:padding:50%(相對百分比計算)
真實案例
慕課網.container .example實現乙個正方形的響應式布局。
3.inline水平元素的padding百分比值
1.同樣相對於寬度計算
2.預設的高度寬度細節有差異
3.padding會斷行
inline元素的padding斷行
span
內有文字若干
如果是空的inline元素，高度還是要比寬度高
設定fon-size:0px；得到乙個正方形。
為何會有額外的高度
inline元素的的那個會讓「幽靈空白節點」顯現，也就是規範中的strut出現。content-area，可以通過font-size:0px;讓他不顯示。
1.ol/ul列表
1.1 ol/li元素內建padding-left，但是單位是px不是em;
1.2 例如chrome瀏覽器下是40px;
1.3 如果字型大小很小，間距就會很開；
1.4 如果字型大小很大，序號回爬到容器外面
margin等一般em的。
2.表單元素的內建padding值
所有的瀏覽器input/textarea輸入框內建padding
所有瀏覽器button按鈕內建padding
部分瀏覽器select下拉內建padding，如firefox ie8+可以設定padding
所有瀏覽器radio/checkbox單選框無內建padding
button按鈕元素的按鈕是最難控制的。
1.chrome瀏覽器是沒有問題的。
2.firefox瀏覽器 設定padding:0左右依然有padding！ 需要設定button::-moz-focus-innerpadding才為0
3.ie瀏覽器 ie7文字越多，左右padding逐漸變寬。設定overflow:hidden以後就正常了。
4.padding與高度計算的不相容
button
讓button可見性隱藏。
實現3道槓——不借助偽元素，只用乙個div
實現示意
.line-tri
2.配合margin實現等高布局。
.box
.child-orange,.child-green
.auto{
padding-left:120px;
CSS深入理解學習筆記之padding
1 padding與容器尺寸之間的關係 對於block水平元素 padding值暴走，一定會影響尺寸 width非auto，padding影響尺寸 width為auto或box sizing為border box，同時padding值沒有暴走，不影響尺寸。對於inline水平元素 水平padding...
深入理解CSS背景
背景色background接受所有合法的顏色，還可以接受乙個使背景透明的關鍵字。關於顏色的設定請移步至此。背景顏色不能繼承。其預設值是transparent，如果乙個元素沒有指定的顏色，那麼背景就應當是透明的，這樣其祖先元素的背景才能可見。值 transparent inherit 初始值 tran...
深入理解CSS浮動
float 浮動 浮動元素脫離普通流，然後按照指定方向，向左或者向右移動，碰到父級邊界或者另外乙個浮動元素停止 值 left right none inherit 初始值 none 應用於 所有元素 繼承性 無 浮動流正常流中元素乙個接乙個排列 浮動元素也構成浮動流 塊級框浮動元素自身會生成乙個塊級...