CSS3--box-sizing屬性練習（border-box設置padding和border不會改變width和height的值）

  語法

box-sizing: content-box  /  border-box   (padding-box已被移除）

默認值：content-box

適用於：所有接受 width 和 height 的元素

繼承性：無

動畫性：無

計算值：指定值

  取值

content-box:呈現標准模式下的盒模型，定義padding和border會改變width和height的值。（這個和正常的盒子一樣，一般不定義）

border-box:padding和border被包含在width和height之內，定義padding和border並不會改變width和height的值，此屬性表現為怪異模式下的盒模型。

  兼容性

（以上數據來自css參考手冊）特定的瀏覽器需要添加前綴

  用法

 使用box-sizing:border-box，在布局的時候不需要考慮添加了padding和border而導致撐破容器或者內容移位。

.item01 .content{
	width: 70%;
	float: left;
	box-sizing:border-box;
	padding:10px;
	border:10px solid #99cccc;
	background-color: rgba(255,204,204,0.7);
}
.item01 .sidebar{
	width: 27%;
	float: right;
	box-sizing:border-box;
	padding:10px;
	border:10px solid #99cccc;
	background-color: rgba(255,204,204,0.7);
}