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

个回答

ahao430

2016-07-08 04:00:24

已采纳

刚开始以为是因为p是行内元素的关系，设置width、height无效。但是设置display:inline-block，p的宽高变0后依然溢出文字。想起这是因为文字属于一个隐式的容器包裹。
因此可以看成父容器p没有被子容器文本撑起，但是子容器依然可见，只要给父容器p做一个BFC，比如overflow:hidden就好了。

2
可口可乐的乐

2017-10-07 14:30:51

字体是受font-size开控制的,元素的高度根据其填充内容的高度决定的

0
大块吃肉188

2016-09-09 10:17:36

对于一个块级元素，如果设置了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>
```
效果如下
所以我们把width : 0 ; height : 0 （没有设置overflow : hidden）时候，p中的内容依旧可以看到，是全部溢出了，但其实p已经是属于不可见的了。那么我们对p再设置overflow : hidden 后所有的内容就隐藏了（因为全部内容都是溢出的）
新手理解，欢迎指正交流

9