css中盒子模型

1. 盒子模型的概念：
   盒子模型是html+css技术中的基础知识，理解它可以更好地实现页面布局。
   盒子模型中由内到外主要的元素：content,padding,border,margin。
   元素框的总宽度 = 元素（element）的width + padding的左边距和右边距的值 + margin的左边距和右边距的值 + border的左右宽度；
   元素框的总高度 = 元素（element）的height + padding的上下边距的值 + margin的上下边距的值 ＋ border的上下宽度。
2. css外边距合并
   两个上下方向相邻的元素框垂直相遇时，外边距会合并，合并后的外边距的高度等于两个发生合并的外边距中较高的那个边距值。

3. 盒子相关的box-sizing:content-box||border-box;

4. 常见问题：
   在之前一篇文章中也有提到，一些常见的样式bug，最后一条。
   现在多一种处理方式：给父元素添加border。其他的之前也提过，父元素overflow:hidden，或者父或子搞个float

5. 我们用盒子模型画一个盒子玩玩，结果如下：

<div class="triangle"></div>
    .triangle {
            background-color:black;
            width: 150px;
            height: 150px;
            border: 100px solid transparent;
            border-top: 100px solid blue;
            border-left: 100px solid pink;
            border-bottom: 100px solid orange;
            border-right: 100px solid yellowgreen;
        }