css中的小技巧

1、怎么去掉a链接点击时的虚线框

a {outline:none;blr:expression(this.onFocus=this.blur())}//后面的是针对ie

2、怎么去掉input点击时的虚线框

 <input type="button" class="btn" value="搜索" onFocus='this.blur()' />

3、jq怎么去掉点击时的虚线框

　$("a,input,button").focus(function(){this.blur()});

4、固定顶部导航栏（还是用js做吧）

#nav {
    /*一般浏览器**/
    position:fixed;z-index:9999;
    /*ie6**/
    _position:absolute;
    _top:expression(documentElement.scrollTop+'px')
}  
/*******为了不让nav跳动，在body中加个假背景图片********/
body {
    background:url(about:blank);
    background-attachment:fixed;
}

5、ie6下怎么解决min-width

用hack：假如需要把<div id="banner" ></div>设置最小宽度1000px
css:
#banner {min-width:1000px}
*html .ie6_out {margin-left:1000px;zoom:1}
*html .ie6_in {position:relative;float:left;margin-left:-1000px}
html:
<!--[if lte IE6]>
<div class="ie6_out">
<div class="ie6_in">
<![endif]-->

<div id="banner" ></div>

<!--[if lte IE6]>
</div>
</div>
<![endif]-->

6、css隐藏多余的字符的几个方法
（1）常用的,但是只应用于块元素

text-indent:-9999px; 

（2）、用于a，可以隐藏掉background之上的字

line-height:0;
font-size:0;
overflow:hidden

（3）、可以加个span标签，然后设置dispaly：none,单个标签或者按钮可以推荐用这个，没必要增加太多没用的标签

<a href="javascript:;"><span>立即注册</span></a>
span {display:none}

7、网站图标的引入

<link href="img/logo.ico" rel="shortcut icon" />

8、li列表垂直，出现3px问题，解决办法
（1）当内容为图片时

img {dispaly:block}

（2）内容为文字

li {float:left;clear:both}

9、ie6、7中，要隐藏value值

input {display:block;text-indet:-9999px}

10、清浮动
（1）

父级 {overflow：hidden}

（2）推荐

父级 {zoom:1}
父级:after {content:"";display:block;clear:both}

11、解决IE7浏览器li下list-style-type无效的问题
list-style-type:disc无效，但是在firefox下确实正常的。

原因可能是因为某些浮动设置造成了li不正常显示，解决的方法也很简单，就是使用增加一个属性：

list-style-position: inside

12、ie6、7下overflow:hidden失效

当父元素的直接子元素或者下级子元素的样式拥有position:relative属性时，父元素的overflow:hidden属性就会失效。
我们在IE 6内发现子元素会超出父元素设定的高度，即使父元素设置了overflow:hidden。
解决这个bug很简单，在父元素中使用position:relative;即可解决该bug

就定位来说，一般都是父元素设置为relative，子元素设置为absolute

13、ie6、7下无论z-index设置多高，都无效，出现条件3种：
（1）父标签position属性为relative；
（2）问题标签无position属性（不包括static）
（3）问题标签含有浮动属性
解决的办法分别是：
（1）将父标签的relative改为absolute，
（2）去掉问题标签的浮动
（3）浮动元素添加position属性

14、设置margin-top无效，此处是说子元素设置margin-top无效

原因 ：这涉及到对于margin标签的深层次理解。你给外部的div层加上border属性，或者加个padding属性就可以了。 根据W3C盒子模型的规范，一个盒子如果没有上补白(padding-top)和上边框(border-top)，那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠

解决方案：

1.该盒子加浮动；
2.用内边距来解决（给其父元素一个设置个内边距）
3.overflow：hidden；
4.给其父元素一个设置个border属性也可解决。
5.绝对定位

15、css选择器使用规范

 1. 避免使用通配符 *
 2. 避免使用标签选择器及单个属性选择器作为关键选择器（eg ：#box .list p ,这里的p就是关键选择器）
 3. 不要在ID选择器前面使用标签名，因为ID是唯一的
 4. 尽量不要在选择符中定义过多的层级，最好不要超过三级，层级越多，可以思考一下代码结构是否合适。

16、css选择器的解析方式
css选择器的解析方式，从右到左

比如div#box p span.red{color:red;}，浏览器的查找顺序如下：先查找html中所有class='red'的span元素，找到后，再查找其父辈元素中是否有p元素，再判断p的父元素中是否有id为divBox的div元素，如果都存在则匹配上。

ps:持续添加。