css盒模型与box-sizing关系

一、css盒子模型

CSS盒模型本质上是一个盒子，盒子里包含：Margin(外边距)、Padding(内边距)、Border(边框)、Content(内容)

设置一个CSS元素的宽度和高度属性时，你只是设置内容区域的宽度和高度

---

盒子模型(Box Model)

css盒模型例子

二、box-sizing

语法：box-sizing:content-box|border-box|inherit;

content-box: 只包含元素内容大小，在宽度和高度之外绘制元素的内边距和边框，浏览器默认（ps:css盒模型）

300 * 100

border-box： 包含 元素内容大小、padding、border。为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制

300 * 100