1.什么是盒子模型

盒子模型就是当你对一个问当进行布局的时候,浏览器的渲染引擎会根据标准之一的CSS基础框盒子模型，将所有元素表示为一个个矩形的盒子

2.盒子模型的组成部分

一个盒子模型由四个部分组成：content,padding,border,margin.

content：盒子中心的内容，显示文本和图片
padding:盒子的内边距，清楚内容周围的区域,内边距是透明的,取值不能为负,受到盒子背景颜色的影响
border：即盒子的外边框区域,可以自己设置粗细，颜色，样式。
margin:盒子的外边距，即盒子最外边框线到其他盒子或者浏览器键的距离。

下面来段代码

<style> .box { height: 100px; width: 100px; margin: 10px; padding: 10px; background-color: pink; border: 10px solid green; } </style> <div class="box">盒子模型</div>

在默认情况下，盒子模型默认为W3C标准盒子模型

3.标准盒子模型

 标准盒子模型就是浏览器默认的盒子模型
 如下图：