1.基本屬性
(1) 負值
不存在
(2) 百分比
只相對父級寬度進行計算
.father{
width:100%;
}
.son{
padding:50%;
line-height:0;
}
子元素四邊均為50%寬扼菠，所以子元素是以父元素為寬度的一個正方形唯蝶。
(3) px
padding:1px 2px 3px 4px;
表示上內(nèi)邊距為1px,右內(nèi)邊距為2px,下內(nèi)邊距為3px,左內(nèi)邊距為4px至耻。
2.在塊狀元素和內(nèi)聯(lián)元素中的作用
(1) block元素
如果width為auto或者box-sizing:border-box煌张，且padding不是故意設(shè)置很大量愧，padding不會影響尺寸。
原因：width為auto時褒搔，相當(dāng)于寬度100%夷磕，此時padding只會讓內(nèi)容區(qū)域變小，而box-sizing是css3屬性亏拉，具體看介紹扣蜻。
如果width不為auto，那么此時padding將會對尺寸造成影響及塘。
如果padding值特別大莽使，那么會對尺寸產(chǎn)生影響。
(2) inline元素
行級元素padding只在水平方向有效笙僚，豎直方法只會影響行級元素的背景芳肌。
3.應(yīng)用在布局
兩列布局
實現(xiàn)上面的效果，我們可以有兩種方法翎迁。
第一種
.father{
padding-left:200px;
}
img{
position:absolute;
margin-left:-200px;
}
第二種
img{
float:left;
}
右側(cè)文字
div{
padding-left:200px;
}
我們可以修改上面的padding實現(xiàn)圖片和文字之間有間距肃拜。
4.padding的小技巧
(1) 三道杠
.threebar{
display:inline-block;
width:60px;
height:10px;
padding:10px 0;
border-top:10px solid;
border-bottom:10px solid;
background:#000;
background-clip:content-box;
}
(2) 移動端自適應(yīng)的1:1頭圖
.header-img{
padding:50%;
background:url(...);
background-size:100%;
}
(3) 分割線
<span class='line'></span>
.line{
padding:16px 6px 2px;
margin-left:12px;
font-size:0;
border-left:solid 2px;
}
(4) 按鈕的兼容性
button標(biāo)簽在不同瀏覽器中有很大的兼容性差異柿菩，所以我們可以用label來替代button懦胞，例如：
<button id='btn'></button>
<label>提交</label>
label{
display:inline-block;
padding:10px 20px;
}
button{
position:absolute;
z-index: -1;
}
