CSS盒子模型
CSS盒子模型
盒子模型是html和css当中非常重要的一块，只有深入了解了盒子模型，才能在页面布局时得心应手，少走弯路。
一、盒子模型的概念
css盒子模型又称为框模型(Box Model) ，包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。
在盒子模型中，margin是透明的，而border、padding、content均可以设置背景颜色。
一个盒子的总宽度 = 元素内容的宽度 + 左右内边距的宽度 + 左右边框的宽度 + 左右外边距的宽度
同理，盒子的高度 = 元素内容的高度 + 左右内边距的高度 + 左右边框的高度 + 左右外边距的高度
border-color属性用来设置border的颜色，当盒子的内容为简单的文本时，background-color属性通常用来设置content和padding的背景颜色。
下图是盒子的3D模型
二、盒子模型的外边距塌陷
当两个上下方向的盒子垂直相邻时，会发生外边距的叠加，叠加后的高度等于合并前两个盒子中外边距较高的那个值。
图示如下：
这种外边框叠加的现象只会出现在普通文档流中。
三、盒子模型的box-sizing属性
box-sizing有几种不同的值box-sizing : content-box | border-box | inherit;
（1）content-box（默认值）
当content-box设置为content-box时，我们用css设置的width和height是被设置在了content上，此时：
盒子的总宽度 = width + padding(left、right) + border(left、right) + margin(left、right)
高度同理。
（2）border-box
当content-box设置为border-box时，我们用css设置的width和height值为content、padding和border的总值。此时：
盒子的总宽度 = width + margin(left、right)
（3)）inherit
规定应从父元素继承 box-sizing 属性的值。
四、开发常见问题和应用
（一）margin越界（第一个子元素的margin-top和最后一个子元素的margin-bottom的越界问题）
以第一个子元素的margin-top 为例:
当父元素没有边框border时，设置第一个子元素的margin-top值的时候，会出现margin-top值加在父元素上的现象，解决方法有四个：
（1）给父元素加边框border （副作用)
（2）给父元素设置padding值 （副作用）
（3）父元素添加 overflow：hidden （副作用）
（4）父元素加前置内容生成。（推荐）
以第四种方法为例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> *{ margin: 0; padding: 0; } #father{ width: 600px; height: 500px; background-color: burlywood; } #father:before{ content: ""; display: table; } #child{ width: 300px; height: 200px; background-color: lightskyblue; margin-top: 50px; } </style> </head> <body> <div id="father"> <div id="child"></div> </div> </body> </html>
图示：
（二）标准盒子模型与IE盒子模型
标准的盒子模型box-sizing为content-box，而IE模型更像是 box-sizing : border-box; 其内容宽度还包含了border和padding。
在IE8及以上box-sizing属性默认为content-box，在IE7及以下box-sizing 属性为 border-box.
（三）用盒子模型画三角形
原理：盒子模型的边框被盒子的对角连线分为四个方向 ，当设置盒子的content和padding的宽高都为零时，盒子的可显示部分只剩下border，此时给border设置一个宽度，然后设置四个方向都透明，最后单独设置一个方向的的border就可以了。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> div{ width: 0; border: transparent 50px solid; border-top: 50px black solid; } </style> </head> <body> <div></div> </body> </html>
效果图：
以上就是笔者对盒子模型的一些简单总结啦，如有错误和不足之处，欢迎在评论区留言~