每天一个css outline、box-sizing与border

1. outline与border的区别是outline不占用元素空间 outline不一定是矩形  

2. 特别说明：outline会在元素的边框外再划出一条线，并且如果实线中有其他元素的border，会将其覆盖。

3. outline的属性：

　　　　　　outline: <'outline-color'> <'outline-style'> <'outline-width'>  不可继承

　　　　　　outline-color: <'border-color'> 不可继承

　　　　　　outline-style:  <'border-color'> 不可继承

　　　　　　outline-  <'border-width'>不可继承

4. box-sizing:

　　　　　　box-sizing属性可以为三个值之一：content-box（default），border-box，padding-box。

　　　　　　content-box，border和padding不计算入width之内

　　　　　　padding-box，padding计算入width内

　　　　　　border-box，border和padding计算入width之内，其实就是怪异模式了~

border:

• border-top border-bottom border-left border-right
• border-style:
  • 当对table标签指定了多个border时，按照以下方式解决冲突：
    • 当指定多个border-style并冲突时时，优先级高的有效，优先级低的无效。hidden具有最高的优先级，none是最低的优先级
    • 如果没有border-style为hidden的，那么border-width大的优先级高，border-width小的优先级低，如果border-width一样大，那么按照优先级从大到小为：'double', 'solid', 'dashed', 'dotted', 'ridge', 'outset', 'groove', and the lowest: 'inset'.
    • 如果都一样，那么嵌套在里层的标签的border优先级高。
  • none:隐藏border，即border为0.具有最低的优先级，none是border的默认属性。
  • hidden:隐藏border,即border为0.具有最高的优先级
  • dashed:border为虚线
  • dotted：border为点
  • solid:border为直线
  • double:border为两条直线，并且两条直线的宽度、两条直线之间的距离相等，且它们和等于border-width。
  • groove:3d效果，看上去凹了下去
  • ridge:3d效果，看上去凸了出来
  • inset:3d效果
  • outset：3d效果
• 'border-top-style', 'border-right-style', 'border-bottom-style', 'border-left-style'
• border-color:{1,4}
• 'border-top-color', 'border-right-color', 'border-bottom-color', 'border-left-color'
• border- <border-width>{1,4}
• 'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width'