如何理解盒模型及其content、padding、border、margin？

大家好~  我是一枚正直纯洁的苦逼程序员！！！！！

常见的盒模型元素有哪些？各有什么属性？

CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。 　　网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。 　　这些属性可以把它转移到日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也就是能装东西的一种箱子，也具有这些属性，所以叫它盒子模式。 　　每个盒子都有：边界、边框、填充、内容四个属性； 　　每个属性都包括四个部分：上、右、下、左；这四部分可同时设置，也可分别设置；里的抗震辅料厚度，而边框有大小和颜色之分，又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的，边界就是该盒子与其它东西要保留多大距离。css盒子尺寸的计算： 我们通过给高宽赋值，来定义content(内容)的高度和宽度。如果没有做任何声明，那么高度和宽度的默认值将是自动(auto)。即在css中给一个块级元素的width和height属性赋值时比如div{width ：200px; height: 200px}时，其中的width 和height只是对content部分设置的，即上图中content区域的长和宽。而不是内容，内边距，边框的总和（但在IE的早期版本包括IE6中，盒子模型的width和height却是内容+内边距+边框的总和，尽管符合人们思考的逻辑习惯，但是不符合规范，造成了很多兼容性问题。）

大家可看一下这篇博客https://www.cnblogs.com/WebShare-hilda/p/4684161.html

ppt

视频