                        課程
                    
                        /前端開發(fā)
                        
                            /jQuery
                        
                        /jQuery基礎(chǔ) (一)—樣式篇

為什么P元素width：0；height：0；但是仍然可以顯示文字呢

rt 應(yīng)該是什么原因呢 ?text類型的特殊性？

HayVic

2016-07-08

源自：jQuery基礎(chǔ) (一)—樣式篇 2-9

關(guān)注問題我要回答

9414

操作

收起

3 回答

ahao430 回答被采納 +3 積分
2016-07-08

剛開始以為是因?yàn)閜是行內(nèi)元素的關(guān)系，設(shè)置width、height無效。但是設(shè)置display:inline-block，p的寬高變0后依然溢出文字。想起這是因?yàn)槲淖謱儆谝粋€(gè)隱式的容器包裹。

因此可以看成父容器p沒有被子容器文本撐起，但是子容器依然可見，只要給父容器p做一個(gè)BFC，比如overflow:hidden就好了。

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

收起回答

#1

HayVic 提問者

大概了解了 P本來就是個(gè)塊狀元素我去看看BFC的內(nèi)容

2016-07-08 回復(fù) 有任何疑惑可以回復(fù)我~

#2

墨宇

父容器p做一個(gè)BFC，就不可見了呢？原理是啥？

2016-07-28 回復(fù) 有任何疑惑可以回復(fù)我~

#3

IT自學(xué)

p元素默認(rèn)狀態(tài)下百分百是一個(gè)塊級元素，怎么可能是行內(nèi)元素，如果是行內(nèi)元素，設(shè)置width和height均為0，怎么生效了，所以此回答錯(cuò)誤。

2016-12-30 回復(fù) 有任何疑惑可以回復(fù)我~

可口可樂的樂
2017-10-07

字體是受font-size開控制的,元素的高度根據(jù)其填充內(nèi)容的高度決定的

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

收起回答

大塊吃肉188
2016-09-09

對于一個(gè)塊級元素，如果設(shè)置了width和height，并沒有設(shè)置overflow，當(dāng)文本內(nèi)容過多時(shí)就會(huì)溢出

<!DOCTYPE?html>
<html>
<head>
<meta?charset="UTF-8">
<title>Document</title>
</head>
<body>
<p?style="width:50px;height:50px;border:1px?solid?blue">我在慕課網(wǎng)學(xué)習(xí)jQuery基礎(chǔ)（一）樣式篇</p>
</body>
</html>

效果會(huì)是這樣的

內(nèi)容過多溢出了p標(biāo)簽，然后我給p標(biāo)簽設(shè)置overflow : hidden(這個(gè)屬性值本意是對于溢出部分隱藏，也可以用來清除浮動(dòng)）

<!DOCTYPE?html>
<html>
<head>
<meta?charset="UTF-8">
<title>Document</title>
</head>
<body>
<p?style="width:50px;height:50px;overflow:?hidden;border:1px?solid?blue">我在慕課網(wǎng)學(xué)習(xí)jQuery基礎(chǔ)（一）樣式篇</p>
</body>
</html>

效果如下

所以我們把width : 0 ; height : 0 ?（沒有設(shè)置overflow : hidden）時(shí)候，p中的內(nèi)容依舊可以看到，是全部溢出了，但其實(shí)p已經(jīng)是屬于不可見的了。那么我們對p再設(shè)置overflow : hidden 后所有的內(nèi)容就隱藏了（因?yàn)槿績?nèi)容都是溢出的）

新手理解，歡迎指正交流

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

收起回答