摘要：不允许负值用百分比来定义缩放比例。解决这个很简单，在父元素中使用即可解决该。列宽度由单元格内容设定。定义仅有大写字母。不过，要让任何元素生效还得借助于一点点。
css/css3常用样式 CSS修改选中文字的颜色
html代码：
第一段文字选中效果
第二段文字选中效果
css代码：
.p1::selection{background:red;color:#fff;}
.p2::selection{background: black;color:red;}
选中文字后的效果如图所示：
单行显示语法：white-space:nowrap;
让一段文字在固定宽度在一行显示，最后一个字符为省略标记(...)，css样式如下
div{
white-space:nowrap;
text-overflow:ellipsis;
overflow:hidden;
}
多行文本最后省略号：
div{
display: -webkit-box;
-webkit-line-clamp:2;
overflow: hidden;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
}
这里用到了文本溢出显示省略号的，即设置溢出文本显示为省略标记：
语法：text-overflow:text-overflow:clip | ellipsis | ellipsis-word（css3新增加的）;
clip：表示直接裁切溢出的文本；
ellipsis：表示文本溢出时，显示省略标记(...)，省略标记代替最后一个字符；
ellipsis-word：表示文本溢出时，也是显示省略标记(...),不同的是，省略标记代替的是最后一个词)
zoom:1的原理和作用语法：zoom：normal |
取值：
normal：使用对象的实际尺寸。
兼容性：
例子：
zoom_CSS参考手册_web前端开发参考手册系列 zoom:normal
zoom:normalzoom:5
zoom:5zoom:300%
zoom:300%
谷歌与IE浏览器结果如图所示（Firefox不支持）：
参考地址：http://www.css88.com/book/css/properties/user-interface/zoom.htm
Zoom属性是IE浏览器的专有属性， 它可以设置或检索对象的缩放比例。
在平常的css编写过程中，zoom:1能够比较神奇地解决ie下比较奇葩的bug。
譬如外边距（margin）的重叠，譬如浮动的清除，譬如触发ie的 haslayout属性等等。
（重点）当设置了zoom的值之后，所设置的元素就会扩大或者缩小，高度宽度就会重新计算了，这里一旦改变zoom值时其实也会发生重新渲染，运用这个原理，也就解决了ie下子元素浮动时候父元素不随着自动扩大的问题。
ie下子元素浮动时候父元素不随着自动扩大的问题，使用下面的CSS写法：
.父元素 { overflow: auto; zoom: 1 }
css ie6、ie7中overflow:hidden无效解决办法
产生原因：
当父元素的直接子元素或者下级子元素的样式拥有position:relative 属性时，父元素的overflow:hidden 属性就会失效。
解决办法：
我们在IE 6、7 内发现子元素会超出父元素设定的高度，即使父元素设置了overflow:hidden。
解决这个bug很简单，在父元素中使用 *position:relative; 即可解决该bug。
...
表格位置,置左...
表格位置,置中...
背景图片的URL=就是路径网址...
设定表格边框大小(使用数字)...
设定表格的背景颜色...
设定表格边框的颜色...
设定表格暗边框的颜色...
设定表格亮边框的颜色...
指定内容与格线之间的间距(使用数字)...
指定格线与格线之间的距离(使用数字)...
指定表格的栏数...
设定表格外框线的显示方式...
指定表格的宽度大小(使用数字)...
指定表格的高度大小(使用数字)
table{table-layout:fixed;}
语法：table-layout:automatic | fixed | inherit
automatic：默认。列宽度由单元格内容设定。
fixed：列宽由表格宽度和列宽度设定。
inherit：规定应该从父元素继承 table-layout 属性的值。
合并表格边框border-collapse:collapsetable{border-collapse:collapse;}
语法：border-collapse:separate | collapse | inherit
separate：默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。
collapse：如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。
inherit：规定应该从父元素继承 border-collapse 属性的值。
例如：
table{border-collapse:collapse;}
table, td, th{border:1px solid black;}
CSS text-transform控制文本的大小写
描述：text-transform 属性控制文本的大小写。
语法：text-transform:none | capitalize | uppercase | lowercase | inherit
none 默认。定义带有小写字母和大写字母的标准的文本。
capitalize 文本中的每个单词以大写字母开头。
uppercase 定义仅有大写字母。
lowercase 定义无大写字母，仅有小写字母。
inherit 规定应该从父元素继承 text-transform 属性的值。
text-stroke[ text-stroke-width ]：设置或检索对象中的文字的描边厚度
[ text-stroke-color ]：设置或检索对象中的文字的描边颜色
text-stroke(文本描边)和text-fill-color(文本填充色)注意点：
目前这两个属性只有webkit内核的Safari和Chrome支持，例如：
.box{-webkit-text-stroke: 3.3px #2A75BF;}
text-fill-color：颜色值，和color属性差不多都是文字的样式；
注意：同时使用text-fill-color和color属性，text-fill-color将覆盖color属性的颜色值；
text-fill-color可以使用透明值，即：text-fill-color：transparent
text-shadow.box{text-shadow:0px 0px 0px #333333;}
属性值依次：水平方向位移（支持负值）、垂直方向位移（支持负值）、模糊半径、阴影颜色
text-shadow对同一个text，可设置多个阴影，与box-shadow类似，使用逗号","分割，前一个设置效果在后一个设置效果之上。
box-shadow 参考：http://www.cnblogs.com/lhb25/...
为了兼容各主流浏览器并支持这些主流浏览器的较低版本，在基于Webkit的Chrome和Safari等浏览器上使用box-shadow属性时，我们需要将属性的名称写成-webkit-box-shadow的形式。Firefox浏览器则需要写成-moz-box-shadow的形式。全面的写法：
.box-shadow-6{
box-shadow:-10px 0 10px red, /*左边阴影*/
10px 0 10px yellow, /*右边阴影*/
0 -10px 10px blue, /*顶部阴影*/
0 10px 10px green; /*底边阴影*/
}
参考地址：http://blog.csdn.net/freshlov...
letter-spacing字符间距letter-spacing 属性增加或减少字符间的空白（字符间距）。
例如： letter-spacing: 2px;
css中透明度兼容代码
div{filter: alpha(opacity=80);opacity:0.8;}
根据input的type来控制css样式
1.用css中的type选择器
input[type="text"]{ background-color:#FFC;}
2.用css的expression判断表达式
input{ background-color:expression(this.type=="text"?"#FFC":"");}
3.用javascript脚本实现(觉得没必要，省略...)
css3设置字体@font-face{
font-family: myFirstFont;
src: url("Sansation_Light.ttf"),
url("Sansation_Light.eot"); /* IE9+ */
}
div{
font-family:myFirstFont;
}
网页字体设置
font-family:"YourWebFontName";
src:url("YourWebFontName.eot"); /* IE9 Compat Modes */
src:url("YourWebFontName.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
url("YourWebFontName.woff") format("woff"), /* Modern Browsers */
url("YourWebFontName.ttf") format("truetype"), /* Safari, Android, iOS */
url("YourWebFontName.svg#YourWebFontName") format("svg"); /* Legacy iOS */}
参考地址：《css学习笔记 - 网页中导入特殊字体@font-face属性详解》
css强制性换行div{
word-break:break-all; /*支持IE，chrome，FF不支持*/
word-wrap:break-word;/*支持IE，chrome，FF*/
}
CSS :first-child 选择器,:last-child选择器,nth-child(IE7,8无效，不识别)
:nth-child(2)选取第几个标签，“2可以是你想要的数字”
:nth-child(2n)选取偶数标签，2n也可以是even
:nth-child(2n-1)选取奇数标签，2n-1可以是odd
:nth-child(3n+1)自定义选取标签，3n+1表示“隔二取一”
background:-webkit-linear-gradient(top,#FFF,#cb1919); background:-o-linear-gradient(top,#FFF,#cb1919); background:-ms-linear-gradient(top,#FFF,#cb1919); background:-moz-linear-gradient(top,#FFF,#cb1919); background:linear-gradient(top,#FFF,#cb1919);
第一个参数：设置渐变的起始位置
第二个参数：设置起始位置的颜色
第三个参数：设置终止位置的颜色
IE 浏览器
IE浏览器实现渐变只能使用IE自己的滤镜去实现
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=＃00ffff,endColorstr=＃9fffff,grandientType=1);
第一个参数：渐变起始位置的颜色
第二个参数：渐变终止位置的颜色
第三个参数：渐变的类型
0 代表竖向渐变 1 代表横向渐变
其中RGB颜色的原理是通过定义不同的红绿蓝色值来组成一个颜色。color:rgb(254,2,8);
其中HSL是通过色相、饱和度、亮度模式来申明颜色的。color:hsl(359,99%,40%);
如果需要设置透明背景 则可以用到他们：
background-color:hsla(0,0%,100%,0.8); background-color:rgba(255,255,255,0.8);
不使用opacity的原因是：opacity使里面的元素也透明了，而上面的不会。
background-color:rgba(0,0,0,0.5)，此写法解决opacity带来的元素也透明问题，但IE8低版本浏览器不支持。
em,u{font-style: normal;}
媒体查询功能
一般写法：
@media screen and (max-width: 960px){
body{
background: #000;
}
}
应该有人会发现上面这段代码里面有个screen，他的意思是在告知设备在打印页面时使用衬线字体，在屏幕上显示时用无衬线字体。但是目前我发现很多网站都会直接省略screen,因为你的网站可能不需要考虑用户去打印时，你可以直接这样写：
@media (max-width: 960px){
body{
background: #000;
}
}
其中css2的媒体查询：
我们想知道移动设备是不是纵向放置的显示屏，可以这样写：
我们把第一段的代码也用CSS2来实现，让它一样可以让页面宽度小于960的执行指定的样式文件：
但是上面这个方法，最大的弊端是他会增加页面http的请求次数，增加了页面负担，我们用CSS3把样式都写在一个文件里面才是最佳的方法。
下面的写法是实现尺寸等于480px：
@media (max-device-height:480px) and (-webkit-min-device-pixel-ratio:2){
/*自己添加的样式*/
}
其中对于-webkit-min-device-pixel-ratio作如下解释：
-webkit-min-device-pixel-ratio为1.0
所有非Retina的Mac
所有非Retina的iOS设备
Acer Iconia A500
Samsung Galaxy Tab 10.1
Samsung Galaxy S
-webkit-min-device-pixel-ratio为1.3
Google Nexus 7
-webkit-min-device-pixel-ratio为1.5
Google Nexus S
Samsung Galaxy S II
HTC Desire
HTC Desire HD
HTC Incredible S
HTC Velocity
HTC Sensation
-webkit-min-device-pixel-ratio为2.0
iPhone 4
iPhone 4S
iPhone 5
iPad (3rd generation)
iPad 4
所有Retina displays 的MAC
Google Galaxy Nexus
Google Nexus 4
Google Nexus 10
Samsung Galaxy S III
Samsung Galaxy Note II
Sony Xperia S
HTC One X
样式实现三角形div{
position:absolute;
left:50%;
bottom:0;
margin-left:-10px;
width:0;
height:0;
border-width:10px;
border-style:solid dashed dashed dashed;
border-color:transparent transparent #71151c transparent;
}
css3水平垂直居中
div{
display: box;
display: -webkit-box;
display: -moz-box;
-webkit-box-pack:center;
-moz-box-pack:center;
-webkit-box-align:center;
-moz-box-align:center;
}
css3属性 -webkit-filter(改变模糊度 亮度 透明度等方法)
-webkit-filter是css3的一个属性，Webkit率先支持了这几个功能，感觉效果很不错。下面咱们就学习一下filter这个属性吧。
现在规范中支持的效果有：
grayscale 灰度 值为0-1之间的小数
sepia 褐色 值为0-1之间的小数
saturate 饱和度 值为num
hue-rotate 色相旋转 值为angle
invert 反色 值为0-1之间的小数
opacity 透明度 值为0-1之间的小数
brightness 亮度 值为0-1之间的小数
contrast 对比度 值为num
blur 模糊 值为length
drop-shadow 阴影
用法是标准的CSS写法，如：
-webkit-filter: blur(2px);
使用方法：（配合动画使用）
.jaguar-con-show img.jaguar-con-imglast{
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.jaguar-con-show img.jaguar-con-imglast{
-webkit-filter: blur(3px) brightness(.6);
-moz-filter: blur(3px) brightness(.6);
-o-filter: blur(3px) brightness(.6);
-ms-filter: blur(3px) brightness(.6);
filter: blur(3px) brightness(.5);
-webkit-transform:scale(1.1,1.1);
-moz-transform:scale(1.1,1.1);
/*border: 3px solid #000;*/
}
CSS pointer-events
pointer-events原本来源于SVG，目前在很多浏览器中已经得到体现。不过，要让任何HTML元素生效还得借助于一点点css。该属性称之为pointer-events，基本上可以将它设置为auto，这是正常的行为，而“none”是一个有趣的属性。
如果你已经设置一个元素的css属性为pointer-events: none。它将不会捕获任何click事件，而是让事件穿过该元素到达下面的元素.
Firefox 3.6+和chrome 2.0+ 以及safari 4.0+都支持这个CSS3属性，IE6/7/8/9都不支持，Opera在SVG中支持该属性但是HTML中不支持。
禁止button按钮的点击与禁止a标签的跳转pointer-events:none禁止掉鼠标事件（css3属性）
禁止button按钮的点击：
button禁止点击的样式：
button{cursor: not-allowed;}
所以button用到了disabled="disabled"与样式cursor: not-allowed
禁止a标签的跳转行为：
链接 禁用链接
样式：
a{pointer-events: none;cursor:not-allowed}
参考地址：http://www.runoob.com/try/try.php?filename=bootstrap3-button-disabledstate
但是用到键盘tab键的时候出现a标签可以跳转，实现键盘tab也禁止a标签跳转 参考地：
http://www.zhangxinxu.com/wordpress/2011/12/css3-pointer-events-none-javascript/
首字母大写：text-transform:capitalize
全部大写：text-transform:uppercase
全部小写：text-transform:lowercasecase
