CSS属性：盒子模型

今天，我们学一下有关CSS属性中的盒模型，打开任意一个网页检查源代码，我们都会看到一个类似盒子一样的东西，如下：

这个东西就是我们今天要介绍的有关知识。一个盒子中我们可以看到有以下元素：宽度、高度、内边距、

宽度：width；

高度：height；内边距：padding（padding-top、padding-bottom、padding-left、padding-right)，可按照上、右、下、左的顺序写成复合属性配置，如下：

padding: 20px 30px 40px 50px;

边框：border，本身是一个复合属性。

宽度：border-width；

border-width:4px 8px 9px，表示上4像素、左右8像素、下9像素。

颜色：border-color;

border-color: red yellow black;

线的样式：border-style:solid、dashed、dotted、double、groove（边框凹陷效果）、ridge（边框凸出效果）、inset（内容凹陷）、outset（内容凸出）。

border单一属性的写法：

border-top: 5px solid red;      border-bottom: 15px groove blue;      border-left: 20px double gold;      border-right: 10px dotted green;

单一方向单一线型：border-top-style:dashed;

好了，自己动手练习一下吧😄