页面中文字增多，字号会忽然变大

我也是偶然发现这个问题，原本活动说明只有一条内容，可是后来运营想加到六条，那就加呗，我就直接把增长的文案复制到代码中

以前的内容是这样的：活动说明的内容字号设置为24px

在我加了几个文案以后，忽然变成了这样：

当时我是蒙的，查看控制台代码：

字号设置依旧是24px啊，但是24px何时是这么大的字号了

对比其余设置为24px的字号：

上图中，“（剩余77）” 才是正常的24px字号，再看看下面的活动说明内容，明显不同

因而开始了艰难的找bug。。。

把其余HTML结构注释掉，没用

把全部的CSS样式一点点注释掉，也没用

当时个人心里是崩溃的，历来没有见过这样的问题

后来反复的调试，最终把代码删到只剩内容，让我发现了两个可疑的问题

（1）font-family: 'Microsoft YaHei';  可使字号变大

图一是没有使用微软雅黑的情况，图二是使用了微软雅黑的情况，能够看出两个样式字体大小明显不一致，可是差异并不大（字体颜色是微软雅黑自带的，我没有设置颜色）

那字体设置为微软雅黑就是形成字体变大的根本缘由吗，固然不是，微软雅黑咱们常常会用到，可是并无发现这种情况，

因此能够理解为，虽然微软雅黑会稍微影响字体大小，但影响并不大（小白本身的理解，有不正确之处欢迎各路大神指出）

（2）给内容的父元素或者祖先元素设置高度能够回到正常的大小

HTML代码：

<div class="demo">
  <p>这是一个测试这是一个测试这是一个测试</p>
  <p>这是一个测试这是一个测试这是一个测试</p>
  <p>这是一个测试这是一个测试这是一个测试</p>
  <p>这是一个测试这是一个测试这是一个测试</p>
  <p>这是一个测试这是一个测试这是一个测试</p>
  <p>这是一个测试这是一个测试这是一个测试</p>
  <p>这是一个测试这是一个测试这是一个测试</p>
  <p>这是一个测试这是一个测试这是一个测试</p>
  <p>这是一个测试这是一个测试这是一个测试</p>
</div>

 

图一是设置了demo高度300px，字体24px，  图二没有设置高度，只设置字体24px，下面是效果对比图：

能够看出，图一才是正确的字体大小，而图二根本不是24px，差异就只在于有没有设置父元素的高度

可是为何父元素有没有设置高度会影响子元素的字体呢，父元素的高度不该该是由子元素自动撑开的吗，

在咱们平时的定位布局中，并非全部的元素都须要设置高度的，若是给每个元素都设置高度，会显得太过于死板了

小白我只找到了问题所在，还不知道为何父元素或者祖先元素的高度会影响字体，之后再继续探寻

有错误之处欢迎指出

by新手小白的记录