快速拿下CSS盒子模型

下面的图片就是Chrome浏览器审查元素里的盒子情况展示，我们可以看到一个容器由4个颜色代表的内容组成：内容(content)、填充(padding)、边框(border)、边界(margin)，在这张图上由内向外依次表示。

 盒子模型有两种：

　　1.标准盒模型，即该容器的width和height两个属性是指content的宽和高width=content的宽，height=content的高。

　　2.非标准盒模型：又称怪异盒模型，只有IE是使用该模型，width和height两个属性在content的基础上还要加上左右两边的padding宽度和border宽度，即width=content的宽+padding*2+border*2，height=content的高+padding*2+border*2。

content就是我们加入容器内容的地方了，padding则是content和border之间的距离，我们设置padding后两边border的距离就变成了content的距离+两个padding的宽度（左右各有一个）

border就是容器的边框了，html的属性里就有这玩意

margin也很好理解，可以理解为border（城墙）外的领地，一个容器的边框和另一个容器之间的距离，这个属性有一点挺特别的，存在子元素把自己的margin-top属性传递给父元素的情况，需要修改父元素的padding或者加上border来解决，这个地方可以参考https://blog.youkuaiyun.com/liuyan19891230/article/details/52515357 的解决办法;还有一个情况是存在margin重叠的问题，这个地方是为了解决多个块级元素排列出现双倍外边距而产生的，如果两个相邻元素在他们之间的方向上都存在外边距，那么只会生效其中最长的那个，如果确实需要两个margin，那么可以通过padding，以及透明border来代替，或者加入外层元素 overflow:hidden等等方法，这个地方其实根据实际情况有不同的解决方法，老问题了

对于border、padding、margin的属性，有以下几种规定：

如果是四个值，则为上右下左依次排序

如果是三个值，则为上（左右）下依次排序

如果是二个值，则为（上下）（左右）依次排序

如果是一个值，则为四个方向都为同一个值

部分参考：https://blog.youkuaiyun.com/baidu_37107022/article/details/71272900，

转载于:https://www.cnblogs.com/qq965921539/p/11206865.html