CSS 盒模型

CSS 盒模型是什么

CSS盒子模式都具备内容(content)、内边距(padding)、边框(border)、外边距(margin)这4个属性。

两种盒模型分别是
content-box内容盒-内容就是盒子边界
border-box边框盒-边框才是盒子的边界
公式

box-sizing:content -box 宽度=内容宽度
box-sizing:border-box 宽度=内容宽度+padding+border
一般都使用box:sizing:border-box;
图下就是border-box盒型有四个属性

最外面的黄色区域盒子的是外边距（margin）;
再往里黄色是边框（border）；
再往里绿色区域是盒子的内边距（padding）;
最里面的区域是盒子模型中间内容部分(content);