1.强制文本单行显示:
white-space:nowrap;
多行文本最后省略号:
display: -webkit-box; -webkit-line-clamp:2; overflow: hidden; -webkit-box-orient: vertical; text-overflow: ellipsis;
2.设置溢出文本显示为省略标记:
text-overflow:ellipsis;
(注:text-overflow:clip | ellipsis | ellipsis-word;(css3新增加的)
其中clip表示直接裁切溢出的文本;
值ellipsis表示文本溢出时,显示省略标记(...),省略标记代替最后一个字符;
值ellipsis-word表示文本溢出时,也是显示省略标记(...),不同的是,省略标记代替的是最后一个词)
例:想让一段文字在固定宽度在一行显示,最后一个字符为省略标记(...),css样式如下
white-space:nowrap;text-overflow:ellipsis;overflow:hidden;
3.例如一段代码:<a href="javascript:void(0)"><img src="images/suba.gif"></a>
当点击a标签里面的图片的时候,有虚线框,IE中图片还有边框,如何解决?
解决办法:
a{outline:none;}//主要是针对火狐等浏览器,但IE不行
img{border:0;}
a:active{noOutline:expression(this.onFocus=this.blur());}//解决IE6,IE7中的虚线框。
对于a标签来说,一般简单的解决办法是:
在a标签里加入js控制,当a标签被聚焦时,强制取消焦点,这时候a标签自然不会有虚线框。
<a href="#"onfocus="this.blur();">测试</a>
但是当连接太多的时候,一个一个的加这段代码不实用
4.html中两张图横向回车导致间隙,怎么才能去除成为无间隙?
例如:div 宽300px ; img 宽100px; border:0px;
<div><img /><img /><img /></div>
//上面情况刚好显示三张图
<div><img /><img /><img /></div>
这种情况就无法在横向显示三张图,因为回车导致两图间有间隙。
解决办法就是让图片浮动。
5.css ie6、ie7中overflow:hidden无效解决办法
产生原因:
当父元素的直接子元素或者下级子元素的样式拥有position:relative 属性时,父元素的overflow:hidden 属性就会失效。
解决办法:
我们在IE 6、7 内发现子元素会超出父元素设定的高度,即使父元素设置了overflow:hidden。
解决这个bug很简单,在父元素中使用 *position:relative; 即可解决该bug
6.表格语法
<table aling=left>...</table>表格位置,置左
<table aling=center>...</table>表格位置,置中
<table background=图片路径>...</table>背景图片的URL=就是路径网址
<table border=边框大小>...</table>设定表格边框大小(使用数字)
<table bgcolor=颜色码>...</table>设定表格的背景颜色
<table borderclor=颜色码>...</table>设定表格边框的颜色
<table borderclordark=颜色码>...</table>设定表格暗边框的颜色
<table borderclorlight=颜色码>...</table>设定表格亮边框的颜色
<table cellpadding=参数>...</table>指定内容与格线之间的间距(使用数字)
<table cellspacing=参数>...</table>指定格线与格线之间的距离(使用数字)
<table cols=参数>...</table>指定表格的栏数
<table frame=参数>...</table>设定表格外框线的显示方式
<table width=宽度>...</table>指定表格的宽度大小(使用数字)
<table height=高度>...</table>指定表格的高度大小(使用数字)
<td colspan=参数>...</td>指定储存格合并栏的栏数(使用数字)
<td rowspan=参数>...</td>指定储存格合并列的列数(使用数字)
7.CSS text-transform
text-transform 属性控制文本的大小写。
none 默认。定义带有小写字母和大写字母的标准的文本。
capitalize 文本中的每个单词以大写字母开头。
uppercase 定义仅有大写字母。
lowercase 定义无大写字母,仅有小写字母。
inherit 规定应该从父元素继承 text-transform 属性的值。
8. letter-spacing
letter-spacing 属性增加或减少字符间的空白(字符间距)。
例如: letter-spacing: 2px;
9.textarea去掉右侧滚动条,去掉右下角拖拽
代码:
<TEXTAREA style= "overflow:hidden; resize:none; "> </TEXTAREA>
10.css中透明度兼容代码:
filter: alpha(opacity=80);opacity:0.8;
11.根据input的type来控制css样式
a. 用css中的type选择器
input[type="text"]{ background-color:#FFC;}
b.用css的expression判断表达式
input{ background-color:expression(this.type=="text"?'#FFC':'');}
c.用javascript脚本实现(觉得没必要,省略...)
12:text-stroke
[ text-stroke-width ]:设置或检索对象中的文字的描边厚度 [ text-stroke-color ]:设置或检索对象中的文字的描边颜色
text-stroke(文本描边)和text-fill-color(文本填充色)注意点:
目前这两个属性只有webkit内核的Safari和Chrome支持,例如: -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
13:text-shadow
text-shadow:0px 0px 0px #333333;
属性值依次:水平方向位移(支持负值)、垂直方向位移(支持负值)、模糊半径、阴影颜色
text-shadow对同一个text,可设置多个阴影,与box-shadow类似,使用逗号","分割,前一个设置效果在后一个设置效果之上。
box-shadow 参考:http://www.cnblogs.com/lhb25/archive/2013/02/20/css3-box-shadow.html
14.css3设置字体
<style> @font-face { font-family: myFirstFont; src: url('Sansation_Light.ttf'), url('Sansation_Light.eot'); /* IE9+ */ } div { font-family:myFirstFont; } </style>
15. css强制性换行
{
word-break:break-all; /*支持IE,chrome,FF不支持*/
word-wrap:break-word;/*支持IE,chrome,FF*/
}
16.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表示“隔二取一”
17. 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 代表横向渐变
18.css3的RGB颜色和HSL颜色, IE8不识别rgba写法
background-color:rgba(0,0,0,0.5),此写法解决opacity带来的元素也透明问题,单IE8低版本浏览器不支持。
19.初始化em,u的斜体
em,u{font-style: normal;}
20.取消手机页面点击a中图片出现的虚线框问题
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
-webkit-user-select: none;
21.媒体查询功能:
@media screen and (max-width: 960px){
body{
background: #000;
}
}
@media (max-width: 960px){
body{
background: #000;
}
}
@media (max-device-height:480px) and (-webkit-min-device-pixel-ratio:2){
//自己添加的样式
}
其中对于-webkit-min-device-pixel-ratio作如下解释:
22.CSS美化Placeholder提示信息的样式兼容:
input::-webkit-input-placeholder{color:#AAAAAA;}
input:focus::-webkit-input-placeholder{color:#EEEEEE;}
/* WebKit browsers */::-webkit-input-placeholder {color: #777;}
/* Mozilla Firefox 4 to 18 */:-moz-placeholder {color: #777;opacity: 1;}
/* Mozilla Firefox 19+ */::-moz-placeholder {color: #777;opacity: 1;}
/* Internet Explorer 10+ */:-ms-input-placeholder {color: #777;}
- 谷歌浏览器(Webkit): ::-webkit-input-placeholder pseudo-element;
- IE10: :-ms-input-placeholder pseudo-class;
- 火狐浏览器(Gecko18-): :-moz-placeholder pseudo-class;
- 火狐浏览器(Gecko19+): ::-moz-placeholder pseudo-element;
- Opera(Presto): 无。
23.清除IOS系统手机对input框的默认样式:
-webkit-appearance:none;
24.取消点击a标签出现的高亮:
-webkit-tap-highlight-color:rgba(0, 0, 0, 0); /* 取消链接高亮 */
25.开发移动端页面时候,经常会设置滚动条的默认样式:
/* 设置滚动条的样式 */
- ::-webkit-scrollbar {
- width:12px;
- }
- /* 滚动槽 */
- ::-webkit-scrollbar-track {
- -webkit-box-shadow:inset006pxrgba(0,0,0,0.3);
- border-radius:10px;
- }
- /* 滚动条滑块 */
- ::-webkit-scrollbar-thumb {
- border-radius:10px;
- background:rgba(0,0,0,0.1);
- -webkit-box-shadow:inset006pxrgba(0,0,0,0.5);
- }
- ::-webkit-scrollbar-thumb:window-inactive {
- background:rgba(255,0,0,0.4);
- }
26.为移动端页面中滑动滚动条的时候,添加惯性效果的方法:
div{height:100%;overflow-y:auto;}
-webkit-overflow-scrolling:touch;
-webkit-transform:translate3d(0,0,0);
27.样式实现三角形:
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;
28.移动端实现控制文本行数
display: -webkit-box;
-webkit-line-clamp: 4;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
29. css3水平垂直居中
display: box;
display: -webkit-box;
display: -moz-box;
-webkit-box-pack:center;
-moz-box-pack:center;
-webkit-box-align:center;
-moz-box-align:center;
30.Css--input输入框点击时去掉外框outline:medium;(chrome)
outline:medium;
31.移动端字体
body{font-family:Helvetica;}
32.禁止ios 长按时不触发系统的菜单,禁止ios&android长按时下载图片
.css{-webkit-touch-callout: none}
33.禁止ios和android用户选中文字
.css{-webkit-user-select:none}
34.打电话发短信,发邮件的怎么实现
打电话:<a href="tel:0755-10086">打电话给:0755-10086</a>
发短信:winphone系统无效,<a href="sms:10086">发短信给: 10086</a>
发邮件:<a href="mailTo:10086@qq.com">10086@qq.com</a>
35.css3属性 -webkit-filter(改变模糊度 亮度 透明度等方法)
-webkit-filter是css3的一个属性,Webkit率先支持了这几个功能,感觉效果很不错。下面咱们就学习一下filter这个属性吧。
现在规范中支持的效果有:
用法是标准的CSS写法,如:
使用方法:(配合动画使用)
.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;*/
}
36.CSS pointer-events
37.取消手机点击屏幕时,会出现的灰块
html,body{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}
38.样式改变单词的大小写
首字母大写:text-transform:capitalize
全部大写:text-transform:uppercase
全部小写:text-transform:lowercasecase
<spanstyle="text-transform:capitalize;" >this is a test!!!</span> 首字母大写<inputtype="text"style="text-transform:capitalize;"> 全部大写<inputtype="text"style="text-transform:uppercase;"> 全部小写<inputtype="text"style="text-transform:lowercasecase;">
39.设置表格中的td宽度固定table-layout:fixed
table { table-layout:fixed; }
table-layout可能的值如下:
automatic:默认。列宽度由单元格内容设定。
fixed:列宽由表格宽度和列宽度设定。
inherit:规定应该从父元素继承 table-layout 属性的值。
40.合并表格边框border-collapse:collapse
table { border-collapse:collapse; }
border-collapse可能的值如下:
separate:默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。
collapse:如果可能,边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。
inherit:规定应该从父元素继承 border-collapse 属性的值。
例如:
table { border-collapse:collapse; } table, td, th { border:1px solid black; }
41.不允许用户选中文本user-select:none
html代码:
<div class="test" onselectstart="return false;" unselectable="on">选择我试试,你会发现怎么也选择不到我,哈哈哈哈</div>
css样式:
.test{-webkit-user-select:none;-moz-user-select:none;-o-user-select:none;user-select:none;}
代码解释:
- IE6-9不支持该属性,但支持使用标签属性
onselectstart="return false;"
来达到user-select:none
的效果;Safari和Chrome也支持该标签属性; - 直到Opera12.5仍然不支持该属性,但和IE6-9一样,也支持使用私有的标签属性
unselectable="on"
来达到user-select:none
的效果;unselectable 的另一个值是 off; - 除Chrome和Safari外,在其它浏览器中,如果将文本设置为
-ms-user-select:none;
,则用户将无法在该文本块中开始选择文本。不过,如果用户在页面的其他区域开始选择文本,则用户仍然可以继续选择将文本设置为-ms-user-select:none;
的区域文本; - 对应的脚本特性为userSelect。
42. html title属性内容换行方法
a.直接填写title内容时候“回车键”换行
b.使用html title换行代码
使用代码换行共两种代码,均可实现html标签内title内容显示时换行。
换行代码符合分别为:
“
”和“
”
“
”拼写:&(and符号,键盘数字键7一起&)+ #(井号)+ 10(阿拉伯数字十)+ ;(小写分号)
“
”拼写:&(and符号,键盘数字键7一起&)+ #(井号)+ 13(阿拉伯数字十三)+ ;(小写分号)
以上符合数字输入均必须英文半角模式输入。使用时候,在需要换行地方任选一种(组)换行符号代码即可。