前端面试题中的“盒模型”是什么？

　　marginmargin是盒子的外边框，包含了上下左右四条边，开发者可以单独设置，也可以统一设置。margin-top：上边距margin-right：右边距margin-bottom：下边距margin-left：左边距代码示例1：/*margin属性后只跟1个值，同时设置四条边的边距相等*/margin:10px;/*上面的样式等同于下面的样式*/margin-top:10px;margin-right:10px;margin-bottom:10px;margin-left:10px;代码示例2：/*margin属性后跟2个值，第一个值设置上下边距，第二个是设置左右边距*/margin:20px 10px;/*上面的样式等同于下面的样式*/margin-top:20px;margin-right:10px;margin-bottom:20px;margin-left:10px;代码示例3：/*margin属性后跟3个值，第一个值设置上边距，第二个是设置左右边距，第三个值设置下边距*/margin:20px 50px 10px;/*上面的样式等同于下面的样式*/margin-top:20px;margin-right:50px;margin-bottom:10px;margin-left:50px;代码示例4：/*margin属性后跟4个值，第一个值设置上边距，第二个是设置右边距，第三个值设置下边距，第四个值设置左边距*/margin:10px 20px 30px 40px;/*上面的样式等同于下面的样式*/margin-top:10px;margin-right:20px;margin-bottom:30px;margin-left:40px;paddingpadding表示盒子内边距，与外边距不同，padding不是只能完全透明，可以设置背景颜色和图片。padding也包含了上下左右四个方向边距，可以单独设置，也可以简写设置，与上面margin类似，可参考margin的4个代码实例。borderborder表示盒子的边框，允许设置多种样式和颜色，与margin类似，可以对四个方向边框分别设置，也可简写。border-top:上边框border-right:右边框border-bottom:下边框border-left:左边框设置边框时，可以分别对边框的宽度、样式和颜色进行设置。分别为：border-width : 边框宽度border-style : 边框样式border-color : 边框颜色边框属性进行简写时：border:宽度 样式 颜色。如：border:5px solid red。border实例1:border:5px solid red;/* 上边的简写相当于下面分别设置 */border-width:5px;border-style:solid;border-color:red;border-style属性值及意义：none：无边框hidden：与none相同，hidden用于解决边框冲突。solid：实线。dashed：虚线。double：双线。dotted：点状边框。groove：定义3D沟槽边框。ridge：3D脊边框。inset：3D嵌入边框。outset：3D突出边框。边框实例2：/* 边框使用简写时，表示四条边框的宽度、样式及颜色完全相同 */border:2px solid green;/* 上边的样式等同于下面的样式 */border-top:2px solid green;border-right:2px solid greenborder-bottom:2px solid greenborder-left:2px solid green边框实例3：/* 边框使用简写时，表示四条边框的宽度、样式及颜色完全相同 */border-top:2px solid green;/* 上边的样式等同于下面的样式 */border-top-width:2px;border-top-style:solidborder-top-color:green