盒子模型

 盒子模型
        边框    border
        
        边框颜色 border-color
        
        属性                                    　　  说明                                         举例
     border-top-color                   设置上边框的颜色                  border-top-color:red;
     border-right-color                 设置右边框的颜色                  border-right-color:blue;
     border-bottom-color             设置下边框的颜色                  border-bottom-color:green;
     border-left-color                   设置左边框的颜色                  border-left-color:yellow;
    
                                       同时设置4个边框为同一个颜色        border-color:red;

                                        上下边框一个颜色       border-color: red  blue;
                                        左右边框一个颜色
                                        
                                        上边框一个颜色
                                        左右边框一个颜色      border-color: red  blue  yellow;
                                        下边框一个颜色
                                        
                                        同时 上,右,下,左 各一个颜色       border-color: red blue yellow green;
                                        
        边框 粗细
        border-width:             
                                       设置上边框的粗细                 border-top-width:5px;
                                       设置右边框的粗细                    border-right-width:5px;
                                       设置下边框的粗细                  border-bottom-width:5px;
                                       设置左边框的粗细                    border-left-width:5px;
                                       
                                       
                                       其他的与上面颜色写法一致  就是属性要看清楚 不要搞混了
                                       
        
        边框的样式 ：
        border-style:
                     -none  -hidden -dotted  -dashed -solid -double
                    
                                    设置上边框的样式                    border-top-style:hidden;
                                    设置右边框的样式                    border-top-style:dashed;
                                    设置下边框的样式                    border-top-style:dotted;
                                    设置左边框的样式                      border-top-style:double;
                                    
                                    
                                        其他的与上面颜色写法一致   就是属性要看清楚 不要搞混了
                                        
        
        边框的组合写法:
                
                    同时设置边框的颜色 粗细 和样式
                    
                    border: 1px solid red;    设置4个边框的 颜色 样式 粗细

                    border-top: 1px solid red;    针对上边框线 同时设置上边框线 样式 颜色 粗细
                    
            


        盒子模型之外补白:
                margin:
                
                ------  margin-top       设置内容上面部分的补白
                ------ margin-left         设置内容左面部分的补白    
                ------ margin-bottom     设置内容下面部分的补白
                ------ margin-right      设置内容右面部分的补白
                
                margin :  5px;   设置 上右下左 四个地方的外补白