在 HTML 裡的每個元素都有一個 box-model，而 box-model 是用來表達一個元件的呈現方式，在 CSS 裡可以用 box-sizing 這個屬性去設定，以下是他可以設定的值

1. content-box –> 預設的模式
2. border-box

兩者的差別是在 border-box 的 width 就是我們自己設定的 width ，但是 content-box 的 width 還要加上 bordex and padding 的 width ，才是呈現的 width ， 有了 border-box 我們就不用每次都在那算寬度了，是不是很棒啊!!

讓我們來看個範例範例

<style>
	.box1{
		box-sizing:content-box;
		width:300px;
		border: 5px solid black;
		padding: 0 10px;
		text-align: center;
		background-color: orange;
	}
	.box2{
		box-sizing:border-box;
		width:300px;
		border: 5px solid black;
		padding: 0 10px;
		text-align: center;
		background-color: red;
}
<div class="box1">
	box1
</div>
<div class="box2">
	box2
</div>

box1 的寬度要加上 padding and border 的 width 所以他的 width 不是 300px ，而是 330px

<style>
	.box1{
		box-sizing:content-box;
		width:300px;
		border: 5px solid black;
		padding: 0 10px;
		text-align: center;
		background-color: orange;
	}
	.box2{
		box-sizing:border-box;
		width:300px;
		border: 5px solid black;
		padding: 0 10px;
		text-align: center;
		background-color: red;
}

</style>

<div class="box1">
	box1
</div>
<div class="box2">
	box2
</div>

上面的內容只有改 box1 的 width ，把它改成 270px 就會跟之前的 box2 一樣大了