我设置body{font-size:100px;}后，其他元素的行高好像都收到了影响，页面结构乱了。
请问为什么会这样呢？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>my-test</title>
<style>
*{ margin: 0; padding: 0; }
body{ font-size: 100px; } /*去掉这个设置就是正常的*/
.head{ height: 70px;
background: lightblue;
}
b{ font-size: 30px;
}
</style>
</head>
<body>
<div class="head">
<b class="status">代开始</b><b class="status">已结束</b>
</div>
</body>
</html>
截图：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>my-test</title>
<style>
*{ margin: 0; padding: 0; }
body{ font-size: 100px; } /*去掉这个设置就是正常的*/
.head{ height: 70px;
font-size: 0;
background: lightblue;
}
b{ font-size: 30px;
}
</style>
</head>
<body>
<div class="head">
<b class="status">代开始</b><b class="status">已结束</b>
</div>
</body>
</html>.head继承了body的line-height, line-height的默认值是normal ，chrome下是1.14em.
你设定了body的font-size: 100px 也就意味着body下的直接子元素.head的line-height是114px，> .head的高度70px,所以b超出了.head
.head继承了body的font-size，那么.head的font-size也是100px。
此时在.head里有行内元素的情况下（如本例中有b元素），那么.head的line-height默认就是normal（通常为1.14em），也就是说.head的行高约为114px。
文字显示的位置受ling-height影响，背景色受height的影响，所以即使你设置.head为70px，这两个文字也显示到了.head背景色的外面.
解决的办法：
1.显式设置.head的font-size或者line-height
2.去掉.head的行内元素，如浮动b元素或者将b元素设置块状元素
补充：
直接设置b的font-szie改变的是b元素的行高，并不是.head的行高
以上仅个人观点，欢迎讨论
如果在body上加100px,那子标签每一个都要重新设置font-size了，很明显<b>标签被挤出去了，所以在.head上也要修改font-size，这种属性最好不要加在全局样式上...
你高度为70，字体大小为100，你说你这个。。。。。
因为body就是<body>啊，全局样式----当然在body里面的元素会受到影响了，如果你不给其他元素设置字体大小的话，就会默认使用body的字体大小font-size=100px;因此行高会被影响。 解决方法就是在各个元素标签内再次设置字体样式
样式被继承了，你还是好好学学基础吧
这跟line-height的initial值有关，标准里面是initial值是normal，而normal是怎样计算的呢？"告诉用户代理根据该元素的字体把应用值设置为一个“合理的”值。该值与<number>的含义相同。我们推荐介于1.0到1.2的“常规”应用值。计算值为'normal'。这个值是参考元素自身的字体大小。"line-height标准 所以不指定div.head的高度，直接写入文本：
这样整个div的高度计算成了114px，因为div.head继承了body的line-height,可以看到代理计算值也是在1.0-1.2之间。
继续在div里面插入两个内联元素标签，指定内联元素的line-height和字体大小一样，可以看到整个div的高度还是114px，这是因为div的line-height还是继承body的line-height：
所以，正如一楼所答的如果 div.head的font-size指为0，那么div的line-height参考自己font-size的值就会很小，看起来排版就正常了。