CSS盒子模型

盒子模型主要是有margin(外边距)、border(边框)、padding(内边距)、content(内容)组成，这些属性我们可以把它转移到我们日常生活中的盒子上来理解，日常生活中所见的盒子也就是装东西的箱子，也具有这些属性，所以叫它盒子模型

其中content(内容)又可以有两个元素width(宽)和height(高)

CSS边框样式

可以使用border-style来设置边框的样式，也可以分别来设置上下左右的样式：

border-top-style

border-left-style

border-right-style

border-bottom-style

边框样式有很多种，可以定义很多，比如单边框，虚线的边框，实线的边框，双边框，还有没有边框的边框。

分别都可以用border-style属性的上下左右后面接上，下表的值

值	描述
none	定义无边框
hidden	与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted	定义点状边框。在大多数浏览器中呈现为实线。
dashed	定义虚线。在大多数浏览器中呈现为实线。
solid	定义实线。
double	定义双线。双线的宽度等于 border-width 的值。
groove	定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge	定义 3D 垄状边框。其效果取决于 border-color 的值。
inset	定义 3D inset 边框。其效果取决于 border-color 的值。
outset	定义 3D outset 边框。其效果取决于 border-color 的值。

测试内边距

我没有边框

点状边框

虚线边框

实线边框

双线边框

3D凹槽边框

3D 垄状边框

3D inset 边框

3D outset 边框

CSS边框宽度与高度

边框宽度

边框宽度是通过border-width来定义的，可以分别设置上下左右4个属性

border-top-width

border-bottom-width

border-left-width

border-right-width

边框颜色

边框宽度是通过border-color来定义的，同样也可以分别设置上下左右4个属性

border-top-color

border-bottom-color

border-left-color

border-right-color

测试内边距

我是设置所有边框的

我只负责上面

我负责下面

我设置的是左边

我设置的是右边

CSS3边框：

border-radius: 圆角边框

圆角边框后面设置值，边框就会变得有弧度了。

box-shadow: 边框阴影

边框阴影有几个很有意思的值，还可以设置内阴影，外阴影，阴影颜色，阴影位置什么的。见下表：

值	描述
h-shadow	必须。水平阴影的位置。允许负值
v-shadow	必须。垂直阴影的位置。允许负值
blur	可选。模糊距离
spread	可选。阴影的尺寸
color	可选。阴影的颜色。
inset	可选。将外部阴影(outset)改为内部阴影

            测试内边距

CSS内边距

内边距是在内容外、边框内，内边距的属性有5个，其中padding是设置所有的边距，其他4个则分别设置上下左右的边距。

属性	描述
padding	设置所有的边距
padding-top	设置上边距
padding-bottom	设置下边距
padding-left	设置左边距
padding-right	设置右边距

下面HTML分别设置padding所有属性的样式：

            测试内边距        
             
                             
     
                                                 我是padding-top，我设置了上边距                    
              
     
        
        
     
                                                 我是padding-bottom，我设置了下边距                    
              
     
        
        
     
                                                 我是padding-left，我设置了左边距                    
              
     
        
        
     
                                                 我是padding-right，我设置了右边距                    
              
     
        
     
                                                 我是padding，我设置了所有内边距