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) //輸出"字"最後推薦一個矢量圖標字體網：阿里巴巴矢量圖標庫
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。
