CSS盒子模型

CSS的盒模型分为：content-box 和 border-box 两种

元素的盒模型组成

  元素的盒模型主要由：margin、border、padding、content（由外到内）组成

CSS盒模型样式的设定：box-sizing:content-box(默认)/border-box

content-box 与 border-box的区别

  content-box 与 border-box 的区别主要就是它们的width、height计算方法不同。

  顾名思义 content-box 的 width、height 只由 content 决定

  同样的 border-box 的 width、height 由 content + padding + border 决定

两种盒模型

相同样式，content-box 与 border-box 的区别

相同样式不同盒模型的区别

  ！！！ 当涉及到margin padding border 样式的时候，建议使用border-box盒模型