css box-sizing属性的应用

不指定box-sizing 的情况

默认情况下，宽度和高度计算方式如下：
width + padding + border = 元素实际的宽度
height + padding + border = 元素实际的高度

1.先来看一个盒子（没有加内边距和边框的情况下）

<div>123</div>

<style>
	div {
		width: 200px;
		height: 200px;
		background-color: pink;
	}
</style>

这个盒子里面装了123，盒子的实际高度和宽度都为200px

2.加了内边距和边框之后

<div>123</div>

<style>
	div {
		width: 200px;
		height: 200px;
		background-color: pink;
		padding: 20px;
		border: 2px solid skyblue;
	}
</style>

这个盒子的实际宽度应为：width(200)+border(2)*2+padding(20)*2=244
实际高度也为：height(200)+border(2)*2+padding(20)*2=244

所以，这意味着当你设置元素的宽度/高度时，该元素通常看起来比你设置的更大，这是因为元素的内边距和边框已被添加进元素的指定高度和宽度中

什么是box-sizing

CSS box-sizing 属性允许我们在元素的总宽度和高度中包括内边距（填充）和边框

语法： box-sizing: content-box | border-box | inherit

值	描述
content-box	宽度和高度分别应用到元素的内容框， 在宽度和高度之外绘制元素内边距和边框,和不指定box-sizing是一样的
border-box	为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。也就是说宽度和高度是定好的，不能再变了
inherit	规定应从父元素继承box-sizing属性

指定box-sizing: border-box的情况

<div>123</div>

<style>
	div {
		box-sizing: border-box;
		width: 200px;
		height: 200px;
		background-color: pink;
		padding: 20px;
		border: 2px solid skyblue;
	}
</style>

添加了box-sizing: border-box; 之后，这个盒子的实际高度和宽度仍为200px，但是里面内容框的宽度和高度减小了.这种方法是极好的。

我们以后可以直接在 css 前面写上

* {
	box-sizing: border-box;
}