CSS 基本样式大全（二）

继续上一篇，今天我们讲一下盒子模型的 CSS 样式。盒子模型是 HTML 里面一个不可忽视的、极其重要的存在。因为直到今天，盒子模型已然成为了前端网页布局的中坚力量。盒子模型的功能之强大，应用范围之广泛，在网页世界里面已经传为佳话，今天我们就来揭开盒子模型这一神秘面纱。

无论是从物理角度，还是空间角度来看，世间万物皆盒子。盒子模型的原理呢，我们后面再说，今天我们先继续上一篇文章 “CSS 基本样式大全（一）”，接着讲一下盒子模型里面的一些基础 CSS 样式。一些常见的盒子 CSS 样式如下所示：

盒子模型

边框

1.border-color：盒子边框颜色；

注意：border-color 这一样式经常用于给盒子设置边框的颜色，但是如果直接这样使用的话，它会同时设置盒子上下左右的4条边框。如果要分开设置，分别为 border-top-color（上边框颜色）、border-bottom-color（下边框颜色）、border-left-color（左边框颜色）、border-right-color（右边框颜色），例如：border-bottom-color：red；（将盒子的下边框颜色设置为红色）。当然，除此之外，还有一种形式，border-color 这个属性还是一个综合属性，它还可以这样进行设置，例如：border-color：red  green  blue  yellow；（将4条边分别设置为上边框-红色、右边框-绿色、下边框-蓝色、左边框-黄色）。或者是代码改进一下，也可以这样，例如：border-color：red  green；（将4条边分别设置为上边框-红色、右边框-绿色、下边框-红色、左边框-绿色），由于这里只有2个属性，分别是上和右，但在 CSS 规则里面，你如果没有设置其他它边框的话，系统会默认你忘记设计了，于是就会利用对边的颜色系统自动进行配置，上是红色，那么上的对边下也是红色，右边的是绿色，所以对应边左边的自然而然也就是绿色了。

2.border-width：盒子边框宽度；

注意：盒子边框的宽度，这个 CSS 样式，和上面的盒子边框颜色一样，也是个综合属性，也是有上、右、下、左四个。例如 border-top-width（上边框宽度）、border-right-width（右边框宽度）、border-bottom-width（下边框宽度）、border-left-width（左边框宽度）。顺序也是上、右、下、左，和上面一样。单位通常以 px（像素）和 rem（相对单位）为主，例如：border-width：2px；（将4条边框同时设置为 2px 的宽度），除了样式名称不同，使用方法以及上、下、左、右的关键词都和上面一样，都是 top、bottom、left、right 这四个，这里就不多说了。

3.border-style：盒子边框样式；

注意：边框样式也是和上面一样的，也是个综合属性，顺序也是上、右、下、左，使用方法也和上面一样。例如：border-left-style：solid；（设置左边框为实线）。唯一不同的，在于这个 CSS 样式的值比较特殊，因为它指的是盒子边框的样式，也就是盒子边框线的不同类型，有实线、虚线、点线等等很多。例如：solid（实线） 、dotted（点线）、 dashed（虚线）、double（双实线）等，用法之类的就不多说了，和上面一毛一样。

边距

1.margin：外边距；

注意：外边距，指的是一个盒子到另外一个盒子之间的间隔距离。外边距的设置方式和上面也是一样的，顺序有上、右、下、左之分，使用方法也和上面一样，单位值也是以 px 和 rem 为主。例如：margin-left：20px；（设置盒子中外边距的间距为 20px），其余和上面一模一样。

2.padding：内边距；

注意：内边距，指的是在一个盒子里面，内容到盒子边框的距离，或者是，当盒子里面有很多快内容的时候，也可以把内边距说成是一块内容区域到另一块内容区域之间的间隔距离。外边距的设置方式和上面也是一样的，顺序也和上面是一样的，单位值也是一样的。例如：padding-right：30px；（设置盒子中内边距的的间距为 30px）。