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

outline 属性是一个简写属性，用于设置元素周围的轮廓线。

注释：轮廓线不会占据空间，也不一定是矩形。
这就可以了，就给点击链接加这个属性   a:active{outline:none}
可惜，IE下无效   再加一个  a:active {blr:expression(this.onFocus=this.blur());}

<style>
a:active {outline:none;blr:expression(this.onFocus=this.blur());}
</style>
这样网页中的所有链接点击都没虚线框了（文字链接、图片链接==）
示例：
<style>
a:active {outline:none;blr:expression(this.onFocus=this.blur());}
img,a .img{border:0}
</style>
<a href="#"> <img src="http://bbs.blueidea.com/images/default/newtopic.gif"></a><br>
<a href="#"> <img src="http://www.baidu.com/img/baidu_logo.gif"></a><br>
<a href="#">发新帖</a>

初学者可能对优先级的概念不甚明白，但我们在写css的时候经常遇到这些问题。优先级主要是避免样式声明中的冲突。当针对同一元素的同一属性有多个声明时，并且这些声明来源相同，权重相同，那么，更明确的css声明将占主导地位。

设想下面这个例子：

P{
Color:black;
Background-color:white;
}
div.warning p{
color:red;
}
Div#caution p{
Color:yellow;
}
Body#home div p{
Color:white;
}

上面的样式单中包含四条针对p元素的样式，它们都包含一条针对color的声明，浏览器需要明确那条声明会被最终应用，p元素的最终color是什么？
       
答案很简单，最明确的选择器声明将占据上风，浏览器通过分析选择器的优先级，并最终筛选出优先级最高的声明。

下面是同一选择器多种声明的比较过程：

• 如果是在元素的style中声明元素的属性，而不是在选择器中进行，毫无疑问，它具有最高的优先级。如果没有内联属性，进入步骤2；
  
• 计算选择器的ID，ID数量最多的优先级最高，如果ID的总数相同或者为0，进入步骤3；
  
• 计算类属性（如.test）、属性选择器（如[type=’submit’]）以及伪类 （如:hover）。数量最多的优先级相对较高，如果总数相同或者为0，进入下一步；
  
• 计算类型选择器（如div）和伪元素（如：first-letter）的个数，总数高的优先级高。
  

如果多个选择器具有相同的优先级，根据级联样式单的规则：后来者居上.

W3c讲述了计算优先级的方法，计算结果用四个逗号分开的a，b，c，d矩阵来表示，a中代表的优先级最高，d代表的是最次要，计算过程如下：

• 声明来自style的，a=1;
  
• b，统计ID的个数；
  
• c，统计属性选择器、伪类的个数；
  
• d，统计元素类型和伪类元素的个数。

计算结果不是一个具体的数值，而是可以相互比较的矩阵，回想前面例子中的一条声明:

P{
    Color:black;
    Background-color:white;
}

按照上面的公式，我们得到的是0，0，0，1，因为仅一个元素类型。

正如前面所说，这不是数值，而是一个矩阵，a代表最高的优先级，d优先级最低，从左到右，比较每栏的最高值，b栏的值会覆盖c、d中的值，不论c和d中的值是多少。这样，0，1，0，0的优先级将比0，0，10，0高。

我们将计算的步骤拆分开来使之更易于理解。

首先计算a，如果在元素的style中定义其属性，它的值就为1，否则为0，事实上，a栏的值只有一种情况。



你可以看到，内联样式的优先级为1，0，0，0，例如：

这就是问什么尽量避免使用内联样式的原因，因为内联样式总是具有最高的优先级，唯一能改变它的方法是在css中使用！important声明。

除了内联样式，我们需要计算b，c，d。看看下面这条规则的优先级计算：

上面的规则用来定义color属性，既然没有内联样式，第一栏a=0，如下表：
                     


计算b栏中的值，统计ID的数量，上面的选择器中，有两个ID：#home和#warning，这样b=2，如下表：



下一步，计算c栏的值，统计类选择器、属性选择器、伪类的个数。（注：[id=”foo”与#foo是不相同的]）

上面的选择器中，有一个类选择器.message，所以c=1，如下表：



最后是d，计算类型选择器、伪类的个数，选择器中有三个：body、div、p，没有伪类元素，所以d=3，如下表:



就此打住，让我们来看一个更为复杂的例子，对于同一个元素有不止一个的color属性，浏览器如何处理，下面是样式单：

p.message{
color:green;
}
#home #warning p.message{
color:yellow;
}
#warning p.message{
color:white;
}
body#home div#warning p.message{
color:blue;
}
p{
color:teal;
}
* body#home>div#warning p.message{
color:red;
}
#warning p{
color:black;
}

