CSS: border-box

在css中常常要自己去計算padding、margin等等的推擠造成的盒模型大小不同，所以css有提供一個叫border-box的方法讓你不用去計算。

box-sizing

這個就是用來選擇是否使用border-box，不修改的話預設會是content-box。

1
2
3

.box{
	box-sizing: content-box;
}

想要使用border-box只需要把content-box做修改即可

1
2
3

.box{
	box-sizing: border-box;
}

因為border-box很方便，所以開發者通常會希望一次都套用到所有元素上，這時候就可以這樣寫

*, 
*::before, 
*::after{
	box-sizing: border-box;
}

這樣所有元素都會吃到border-box，* 代表全部，至於before和after就是擬態選擇器中有稍微提到的pesudo class，這部分以後會一起介紹。

其實我之前切版都沒有使用到，下次應該會來試試，這樣我就不用自己計算推擠了。