01-border，padding，margin，color

太过爱你忘了你带给我的痛 2021-09-14 03:36 391阅读 0赞

# border，padding，margin，color #

之前我在潭州课程上上了一期vip课程，现在把纸笔的笔记整理出来，与大家分享。很少牵扯到css3，后续会跟进

*  **border–边框**
 *  **padding–内边距**
 *  **margin–外边距**
 *  **color–颜色**
 *  **外边距合并**

--------------------

## border：边框 ##

*  **border-width**
 *  **border-style**
 *  **border-color**
 *  **border-style**
 *  **border的复合模式**
 *  **border的每个方向详细**

### border-width: 边框宽度 ###

(px)

### border-style: 边框样式 ###

*  **solid：实线**
 *  **dashed：虚线**
 *  **dotted：点线**
 *  **double：双实线**

### border-color: 边框颜色 ###

*  **\#FFF：十六进制**
 *  **red：英文字母**
 *  **rgb**
 *  **rgba**
 *  **transparent：透明**

### border复合模式 ###

eg：border:1px solid red;
    ---border: width style color;可以省略写，最好不要打乱顺序

### border单独每个方向的样式 ###

*  **border-top：上方边框**  
    
    
     *  border-top-width
     *  border-top-style
     *  border-top-color
     *  border-top:1px solid red;复合模式
 *  **border-right：右侧边框**  
    
    
     *  border-right-width
     *  border-right-style
     *  border-right-color
     *  border-right:1px solid red;复合模式
 *  **border-bottom：底侧边框**  
    
    
     *  border-bottom-width
     *  border-bottom-style
     *  border-bottom-color
     *  border-bottom:1px solid red;复合模式
 *  **border-left：左侧边框**  
    
    
     *  border-left-width
     *  border-left-style
     *  border-left-color
     *  border-left:1px solid red;复合模式

--------------------

## padding：内边距 ##

*  **padding-top**
 *  **padding-right**
 *  **padding-bottom**
 *  **padding-left**
 *  **padding的复合模式**
 *  **padding的注意事项**

### padding-top: (px) 上边距 ###

### padding-right: (px) 右边距 ###

### padding-bottom: (px) 下边距 ###

### padding-left: (px) 左边距 ###

### padding: 复合模式 ###

1)eg:padding:10px;
        每个方向的内边距都是10px;
    2)eg:padding:10px 5px;
        上下的内边距是10px
        左右的内边距是5px
    3)eg:padding:1px 2px 3px 4px;
        上边距1px
        右边距2px
        下边距3px

### border-color: 边框颜色 ###

*  **\#FFF：十六进制**
 *  **rgb**
 *  **rgba**
 *  **transparent：透明**

### border复合模式 ###

eg：border:1px solid red;
    ---border: width style color;可以省略写，最好不要打乱顺序

### border单独每个方向的样式 ###

*  **border-top：上方边框**  
    
    
     *  border-top-width
     *  border-top-style
     *  border-top-color
     *  border-top:1px solid red;复合模式
 *  **border-right：右侧边框**  
    
    
     *  border-right-width
     *  border-right-style
     *  border-right-color
     *  border-right:1px solid red;复合模式
 *  **border-bottom：底侧边框**  
    
    
     *  border-bottom-width
     *  border-bottom-style
     *  border-bottom-color
     *  border-bottom:1px solid red;复合模式
 *  **border-left：左侧边框**
    
     *  border-left-width
     *  border-left-style
     *  border-left-color
     *  border-left:1px solid red;复合模式
    
    ## border：边框 ##
 *  **border-width**
 *  **border-style**
 *  **border-color**
 *  **border-style**
 *  **border的复合模式**
 *  **border的每个方向详细**

### border-width: 边框宽度 ###

(px)

### border-style: 边框样式 ###

*  **solid：实线**
 *  **dashed：虚线**
 *  **dotted：点线**
 *  **double：双实线**

### border-color: 边框颜色 ###

*  **\#FFF：十六进制**
 *  **rgb**
 *  **rgba**
 *  **transparent：透明**

### border复合模式 ###

eg：border:1px solid red;
    ---border: width style color;可以省略写，最好不要打乱顺序

### border单独每个方向的样式 ###

--------------------

## padding：内边距 ##

*  **padding-top**
 *  **padding-right**
 *  **padding-bottom**
 *  **padding-left**
 *  **padding的复合模式**
 *  **padding的注意事项**

### padding-top: (px) 上边距 ###

### padding-right: (px) 右边距 ###

### padding-bottom: (px) 下边距 ###

### padding-left: (px) 左边距 ###

### padding: 复合模式 ###

1)eg:padding:10px;
        每个方向的内边距都是10px;
    2)eg:padding:10px 5px;
        上下的内边距是10px
        左右的内边距是5px
    3)eg:padding:1px 2px 3px 4px;
        上边距1px
        右边距2px
        下边距3px
        左边距4px

### padding的注意事项 ###

padding会改变盒子的大小，所以背景的相关样式会作用在padding上

--------------------

## margin：外边距 ##

*  **margin-top**
 *  **margin-right**
 *  **margin-bottom**
 *  **margin-left**
 *  **margin的复合模式**
 *  **margin的注意事项**

### margin-top: (px) 上边距 ###

### margin-right: (px) 右边距 ###

### margin-bottom: (px) 下边距 ###

### margin-left: (px) 左边距 ###

### margin: 复合模式 ###

1)margin:10px;
        每个方向的外边距都是10px;
    2)margin:10px 5px;
        上下的外边距是10px
        左右的外边距是5px
    3)margin:1px 2px 3px 4px;
        上边距1px
        右边距2px
        下边距3px
        左边距4px
    4)margin:10px auto;
        上下边距是10px；
        左右方向会根据父级元素使此居中

### margin的注意事项 ###

如果想把元素居中可以使用margin:auto;但是要注意margin只对块级元素起作用，
    再就是外边距合并的问题

--------------------

## color ##

*  **\#FFF：十六进制**
 *  **rgb**
 *  **rgba**
 *  **transparent：透明**

--------------------

## 外边距合并的问题 ##

外边距合并的现象在开发中经常遇见  
我遇见的情况中包含两种现象

*  两个垂直外边距相遇时，他们将合并成一个外边距，合并后的外边距的高度为之前外边距较大的那个。  
    ![这里写图片描述][SouthEast]  
    注：div1，和div2都没有border属性
 *  当div1嵌套div2时，里面的div1有margin-top的属性 会使div1与垂直方向的会计元素产生边距，即：  
    ![这里写图片描述][SouthEast 1]  
    注：div1，和div2都没有border属性

直接上解决的方法：  
第一种情况用padding代替margin；padding在div的内部，用来撑开空间，  
第二种情况在div2的加属性border即可解决。当不需要border样式时，可以将border的属性设置为；  
border:1px solid transparent;这样就看不出边框的效果了

总结：  
这是第一课的内容，也是比较基础的知识点，常见的问题也就是外边距的问题，多多注意就好了。

[SouthEast]: /images/20210726/710c9090ff0549e0b42141d330e2d78d.png
[SouthEast 1]: /images/20210726/f7bb690e19c340c481874f87a0ac1c21.png