用上面的方法来分析这个样式单。稍等，通用选择符“*”和子选择符“>”的优先级是怎样的？答案是他没有任何优先级，在就算中将被忽略，你可以将其当作0来对待。

在不看下面的结果之前，你是否已经分析出了选择器的优先级。

果是根据优先级优先级的高低来排列的：最高的在最上面，最低的屈居于下。你会看到，最上面的两条级别相同，尽管它多了一个通用选择符和子选择符。在这种情况下，后来者将占据上风，如果你在页面中使用上面的样式，你将会看到，p元素的文本字体将会使红色。

你也会看到，p.message优先级低于#waring p。这是初学者经常遇到的问题，他们认为类选择器更具体的匹配一个元素。

一段无错的代码把一个居左浮动(float:left)的元素放置进一个容器盒(box)，并在浮动元素上使用了左边界(margin-left)来令它和容器的左边产生一段距离。看起来相当的简单，对吗？但直至它被在IE/Win中浏览为止，在浏览器中居左浮动元素的边界长度被神秘地翻了一倍！

情况应该如何？

下面的图释展示了一个简单的div(茶色的盒子)包含着一个居左浮动的div(绿色的盒子)。浮动元素有一个100px的左边界，使容器盒与它的左边缘之间产生了一个100px的间隙。到现在为止，一直都还不错。

陈旧的IE“双倍占据”

原样的相同代码被在IE/Win中浏览时以些微不同的方式显示，下面的图释展示了IE/Win在布局上所做的。

这为什么会发生？别问这种傻问题！这就是IE，记得吗？符合标准只是理想的状况，不指望实现，这个简单的事实正验证了。

重点

这个Bug仅当浮动边界和浮动元素的方向相同时出现在浮动元素和容器盒的内边缘之间，在这之后的任意有着相似边界的浮动元素不会呈现双倍边界。只有特定的浮动行的第一个浮动元素会遭遇这个Bug。像居左的情况一样，双倍边界同样神秘地显示在居右的相同方式。

最后，修复办法！

直到现在(04年1月)这个Bug一直被认为是无法修复的，通常用来替代错误的边界的控制方法如：一个不可视浮动元素的左边距，连同一个内嵌的盒子一起，可视的盒子装在不可视浮动元素里；或者使用技巧仅对IE/Win设定边界的1/2值。这办法生效了，但是是混乱的而且搞糟了干净的源代码。不过现在全部结束了。

Steve Clason发现了一个修复办法，描述在他的Guest Demo里，修复了双倍边界和围绕文字缩进Bug。这是一个经典的IE的Bug修复办法，使用一个属性来修复影响不相关属性的Bug。

现在如何来做？

研究它，简单地将{display: inline;}设置给浮动元素就是全部所需做的！是的，听起来太简单了，不是吗？不过这是真的，仅仅一个display的"inline"声明已经能够胜任了。

熟悉规则的人知道浮动元素自动设置为"block"元素，而不管他们之前是什么。就如Steve从W3C里指出：

9.5.1 Positioning the float: the ‘float’ property

"This property specifies whether a box should float to the left, right, or not at all. It may be set for elements that generate boxes that are not absolutely positioned. The values of this property have the following meanings:

left
The element generates a block box that is floated to the left. Content flows on the right side of the box, starting at the top (subject to the ‘clear’ property). The ‘display’ is ignored, unless it has the value ‘none’.

right
Same as ‘left’, but content flows on the left side of the box, starting at the top.

none
The box is not floated. "

这 说明浮动元素上的{display: inline;}会被忽略，事实上所有的浏览器没有呈现任何改变，包括IE。但是，它不知何故让IE停止将浮动元素的边界翻倍。因而，这个修复办法可以被直接应用，而没有任何繁琐的隐藏方法。如果将来的一款浏览器决定对这个修复办法抱恙，只要把这个修复装入IE独用的Tan Hack里，细节如同IE Three Pixel Text-Jog Demo。

下面是两个使用了前面相同代码的生动演示，第一个照常显示了IE的Bug，下一个对浮动元素使用了"inline"修复。

01..floatbox {  
02.float: left;  
03.width: 150px;  
04.height: 150px;  
05.margin: 5px 0 5px 100px;  
06.display: inline;  
07.}  

01..floatbox {  
02.float: left;  
03.width: 150px;  
04.height: 150px;  
05.margin: 5px 0 5px 100px;  
06./*This last value applies the 100px left margin */  
07.}