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

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

rt 應該是什么原因呢 ?text類型的特殊性？

HayVic

2016-07-08

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

關注問題我要回答

9418

操作

收起

3 回答

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

剛開始以為是因為p是行內元素的關系，設置width、height無效。但是設置display:inline-block，p的寬高變0后依然溢出文字。想起這是因為文字屬于一個隱式的容器包裹。

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

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

收起回答

HayVic 提問者

大概了解了 P本來就是個塊狀元素我去看看BFC的內容

2016-07-08 回復有任何疑惑可以回復我~

墨宇

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

2016-07-28 回復有任何疑惑可以回復我~

IT自學

p元素默認狀態下百分百是一個塊級元素，怎么可能是行內元素，如果是行內元素，設置width和height均為0，怎么生效了，所以此回答錯誤。

2016-12-30 回復有任何疑惑可以回復我~

可口可樂的樂
2017-10-07

字體是受font-size開控制的,元素的高度根據其填充內容的高度決定的

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

收起回答

大塊吃肉188
2016-09-09

對于一個塊級元素，如果設置了width和height，并沒有設置overflow，當文本內容過多時就會溢出

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

效果會是這樣的

內容過多溢出了p標簽，然后我給p標簽設置overflow : hidden(這個屬性值本意是對于溢出部分隱藏，也可以用來清除浮動）

<!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">我在慕課網學習jQuery基礎（一）樣式篇</p>
</body>
</html>

效果如下