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-width: <'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效果
- 当对table标签指定了多个border时,按照以下方式解决冲突:
- '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-width: <border-width>{1,4}
- 'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width'