1. 禁止鼠標雙擊選中文本
<div onselectstart="return false;" style="-moz-user-select:none;">
不被雙擊選中文字的區(qū)域
</div>
2. 自定義li樣式
li: {
list-style: none;
}
li:before {
content: "◆";
display: block;
float: left;
font-size: 1em;
margin-right: 0.5em;
}
3. IE條件注釋
加載CSS2
<!--[if lt IE 9]>
加載CSS1(可以把要重寫的寫在這里).
<![endif]-->
4. 圖片base64表示法
編寫插件需要使用圖片資源又不適合直接引入時使用base64圖片編碼進css或js插件
5. 瀏覽器頁面渲染優(yōu)化
<!-- 強制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. 邊框和內(nèi)邊距的反向繪制
css默認邊框border和內(nèi)邊距padding繪制在盒的外部，定義的高度和寬度一旦應(yīng)用了其中一個屬性便會被撐大，導(dǎo)致不好把握盒的真實寬高。css3提供了一個新的樣式：box-sizing。默認為content-box，提供一個屬性border-box，可使邊框內(nèi)邊距繪制在盒內(nèi)部，盒被定義的寬高不會被改變。
some: {
box-sizing: border-box;
-moz-box-sizing: border-box; /* Firefox */
-webkit-box-sizing: border-box; /* Safari */
}
7. 純css繪制三角形和氣泡框
三角形利用邊框重疊效果，三個邊框為透明時，第四個邊款的位置將呈現(xiàn)三角形效果。
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大小。所有單位如果統(tǒng)一使用rem可以方便的適配不同屏幕分辨率，因為只需使用js按照規(guī)則改動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選擇器選擇范圍的同級元素（非指兄弟元素）。參數(shù)可為值，可為表達式。
//匹配同級元素中的第一個元素。
div: nth-child(1)
//匹配偶數(shù)元素
div: nth-child(even)
//匹配奇數(shù)元素
div: nth-child(odd)
//逢3的倍數(shù)匹配
div: nth-child(n*3)
nth-last-child與nth-child相反，為倒序同級選擇器。所謂同級，即不分是否兄弟元素，只要級別一致便參與選取。first-child和last-child見名知意，相對應(yīng)nth-child(1)和nth-last-child(1)。注意：索引從1開始
10. 偽元素:before和:after
這兩個偽元素用于在元素前后插入內(nèi)容，例：
//style
span: before {
content: "問候：";
}
//html
<span>
你好啊
</span>
偽元素作為元素的子級元素，通常用于插入整體固定的內(nèi)容，例如自定義列表樣式就是一個不錯的選擇。當把元素的inline屬性破壞(position:absolute/float)，那么:after和:before也就只存在名字的區(qū)別了。一些特殊的樣式可以利用它們做到，但使用有些注意的地方：
- 空元素不支持偽元素：input img textarea select等，內(nèi)部無法包裹內(nèi)容
- 偽元素使用時必須有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結(jié)尾
[ttile$=cn]
//匹配帶title屬性的元素，哪怕title并沒有給值
[title] => <div title></div>
//not選擇器，匹配所有不帶cur類的p標簽
p:not(.cur) => <p class="notCur"></p>
12. css后代選擇器和子選擇器的區(qū)別
//后代選擇器：選擇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");
}
聲明完成就可以跟正常字體一樣被引用了，但是對于特殊字符沒有統(tǒng)一unicode碼的那些，例如圖標類字體，使用方式相對也比較特別，例如一個自定義字體文件有一個字符，unicode編碼"e600"（十六進制表示）：
html轉(zhuǎn)義字符使用方式
//css聲明使用自定義字體
.use_custom_font {
font-family: "custom_font";
}
//html直接使用轉(zhuǎn)義形式，&#x + unicode編碼 + ;（十進制表示的編碼不加x）
<span class="use_custom_font"></span>
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編碼對應(yīng)的字符
String.fromCharCode(23383) //輸出"字"
最后推薦一個矢量圖標字體網(wǎng)：阿里巴巴矢量圖標庫
14. chrome跨域ajax請求
跨域問題實際上都是作為一種瀏覽器安全策略運行，當我們把安全策略關(guān)閉時自然就不會有跨域阻攔，此時可以隨意的訪問不同站點資源。在chrome.exe運行時帶上參數(shù)即可。
--disable-web-security
windows下，參數(shù)添加在chrome的啟動快捷圖標（右鍵-屬性-快捷方式-目標）。
mac下，直接在終端輸入：
open -n /Applications/Google\ Chrome.app/ --args --disable-web-security --user-data-dir=/Users/Apple/MyChromeDevUserData/
瀏覽器跨域的用處在哪？開發(fā)的時候，有時沒有本地代理，就尤其好用。
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;
}
重點：有定寬的塊狀元素居中很容易，或者用絕對定位設(shè)置left為50%，再margin-left修正到中間?；蛘咧苯釉O(shè)置margin左右auto都可以。而單純的行內(nèi)樣式，例如p標簽，居中只要設(shè)置text-align為center即可，但犧牲了塊狀元素的特性。將元素設(shè)置為inline-box則可兼顧它們的特性。但重點還是在于父元素的text-align必須設(shè)置為center。
（原創(chuàng)文章，尊重成果）
