Div寬度是否包含Padding_Border——box-sizing

CSS盒式模型的寬度設定有兩種模式：

1. width = 内容寬度;

   實際總寬度 = width + padding + border;

   這種情況下設定了width後，内容寬度不變，調整padding和border會使得div的實際總寬度變化;

2. width = 實際總寬度;

   width = 内容寬度 + padding + border;

   這種情況下設定了width後，div總寬度不變

這個是通過設定css屬性box-sizing來控制的。

W3CSchool中是這樣定義的：

box-sizing 屬性允許您以特定的方式定義比對某個區域的特定元素。

例如，假如您需要并排放置兩個帶邊框的框，可通過将 box-sizing 設定為”border-box”。這可令浏覽器呈現出帶有指定寬度和高度的框，并把邊框和内邊距放入框中。

文法

box-sizing: content-box|border-box|inherit;

值	描述
content-box	這是由 CSS2.1規定的寬度高度行為。寬度和高度分别應用到元素的内容框。在寬度和高度之外繪制元素的内邊距和邊框。
border-box	為元素設定的寬度和高度決定了元素的邊框盒。就是說，為元素指定的任何内邊距和邊框都将在已設定的寬度和高度内進行繪制。通過從已設定的寬度和高度分别減去邊框和内邊距才能得到内容的寬度和高度。
inherit	規定應從父元素繼承 box-sizing 屬性的值。