input:focus{样式;}这样就ok
border:border-width:1px;border-style:solid;border-color:#ccc;可以简写为：border:1ox solid #ccc;outline:outline-width:1px;outline-style:solid;outline-color:#ccc;可以简写为：outline:1ox solid #ccc;2者的用法相似，但是border是会占据盒子模型的大小，而outline是一个轮廓，不会占据盒子模型的大小。
取消默认的圆点和序号可以这样写list-style:none;,list的属性如下:list-style-type:square;//正方形list-style-position:inside;//inside,outside(项目符号内置还是外置)list-style-image:url(image.gif);可以缩写为一句：list-style:square inside url(image.gif);注意：这里的list-style-image不能控制图片大小，所以要把图片切成自己想要的大小
1、display:none; 显示为无2、visibility:hidden;隐藏,仍然可以得到宽和高3、widthheight;4、透明度 为0 （由100变换到0，可以做淡入淡出）5、lefttop6、用白色的div盖住7、margin设为负值......
css定义超链接是要有先后顺序的。否则，可能会出现某个或某几个样式不起作用的bug。例如：visited与hover顺序颠倒了，则不能显示hover和active的样式了。正确的顺序：a:link 未访问过的 样式a:visited 访问过的 样式a:hover 鼠标处于鼠标悬停状态的 样式a:active 当鼠标左键按下时，被激活的 样式。还有UI伪类选择器中的顺序::hover:foucs:active
XML/HTML代码<link rel="stylesheet" rev="stylesheet" href="CSS文件" type="text/css" media="all" /> XML/HTML代码<style type="text/css" media="screen"> @import url("CSS文件"); </style> 两者都是外部引用CSS的方式，但是存在一定的区别：区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。区别4：ink支持使用Javascript控制DOM去改变样式；而@import不支持。
http://www.w3cplus.com/content/css3-font-facehttp://www.w3cplus.com/css3/web-icon-with-font-facehttp://www.w3cplus.com/blog/295.html
作用：用来改变元素尺寸大小。1、resize:none|both|horizontal|vertical|inheritnone:不能拖动修改尺寸大小both：可以拖动元素，修改元素宽高horizontal：可以拖动元素，仅可以修改宽vertical：可以拖动元素，仅可以修改高inherit：继承父元素的resize属性2、使用resize属性需要配合overflow:auto;一起使用，不然不起作用。
1、psd(源文件)2、jpg:不支持透明半透明，所有空白区域填充白色。网页大图，高清图（体积大）3、gif：支持透明，不支持半透明。网页小图标（动画图片）4、png8：支持透明，不支持半透明。网页小图标5、png24：支持透明，也支持半透明。图像存在半透明效果的图片
css 4种常见实现元素居中的办法： 1、通过 margin 属性调整 :{position: absolute;top: 50%;left: 50%;margin-left: -盒子的一半；margin-top: -盒子的一半;} 2、通过 transform 属性调整:{position: absolute;top: 50%;left: 50%;transform: translateX(-盒子的一半) translateY(-盒子的一半)；} 3、通过绝对定位：注意子绝父相（子元素绝对定位，父元素相对定位）{position: absolute;top: 0;left: 0;right: 0;bootom: 0;margin: auto;} 4、通过弹性盒子 ：/* 父盒子 */{display: flex;justify-content: center;align-items: center;}
word-wrap:break-word 是优先断单词（根据空格判断单词），而 word-break:break-all 完全没有把文字当单词看待，在它眼里，都是一块一块的字符。这就会造成这么两情况：假如一个 p 有 100px 宽，而其中有很长一段无空格的英文字符，完全超过 100px 了，此时二者表现相同，都是在边界处将字符截断。假如一个 p 有 100px 宽，其中有段文字既有中文也有英文，前面是中文，占了 70px，后面一个很长的英文单词有 50px。对于 word-wrap:break-word 会将该单词全部折到下一行输出，而 word-break:break-all 会利用剩下的 30px 输出单词的前半部分，再到下一行输出剩下的 20px。支持情况word-wrap:break-word 受众多浏览器支持；word-break:break-all 受较少浏览器支持。
1.ie7下，下面的背景图不起作用 代码#navcontainer li a:hover{padding:5px 5px 5px 20px;border-left:10px solid #1c64d1;border-right:10px solid #5ba3e0;background-color:#2586d7;color:#fff;background:url(../images/jb.gif) no-repeat left 8px;}
http://www.awflasher.com/blog/archives/638
http://www.52css.com/article.asp?id=280
1.【强烈推荐】说说CSS Hack 和向后兼容2.【推荐】CSS hack:区分IE6，IE7，firefox3.CSS兼容IE/Firefox要点4.IE6.0、IE7.0 与FireFox CSS兼容的解决方法5.CSS Hack代码范例：兼容IE5.0、IE5.5、IE6.0、IE7.0、FF1.5、FF2.06.css hack解决IE5 IE5.5 IE6 Firefox浏览器兼容性7.CSS HACK 兼容列表 Firefox, IE5, IE5.5, IE6, IE7, IE8
强制不换行div{ white-space:nowrap;} 自动换行div{ word-wrap: break-word; word-break: normal; } 强制英文单词断行div{ word-break:break-all;}
【收藏】css全局定义global.csscss浏览器兼容性文章汇总css疑惑 ===============================================CSS背景属性Background详解【经验】在CSS中定义a:link、a:visited、a:hover、a:active顺序CSS display 属性【经典】Tab 导航 css 样式 应用备份css实现透明度（兼容IE6、IE7、Firefox2.0）
1 filter: alpha(opacity=50);2 -moz-opacity:0.5;3 opacity: 0.5;
1. link标签是属于xhtml范畴，而@import则是css2.1中特有的。link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。2. 加载的顺序的区别，link加载的css时，是一种并行(没有尝试是否是这样)加载CSS方式，而@import则在整个页面加载完成后才加载。3. 兼容性的区别，因@import是CSS2.1才特有的，所以对于不兼容CSS2.1的浏览器来说，无效。4. 在样式控制上(比如动态改变网页的布局时,使用javascript操作DOM)的区别，此时@import就无能为力了。
.clearfix:after {display: table;visibility: hidden;clear: both;height: 0;content: '';}直接在浮动元素的父元素上添加 clearfix 这个class 就能清除浮动
服务热线 19970861797
