1.css 盒子模型(css box model)

所有的html元素本質上都是盒子模型。在css 中，盒子模型常用來進行設計和布局。

盒子模型包括：margin(外邊距)，padding(內邊距)，border(邊框)，actual content(實際的內容區域)，如下：

2.計算盒子尺寸的兩種方式

根據為元素的box-sizing屬性賦的值的不同，盒子尺寸有兩種計算方式，content-box 和 border-box.外邊距影響盒子周邊的距離，在計算盒子尺寸時，無需考慮。

? ? 1.box-sizing:content-box(css 盒子模型的默認值)

box-sizing:content-box

盒子的寬 ＝ width + padding-left + padding-right + border-left + border-right ;

盒子的高? ＝ height + padding-top + padding-bottom + border-top+ border-bottom ;?

2.box-sizing: border-box

box-sizing: border-box

盒子的高 ＝ height

盒子的寬 ＝ width

盒子的尺寸只跟盒子的寬度和高度屬性相關。瀏覽器會考慮內邊距和邊框，合理的調整高度和寬度屬性。因此總尺寸等于為高度和寬度屬性設置的值。

3. 設置box-sizing

任何元素都可以設置box-sizing這個屬性，因此可以混用兩種盒子，但為了保持一致，通常選擇其中一種使用。設置方法是：用通用選擇器進行設置，指定盒子模型的類型(content-box是默認值)：

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