我们知道，line-height是设置行高，通常我们在项目开发中，最常用之一就是将盒子中的内容进行居中对齐。下面我们将讲述line-height在传统盒子模型和c3盒子模型中需要注意的一点。
下面定义了两个div盒子
<body>
<div class="traditional-box">我是小猪佩奇</div>
<div class="css3-box">我是小猪佩奇</div>
</body>分别定义其样式，第一个div是传统盒子模型，第二个div设置了box-sizing是c3盒子模型。
都把line-height设置成height的高度，按理说都该居中对齐。下面我们看看结果怎么样
<style>
.traditional-box {
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
background-color: skyblue;
border: 10px solid pink;
}
.css3-box {
box-sizing: border-box;
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
background-color: skyblue;
border: 10px solid pink;
}
</style>结果如下
我们发现，第一个传统盒子模型的文字居中了，但第二个c3盒子中的内容却偏下，这是为什么呢？
因为我们分别给两个盒子加了20px的边框，传统盒子被撑大了，变成了240×240，但是内容部分仍然是200×200，所以设置行高200px是可以把内容居中的。
在c3盒子中，加了20px边框，盒子不会被撑大，但是内容部分变成了160×160px，所以设置行高200px>160px，所以内容靠下。
所以，我们把c3盒子中的行高设置成160px就可以居中啦~~
