盒子模型（Box Model）

一、概述

• 所有的HTML元素都可以看作是盒子，而网页布局的本质：利用CSS摆盒子，装内容。
• 盒子模型由：内容（content）、边框（border）、内边距（padding）、外边距（margin）构成。
• 盒子模型实际大小=内容的宽度与高度+边框+内边距

1、边框（border属性）

语法：border:border-width||border-style||border-color
注意：

• border为复合属性，这是边框的复合写法，没有固定的顺序，但习惯这样。
• 边框的大小会影响实际盒子的大小
• 也可以分开写，如border-top上边框、border-bottom下边框、border-right右边框、border-left左边框。

（1）边框宽度（border-width)

值	描述
medium	默认宽度
thin	小于默认宽度
thick	大于默认宽度
指定大小	由浮点数字和单位标识符组成