1. 禁止鼠标双击选中文本
<div onselectstart="return false;" style="-moz-user-select:none;">不被双击选中文字的区域</div>
2. 自定义li样式
li:{ list-style: none; } li:before{ content: "◆"; display: block; float: left; font-size: 1rem; margin-right: 0.5rem; }
效果如图:
3. IE条件注释
加载CSS2 <!--[if lt IE 9]> 加载CSS1(可以把要重写的写在这里). <![endif]-->
4. 图片base64表示法
编写插件需要使用图片资源又不适合直接引入时使用base64图片编码进css或js插件
5. 浏览器页面渲染优化
<!-- 强制360浏览器使用webkit引擎渲染 --> <meta name="renderer" content="webkit"/> <!-- 强制IE浏览器使用最高版本渲染 --> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <!-- 方便媒体查询 --> <meta name="viewport" content="width=device-width, initial-scale=1"/> <!-- 手机端不允许缩放 --> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
6. 边框和内边距的反向绘制
css默认边框border和内边距padding绘制在盒的外部,定义的高度和宽度一旦应用了其中一个属性便会被撑大,导致不好把握盒的真实宽高。css3提供了一个新的样式:box-sizing。
默认为content-box,提供一个属性border-box,可使边框内边距绘制在盒内部,盒被定义的宽高不会被改变。
box-sizing:border-box; -moz-box-sizing:border-box; /* Firefox */ -webkit-box-sizing:border-box; /* Safari */
7. 纯css绘制三角形和气泡框
三角形利用边框重叠效果,三个边框为透明时,第四个边款的位置将呈现三角形效果。
div { width: 0px; height: 0px; border-width: 100px; border-style: solid; border-color: #00f #ff0 #f00 #0f0; }
当三个边框为透明只保留一个边框的颜色时:
div { width: 0px; height: 0px; border: 100px solid transparent; border-bottom-color: #f00; }
运用在边框上 - 拼接:
.border_div { width: 200px; height: 50px; border: 1px solid #666; border-radius: 20px; position: relative; } .triangle { width: 0px; height: 0px; border: 10px solid transparent; border-top-color: #666; position: absolute; bottom: -20px; left: 50%; margin-left: -10px; }
镂空:
.triangle:before { content: ""; width: 0px; height: 0px; border: 10px solid transparent; border-top-color: #fff; position: absolute; bottom: -9px; left: 50%; margin-left: -10px; }
8. css单位rem
px为一个单位像素点,em为当前元素父标签的font-size大小,rem为html标签的font-size大小。
所有单位如果统一使用rem可以方便的适配不同屏幕分辨率,因为只需使用js按照规则改动html的font-size值,整个页面都会随之改变。
当使用了
<meta name="viewport" content="width=device-width, initial-scale=1"/>
时,手机端的页面px不再表示一个像素点,而是被映射为一个合适的值。同时也会影响rem的大小,因为1rem=?px,px单位值变了,rem自然也会跟着变。
9. 同级元素选择器
:nth-child为同级元素正序选择器,例如
//style: div { width: 20px; height: 20px; float: left; margin: 0 10px; } div : nth-child(even) { background: #0062CC; } div : nth-child(odd) { background: #24E150; }
//html <div></div> <div></div> <div></div> <div></div>
效果图:
四个div标签都是作为nth-child选择器选择范围的同级元素(非指兄弟元素)。参数可为值,可为表达式。
`匹配同级元素中的第一个元素。 div : nth-child(1) `匹配偶数元素 div : nth-child(even) `匹配奇数元素 div : nth-child(odd) `逢3的倍数匹配 div : nth-child(n*3)
nth-last-child与nth-child相反,为倒序同级选择器。所谓同级,即不分是否兄弟元素,只要级别一致便参与选取。first-child和last-child见名知意,相对应nth-child(1)和nth-last-child(1)。注意:索引从1开始
10. 伪元素:before和:after
这两个伪元素用于在元素前后插入内容,例:
`style span:before{ content: "问候:"; }
//html <span>你好啊</span>
伪元素作为元素的子级元素,通常用于插入整体固定的内容,例如自定义列表样式就是一个不错的选择。当把元素的inline属性破坏(position:absolute/float),那么:after和:before也就只存在名字的区别了。一些特殊的样式可以利用它们做到,但使用有些注意的地方:
1. 空元素不支持伪元素:input img textarea select等,内部无法包裹内容
2. 伪元素使用时必须有content属性,哪怕为空字符串
另,css伪类(nth-child等)和伪元素在css2中都使用单冒号 : ,但在css3中提倡伪元素使用双冒号 :: ,伪类使用单冒号 : ,具体是为了遵循标准还是更在意兼容全凭个人。
11. 要不讲讲冷门的css属性选择器?
常见的css选择器,比如类选择器、id选择器,看厌了就来点小清新。
//匹配input标签,type属性为submit的元素 input[type="submit"] => <input type="submit" value="提交" /> //title属性准确等于Hello [title="Hello"] => <div title="Hello"></div> //title属性包含Hello,但Hello必须为独立词汇,也即其前后要么为空格符要么为空,",Hello"、"Hello3"、"Helloa"都是匹配不到的。 [title~="Hello"] => <div title="Today , Hello Blurooo!"></div> //包含Hello即可 [title*="Hello"] => <div title="aaaaHelloaaaa"></div> //要么匹配单独的zh,要么匹配zh-*开头的字符串,无法匹配zh * [title|=zh] => <div title="zh"></div> //匹配zh开头 [title^=zh] //匹配cn结尾 [ttile$=cn] //匹配带title属性的元素,哪怕title并没有给值 [title] => <div title></div>
12. css后代选择器和子选择器的区别
//后代选择器:选择div下的所有p标签 div p{ color:#f00; } <div><p>被选择</p><section><p>被选择</p></section></div> //子选择器:选择div的直接子p标签,非直接性的子标签不选择 div>p{ color:#f00; } <div><p>被选择</p><section><p>不被选择</p></section></div>
13. 自定义字体
IE9+支持.eot字体,其它主流浏览器基本都支持.ttf字体,所以自定义字体理论上至少要备齐这两种类型。声明方法如下:
@font-face{ font-family: "custom_font"; src: ulr("custom_font.ttf"), url("custom_font.eot"); }
声明完成就可以跟正常字体一样被引用了,但是对于特殊字符没有统一unicode码的那些,例如图标类字体,使用方式相对也比较特别,例如一个自定义字体文件有一个字符,unicode编码”e600”(十六进制表示):
html转义字符使用方式
//css声明使用自定义字体 .use_custom_font{ font-family: "custom_font"; } //html直接使用转义形式,&#x + unicode编码 + ;(十进制表示的编码不加x) <div class="use_custom_font"></div>
css声明方式
//css .is_custom_font { font-family: "custom_font"; } .is_custom_font: before { content: "\e600"; } //html <i class="is_custom_font"></i>
js输出方式
// \u + 十六进制unicode编码,需保证字体输出的位置使用的是自定义字体。 document.write("\ue600");
附:
//js获取文字的十进制unicode编码 "字".charCodeAt(); //输出23383 //js获取十进制unicode编码对应的字符 String.fromCharCode(23383) //输出"字"
最后推荐一个矢量图标字体网:阿里巴巴矢量图标库(http://www.iconfont.cn/)
14. chrome跨域ajax请求
跨域问题实际上都是作为一种浏览器安全策略运行,当我们把安全策略关闭时自然就不会有跨域阻拦,此时可以随意的访问不同站点资源。
在”chrome.exe”运行时带上参数”–disable-web-security”即可,例如windows下,参数添加在chrome的启动快捷图标(右键-属性-快捷方式-目标)中即可。
15. 不固定宽度的块状元素居中法门
//html <div class="parent"> <div class="children">这算什么呢</div> </div> //css .parent { text-align: center; width: 100%; background: #eee; } .children { display: inline-block; border: 1px solid #666; border-radius: 5px; padding: 10px; }
效果:
重点:有定宽的块状元素居中很容易,或者用绝对定位设置left为50%,再margin-left修正到中间。或者直接设置margin左右auto都可以。而单纯的行内样式,例如p标签,居中只要设置text-align为center即可,但牺牲了块状元素的特性。将元素设置为inline-box则可兼顾它们的特性。但重点还是在于父元素的text-align必须设置为center。