最近中文字幕高清中文字幕无,亚洲欧美高清一区二区三区,一本色道无码道dvd在线观看 ,一个人看的www免费高清中文字幕

radio/checkbox不能用padding撐開

網(wǎng)頁文字大小一般為12或14像素，padding-left為22~25px

<button?id="btn"></button>
<label?for="btn">按鈕</label>

label{

display:inline-block;

line-height:20px;

padding:10px;

}

padding-left:22px;

文字12px/14px

padding在子元素上

padding在容器上

radio/checkbox不能用padding撐開

改變content area

1. 使用百分比單位構建固定比例布局結構（正方形）

.div{padding:50%;}

2. 配合margin等高布局

/*父盒子*/
.box{
???overflow:?hidden;
???resize:vertical;
}
/*子盒子*/
.child-orange,.child-green{margin-bottom:?-600px;padding-bottom:?600px;}
.child-orange{
???float:?left;background:?orange;
}
.child-green{
???float:?left;background:?green;
}

3. 兩欄自適應布局

<div?class="box">
???<img?src="mm.jpg">
????words...
</div>
<div>
???<img?src="mm.jpg">
???<div?class="auto">words...</div>
</div>

/*padding在容器上*/
.box{
???padding-left:?120px;
}
.box?img{
???float:?left;
???margin-left:?-120px;
}
/*padding在子元素上*/
img{
?float：left；
}
.auto{
?padding-left:120px;
}

padding與圖形繪制

實現(xiàn)三道杠：

<div?class="line-tri"></div>

.line-tri{
????width:150px;
????height:30px;
????padding:15px?0;/*杠杠中間的空白部分*/
????border-top:?30px?solid;/*第一道杠*/
????border-bottom:30px?solid;/*第三道杠*/
????background-color:black;/*第二道杠*/
????background-clip:content-box;/*第二道杠，important*/
}

button表單的padding

1. 對于Firefox，設置padding:0左右依然有padding，所以需設為：

button::-moz-focus=inner{
????padding:0;
}

2. 對于IE7，文字越多，左右padding逐漸變大，所以需設為：

button{
????overflow:visible;
}

3. padding與inline-height不兼容，所以個人技巧：

<button?id="btn"></button>
<label?for="btn">button</label>

然后設置label樣式

label{
????display:inline-block;
????inline-height:20px;
????padding:10px;
}

.div{
????padding:50%;
}

可以制作正方形。

但是對于inline元素，垂直padding會讓“struct（幽靈空白節(jié)點）”出現(xiàn)，所以改成

.inline_div{
????padding:50%;
????font-size:0;
}

對于block水平元素，

1. 當width:auto or box-sizing:border-box，padding值沒有暴走，不影響尺寸。

2. padding值暴走，一定會影響尺寸。e.g.當padding大小超過寬高的時候，容器寬度改變，如中間有文字，那么文字以最小寬度顯示。

3. width非auto，padding影響尺寸，容器擴大。

對于inline水平元素，

1. 水平padding影響尺寸，垂直padding不影響尺寸，但是會影響背景顏色（占據(jù)空間）。

應用：高度可控的分割線

比如：實現(xiàn) ?注冊 | 登錄，中間的分割線

html：

注冊<span></span>登錄

CSS：

span{
????padding:?16px?6px?1px;?
????margin-left:?12px;?
????border-left:?2px?solid;
????font-size:0;
}