第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

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

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

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

改為padding-top:20px;時:

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

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

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

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

正在回答

2 回答

<i>標(biāo)簽絕對定位后,脫離了標(biāo)準(zhǔn)文檔流,所以padding-top只會影響P標(biāo)簽的文字

1 回復(fù) 有任何疑惑可以回復(fù)我~

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

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

當(dāng)你注釋掉后,里面的元素呈現(xiàn)的效果就只有text-align:?center和line-height:?25px;?

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

2 第二個問題,在a當(dāng)中 設(shè)置了這個元素position:?relative;它的意思是相對定位,將影響接下來有設(shè)置position:?absolute的元素,這個position:?absolute的意思是絕對定位,它的意思是基于這個設(shè)置了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 回復(fù) 有任何疑惑可以回復(fù)我~

舉報

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號