Day3:进入新手村前先让我复习一下QQ-CSS-box-sizing

box-sizing这个语法可以让设计师或是写程序的人不用去加加减减的计算区块
(比如说线条宽度或是padding之类)
直接限定一个最外围的像素，在由这个像素往内做调整

这个语法是属於CSS3的语法，算是近几年来比较新的功能，所以对於一些比较旧版的浏览器可能多少会有一点相容性问题，这时候可以使用 Can I use 这个网站去查询支援的浏览器。

那以下我们就做个有使用box-sizing与没使用的对照

/*没有使用box-sizing*/
.box-sizing-off{
	text-align: center;
	line-height: 200px;
	height: 200px;
	width: 200px;
	border: 10px solid blue;
}


/*有使用box-sizing*/
.box-sizing-on{
	box-sizing: border-box;
	text-align: center;
	line-height: 180px;
	height: 200px;
	width: 200px;
    border: 10px solid red;
}

一般来说在没使用的情形之下，以上面为例子来说就是白色部分的宽高皆为200px，再加上border线条宽度是10px，所以第一个没使用box-sizing的总像素宽高就都会变成原本的200px+线条一边10px*2=220px。

但是在使用了box-sizing之後，因为限制外围宽高为200px，所以线条宽度会往内移，此时内部没填色的部分宽高皆为180px，加上线条一边10px*2=200px