一、盒子模型的概念
什么是盒子模型，盒子模型其实就是CSS网页布局中的一种布局方式，宛如一个盒子，其中包括内容（Content）、内边距（Padding）、边框（Border）、外边距（Margin），如下图：
二、盒子模型的六种属性
Margin:外边距，盒子外边距与边框之间的距离，分上右下左；
Border:盒子的边框大小，分上下左右；
Padding:内边距（补白），盒子的边框与内容之间的距离，分上下左右；
Width:盒子内容的宽度；
Height:盒子内容的高度；
Background:盒子的背景，默认填充内容、Padding与Border
盒子的宽度=Margin-left+Border-left+Padding-left+Width+Padding-right+Border-right+Margin-right
盒子的高度=Margin-top+Border-top+Padding-top+Height+Padding-bottom+Border-bottom+Margin-bottom
三、盒子模型需要注意的几点
- 对于块级标签，六大属性均适用，而对于行内标签来说，height与width并不适用，且Margin与Padding只能在水平方向上有效，垂直方向无效
- 块级标签具有贪婪性，如果未设置宽度，则会占据整个页面；行内标签则具有懒惰性，宽度取决于内容大小
- 由于浏览器会自行设置元素的Margin与Padding值，所以一般我们会自行设置一个Reset.less，来覆盖浏览器默认值
<!--Reset.less-->
*{
margin:0;
padding:0
}
四、 CSS边距重叠（塌陷）
满足前提：块级标签与垂直方向
-
父子元素之间的重叠：父元素的margin-top与第一个子元素的margin-top重叠或父元素的margin-bottom与最后一个子元素的margin-bottom重叠（取大优先）
解决方法：1.父元素设置border-top或border-bottom,不想用则可使边框透明 2.父元素设置padding-top或padding-bottom 3.将父元素设置成行内块标签 -
兄弟元素之间的重叠：上盒子的margin-bottom与下盒子的margin-top之间的重叠（取大优先）
解决方法：1.将一方设置成行内块标签 2.将下盒子设置浮动（浮动不会塌陷)
五、简单实现小三角案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{margin: 0;padding:0}
div{
width: 0;
border: 20px solid transparent;
border-top:20px solid black;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
效果如下：
