CSS 中 outline 和 border 的区别，outline 及 相关属性学习

区别

1. border 占用空间，outline 不占用空间，不会影响元素的尺寸和位置。

2. border 可应用于几乎所有有形的 html 元素，而 outline 是针对链接、表单控件和 ImageMap 等元素设计。从而另一个区别也可以推理出，那就是： outline 的效果将随元素的 focus 而自动出现，相应的由 blur 而自动消失。这些都是浏览器的默认行为，无需 JavaScript 配合 CSS 来控制。

outline 的作用

1. 利用这些特性，我们常用 outline 来设置悬停的动态效果。之前一直困扰我的问题：hover 加边框会导致元素定位和大小的改变，同时也会影响其他元素位置的改变。

2. 解决 hover 加边框会导致元素定位和大小的改变的问题，的另一只解决思路，用怪异盒模型，给元素加上 box-sizing: border-box; 属性。

学习 outline

　　outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

　　注释：轮廓线不会占据空间，也不一定是矩形。

　　可以按顺序设置如下属性：

• 　　outline-color
• 　　outline-style
• 　　outline-width

　　连写 和 border 一样：outline: 1px solid #000; 

　　其它可能用到的值：

　　inherit 规定应该从父元素继承 outline 属性的设置。

　　none 规定元素不设置 outline 属性

 相关属性

语法：

　　outline-offset: length / inherit;

例子：

　　outline-offset: -10px; 向内推10px