                        课程
                    
                        /前端开发
                        
                            /jQuery
                        
                        /jQuery基础 (一)—样式篇

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

rt 应该是什么原因呢 text类型的特殊性？

HayVic

2016-07-08

源自：jQuery基础 (一)—样式篇 2-9

关注问题我要回答

9314

操作

收起

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>

效果如下