CSS 盒子模型

box model，用来封装HTML元素，包括边距、边框、填充、实际内容。盒子模型包括以下部分：

• margin：外边距，外边距是透明的
• border：边框，围绕在内边距和内容之外的边框
• padding：内边距，内容周围的区域，内边距是透明的
• content：盒子内容，用来显示元素内容

通过CSS指定元素的宽度和高度时，实际上指定的是盒子模型content区域的宽度和高度，所以一个元素的完整大小，需要加上内外边距和边框。

图片、表单元素等不是盒子。

border：边框
边框三要素：粗细（一般以像素为单位）、线型、颜色（默认黑色）
bordre: 1px solid red; // 粗细为1像素的红色实线边框

border属性可以分别使用三个不同的属性来表示：
border-width：1px 2px 3px 4px; // 盒子的上、右、下、左边框宽度
border-style：solid dashed dotted; // 盒子的上、左右、下边框类型
border-color：red green; // 盒子的上下、左右边框的颜色

border属性也可以按照不同的方向来分别表示：
border-top:1px solid red; // 盒子的上边框，其他三个边类似

border属性，其中一个方向上的border也可以按照三个不同的要素来分别表示

border-top-width:10px;
border-top-style:solid;
border-top-color:red;

通过border属性的三个不同要素来画一个三角形：

width: 0px;
height: 0px;
border: 60px solid white;
border-top-color: green;
border-bottom:none;