- Margin(外边距) - 清除边框外的区域，外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域，内边距是透明的。
- Content(内容) - 盒子的内容，显示文本和图像。 盒子模型的顺序是 上右下左 。 border和background 和font一样的 也是一个复合属性
border-color边框颜色
border: red white chocolate sandybrown;
border-top-color 上边框颜色:border-right-color 下边框颜色:border-bottom-color 左边框颜色:border-left-color 右边框颜色
可以用上右下左的顺序来设置四个边框的颜色，也可以直接设置4个边框的颜色
需要设置边框宽度，边框宽度默认为0
biborder-width 边框宽度
border-width:50px 40px 30px 45px;
border-top-width上边框宽:border-right-width下边框宽:border-bottom-width左边框宽: border-left-width右边框宽
border-style: 边框的样式 ;
border-top-style 上边框样式:border-right-style 下边框样式:border-bottom-style 左边框样式:border-left-style 右边框样式
border-style border-color border-width三个都是复合属性
通常用的顺序为：粗细、颜色、样式：border:100px solid transparent;
外边距
margin-top: px;上
margin-right 右
margin-bottom 下
margin-left 左
margin: ;所有外边距
内边距
padding-top: px;上
padding-right 右
padding-bottom 下
padding-left 左
padding: ;所有内边距
盒子模型尺寸
最终元素的总宽度计算公式是这样的： 总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度最终计算公式是这样的： 总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
box-sizing拯救布局
实例
规定两个并排的带边框的框：
div
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:50%;
float:left;
}
定义和用法
box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。
例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。
| 默认值： | content-box |
|---|---|
| 继承性： | no |
| 版本： | CSS3 |
| JavaScript 语法： | object.style.boxSizing="border-box" |
语法
box-sizing: content-box|border-box|inherit;
| 值 | 描述 |
|---|---|
| content-box | 这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。 |
| border-box | 为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。 |
| inherit | 规定应从父元素继承 box-sizing 属性的值。 |
