01-border，padding，margin，color

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单独每个方向的样式

• 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
    左边距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：透明

---

外边距合并的问题

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

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

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

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