什么是css盒子模型？

CSS盒子模型就是在网页设计中时常用到的CSS技术所运用的一种思维模型。它又称为框模型(BoxModel)，是由元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素组成的。

图中最内部的框是元素的现实内容，也就是元素框，紧受着元素框外部的是内边距padding，其次是边框（border），然后最外层是外边距（margin），整个形成了框模型。平常我们设定的配景显示区域，就是内容、内边距、边框这一块范畴。而外边距margin是透亮的，不会遮挡旁边的其他元素。

那么，元素框的总宽度 = 元素（element）的width + padding的左边距和右侧距的值 + margin的左边距和右侧距的值 + border的摆布宽度；

元素框的总高度 = 元素（element）的height + padding的高低边距的值 + margin的高低边距的值 ＋ border的高低宽度。

构造

内容（CONTENT）就是盒子里装的东西；

而添补(PADDING)就是怕盒子里装的东西（贵重的）损坏而增加的泡沫或者其它抗震的辅料；

边框(BORDER)就是盒子自身了；至于边界(MARGIN)则注明盒子摆放的时候的不克不及全部堆在一起，要留一定闲暇维持透风，同时也为了利便掏出。在网页设计上，内容常指文字、图片等元素，但是也可以是小盒子（DIV嵌套），与实际生活中盒子不一样的是，实际生活中的东西个别不克不及大于盒子，不然盒子会被撑坏的，而CSS盒子拥有弹性，里面的东西大过盒子自身最多把它撑大，但它不会损坏的。

添补只要宽度属性，每个HTML标志都可看作一个盒子；

以上就有哪些是css盒子模型？的细致内容，更多请关注 百分百源码网 其它相干文章！