本文：【第3章第409回】 更多文章点击
目录
查看
css/css3常用样式
强制文本显示
单行显示语法：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属性是IE浏览器的专有属性， 它可以设置或检索对象的缩放比例。
在平常的css编写过程中，zoom:1能够比较神奇地解决ie下比较奇葩的bug。
譬如外边距（margin）的重叠，譬如浮动的清除，譬如触发ie的 haslayout属性等等。
（重点）当设置了zoom的值之后，所设置的元素就会扩大或者缩小，高度宽度就会重新计算了，这里一旦改变zoom值时其实也会发生重新渲染，运用这个原理，也就解决了ie下子元素浮动时候父元素不随着自动扩大的问题。
ie下子元素浮动时候父元素不随着自动扩大的问题，使用下面的CSS写法：
.父元素 { overflow: auto; zoom: 1 }
点击a标签里面的图片，IE中图片出现虚线框问题
例如：div 宽300px ; img 宽100px; border:0px;
上面情况刚好显示三张图
这种情况就无法在横向显示三张图，因为回车导致两图间有间隙。
解决办法就是让图片浮动。
css ie6、ie7中overflow:hidden无效解决办法
产生原因：
当父元素的直接子元素或者下级子元素的样式拥有position:relative 属性时，父元素的overflow:hidden 属性就会失效。
解决办法：
我们在IE 6、7 内发现子元素会超出父元素设定的高度，即使父元素设置了overflow:hidden。
解决这个bug很简单，在父元素中使用 *position:relative; 即可解决该bug。
表格语法
...
表格位置,置左
...
表格位置,置中
...
背景图片的URL=就是路径网址
...
设定表格边框大小(使用数字)
...
设定表格的背景颜色
...
设定表格边框的颜色
...
设定表格暗边框的颜色
...
设定表格亮边框的颜色
...
指定内容与格线之间的间距(使用数字)
...
指定格线与格线之间的距离(使用数字)
...
指定表格的栏数
...
设定表格外框线的显示方式
...
指定表格的宽度大小(使用数字)
...
指定表格的高度大小(使用数字)
...指定储存格合并栏的栏数(使用数字)
...指定储存格合并列的列数(使用数字)
设置表格中的td宽度固定table-layout:fixed
table{table-layout:fixed;}
语法：table-layout:automatic | fixed | inherit
automatic：默认。列宽度由单元格内容设定。
fixed：列宽由表格宽度和列宽度设定。
inherit：规定应该从父元素继承 table-layout 属性的值。
合并表格边框border-collapse:collapse
table{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/...
box-shadow
为了兼容各主流浏览器并支持这些主流浏览器的较低版本，在基于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;
textarea去掉右侧滚动条，去掉右下角拖拽
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表示“隔二取一”
css3实现背景颜色渐变
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 代表横向渐变
css3的RGB颜色和HSL颜色， IE8不识别rgba写法
其中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的斜体
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
1. 所有非Retina的Mac
2. 所有非Retina的iOS设备
3. Acer Iconia A500
4. Samsung Galaxy Tab 10.1
5. Samsung Galaxy S
-webkit-min-device-pixel-ratio为1.3
-
Google Nexus 7
-webkit-min-device-pixel-ratio为1.5
1. Google Nexus S
2. Samsung Galaxy S II
3. HTC Desire
4. HTC Desire HD
5. HTC Incredible S
6. HTC Velocity
7. HTC Sensation
-webkit-min-device-pixel-ratio为2.0
1. iPhone 4
2. iPhone 4S
3. iPhone 5
4. iPad (3rd generation)
5. iPad 4
6. 所有Retina displays 的MAC
7. Google Galaxy Nexus
8. Google Nexus 4
9. Google Nexus 10
10. Samsung Galaxy S III
11. Samsung Galaxy Note II
12. Sony Xperia S
13. 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中不支持。
样式改变单词的大小写
首字母大写：text-transform:capitalize
全部大写：text-transform:uppercase
全部小写：text-transform:lowercasecase
this is a test!!!
首字母大写
全部大写
全部小写
html title属性内容换行方法
a.直接填写title内容时候“回车键”换行
b.使用html title换行代码
使用代码换行共两种代码，均可实现html标签内title内容显示时换行。
换行代码符合分别为：
“
”和“
”
“
”拼写：&（and符号，键盘数字键7一起&）+ #（井号）+ 10（阿拉伯数字十）+ ;（小写分号）
“
”拼写：&（and符号，键盘数字键7一起&）+ #（井号）+ 13（阿拉伯数字十三）+ ;（小写分号）
以上符合数字输入均必须英文半角模式输入。使用时候，在需要换行地方任选一种（组）换行符号代码即可。
移动端定宽布局，安卓上文字变大了解决办法
例如：
那么解决办法：给文字区外面的div设最大高度100%。
HTML5:input file控件限制上传文件类型
input file控件限制上传文件类型
文件类型中间用，分开
html和htm这样的要写成两个
如果限制上传文件为图片类型，如下：
去掉input聚焦,点击a标签，出现的外虚线框
input:focus{outline: none;}
CSS3 vw让overflow:auto页面滚动条出现时不跳动
传统的实现方式：
body { overflow-y: scroll; }
css3实现方式：
.wrap-outer {
margin-left: calc(100vw - 100%);
}
或者：
.wrap-outer {
padding-left: calc(100vw - 100%);
}
首先，.wrap-outer指的是居中定宽主体的父级，如果没有，创建一个（使用主体也是可以实现类似效果，不过本着宽度分离原则，不推荐）；
然后，calc是CSS3中的计算，IE10+浏览器支持，IE9浏览器基本支持(不能用在background-position上)；
最后，100vw相对于浏览器的window.innerWidth，是浏览器的内部宽度，注意，滚动条宽度也计算在内！而100%是可用宽度，是不含滚动条的宽度。
于是，calc(100vw - 100%)就是浏览器滚动条的宽度大小（如果有，如果没有滚动条则是0）！左右都有一个滚动条宽度（或都是0）被占用，主体内容就可以永远居中浏览器啦，从而没有任何跳动！
参考地址：http://www.zhangxinxu.com/wor...
***以下内容将主要是在移动端使用的多***
meta相关知识
H5页面窗口自动调整到设备宽度，并禁止用户缩放页面
忽略将页面中的数字识别为电话号码
忽略Android平台中对邮箱地址的识别
当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对ios的safari
将网站添加到主屏幕快速启动方式，仅针对ios的safari顶端状态条的样式
移动端viewport模板
viewport通用
