亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

padding-top

?#move?a{
	display:?inline-block;
	width:?58px;
	/*height:?55px;*/
	border:1px?solid?#ddd;
	background-color:?#fff;
	text-align:?center;
	margin:?10px?17px;
	position:?relative;
	padding-top:?40px;
	color:?#9c9c9c;
	font-size:?12px;
	text-decoration:?none;
	line-height:?25px;
	overflow:?hidden;
	}

#move?a?i{
	position:?absolute;
	top:?10px;
	left:?0;
	display:?inline-block;
	width:?100%;
	text-align:?center;
	filter:?alpha(opacity=100);
	opacity:1;
	}	

顯示如下:

http://img1.sycdn.imooc.com//58f3215e0001be4803290247.jpg

當我注釋掉padding-top這一句代碼時
http://img1.sycdn.imooc.com//58f321b100018a8103280155.jpg

改為padding-top:20px;時:

http://img1.sycdn.imooc.com//58f321fc00015ff703450205.jpg

1.這個padding-top不是a標簽的頂部填充屬性嗎,那么怎么影響到p標簽中的文字的呢?

2.padding-top在盒子模型里是內容到頂部邊框的距離,a標簽的內容就是ip標簽,不應該是圖片到頂部邊框的距離嗎,但是在i標簽又設置了top=10px;使得這個圖片到頂部邊框的距離為10px,那么padding-top到底是 個怎么回事呢

小白好多不懂,還望大神賜教

正在回答

2 回答

<i>標簽絕對定位后,脫離了標準文檔流,所以padding-top只會影響P標簽的文字

1 回復 有任何疑惑可以回復我~

1?<a href="#"><i><img src="" /></i><p>文字</p></a>

display:?inline-block;?display 屬性規定元素應該生成的框的類型。inline-block ? ?行內塊元素 ,就相當于把這個<a></a>設置為塊狀元素>。你可以把<a>當做一個<div>一樣,里面包含著<i><img><p>三個元素,所以這個padding-top就是影響了這三個元素,也就是<p>文字<p>會距離這個<a>的頂部距離為你設置的值。

當你注釋掉后,里面的元素呈現的效果就只有text-align:?center和line-height:?25px;?

(line-height是行高的意思,這個用法我還沒有過多的接觸,學生初級小白一枚,就是如果你要設置字體垂直居中的話就把行高和框高設置一樣就行)

2 第二個問題,在a當中 設置了這個元素position:?relative;它的意思是相對定位,將影響接下來有設置position:?absolute的元素,這個position:?absolute的意思是絕對定位,它的意思是基于這個設置了relative的元素位置而定義自己的位置,比如這里的top:10px;意思就是<i></i>這個塊狀元素(display:?inline-block;?)距離這個<a>這個元素的頂部距離為10px。left就是距離<a>左邊的距離.

http://www.w3school.com.cn/cssref/pr_padding-top.asp?

http://www.w3school.com.cn/cssref/pr_class_display.asp?

http://www.w3school.com.cn/cssref/pr_class_position.asp?

我講的是我大概的意思,你也可以參考下手冊然后自己的理解思考下吧。

3.

0 回復 有任何疑惑可以回復我~

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號