1. 禁止鼠標(biāo)雙擊選中文本
<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(可以把要重寫(xiě)的寫(xiě)在這里).
<![endif]-->
4. 圖片base64表示法
編寫(xiě)插件需要使用圖片資源又不適合直接引入時(shí)使用base64圖片編碼進(jìn)css或js插件
5. 瀏覽器頁(yè)面渲染優(yōu)化
<!-- 強(qiáng)制360瀏覽器使用webkit引擎渲染 -->
<meta name="renderer" content="webkit"/>
<!-- 強(qiáng)制IE瀏覽器使用最高版本渲染 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<!-- 方便媒體查詢(xún) -->
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<!-- 手機(jī)端不允許縮放 -->
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
6. 邊框和內(nèi)邊距的反向繪制
css默認(rèn)邊框border和內(nèi)邊距padding繪制在盒的外部,定義的高度和寬度一旦應(yīng)用了其中一個(gè)屬性便會(huì)被撐大,導(dǎo)致不好把握盒的真實(shí)寬高。css3提供了一個(gè)新的樣式:box-sizing。默認(rèn)為content-box,提供一個(gè)屬性border-box,可使邊框內(nèi)邊距繪制在盒內(nèi)部,盒被定義的寬高不會(huì)被改變。
some: {
box-sizing: border-box;
-moz-box-sizing: border-box; /* Firefox */
-webkit-box-sizing: border-box; /* Safari */
}
7. 純css繪制三角形和氣泡框
三角形利用邊框重疊效果,三個(gè)邊框?yàn)橥该鲿r(shí),第四個(gè)邊款的位置將呈現(xiàn)三角形效果。
div {
width: 0px;
height: 0px;
border-width: 100px;
border-style: solid;
border-color: #00f #ff0 #f00 #0f0;
}
當(dāng)三個(gè)邊框?yàn)橥该髦槐A粢粋€(gè)邊框的顏色時(shí):
div {
width: 0px;
height: 0px;
border: 100px solid transparent;
border-bottom-color: #f00;
}
運(yùn)用在邊框上 - 拼接:
.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為一個(gè)單位像素點(diǎn),em為當(dāng)前元素父標(biāo)簽的font-size大小,rem為html標(biāo)簽的font-size大小。所有單位如果統(tǒng)一使用rem可以方便的適配不同屏幕分辨率,因?yàn)橹恍枋褂胘s按照規(guī)則改動(dòng)html的font-size值,整個(gè)頁(yè)面都會(huì)隨之改變。當(dāng)使用了
<meta name="viewport" content="width=device-width, initial-scale=1"/>
時(shí),手機(jī)端的頁(yè)面px不再表示一個(gè)像素點(diǎn),而是被映射為一個(gè)合適的值。同時(shí)也會(huì)影響rem的大小,因?yàn)?rem=?px,px單位值變了,rem自然也會(huì)跟著變。
9. 同級(jí)元素選擇器
:nth-child為同級(jí)元素正序選擇器,例如
//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>
效果圖:四個(gè)div標(biāo)簽都是作為nth-child選擇器選擇范圍的同級(jí)元素(非指兄弟元素)。參數(shù)可為值,可為表達(dá)式。
//匹配同級(jí)元素中的第一個(gè)元素。
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相反,為倒序同級(jí)選擇器。所謂同級(jí),即不分是否兄弟元素,只要級(jí)別一致便參與選取。first-child和last-child見(jiàn)名知意,相對(duì)應(yīng)nth-child(1)和nth-last-child(1)。注意:索引從1開(kāi)始
10. 偽元素:before和:after
這兩個(gè)偽元素用于在元素前后插入內(nèi)容,例:
//style
span: before {
content: "問(wèn)候:";
}
//html
<span>
你好啊
</span>
偽元素作為元素的子級(jí)元素,通常用于插入整體固定的內(nèi)容,例如自定義列表樣式就是一個(gè)不錯(cuò)的選擇。當(dāng)把元素的inline屬性破壞(position:absolute/float),那么:after和:before也就只存在名字的區(qū)別了。一些特殊的樣式可以利用它們做到,但使用有些注意的地方:
- 空元素不支持偽元素:input img textarea select等,內(nèi)部無(wú)法包裹內(nèi)容
- 偽元素使用時(shí)必須有content屬性,哪怕為空字符串另,css偽類(lèi)(nth-child等)和偽元素在css2中都使用單冒號(hào) : ,但在css3中提倡偽元素使用雙冒號(hào) :: ,偽類(lèi)使用單冒號(hào) : ,具體是為了遵循標(biāo)準(zhǔn)還是更在意兼容全憑個(gè)人。
11. 說(shuō)說(shuō)冷門(mén)的css屬性選擇器?
常見(jiàn)的css選擇器,比如類(lèi)選擇器、id選擇器,看厭了就來(lái)點(diǎn)小清新。
//匹配input標(biāo)簽,type屬性為submit的元素
input[type="submit"] => <input type="submit" value="提交" />
//title屬性準(zhǔn)確等于Hello
[title="Hello"] => <div title="Hello"></div>
//title屬性包含Hello,但Hello必須為獨(dú)立詞匯,也即其前后要么為空格符要么為空,",Hello"、"Hello3"、"Helloa"都是匹配不到的。
[title~="Hello"] => <div title="Today , Hello Blurooo!"></div>
//包含Hello即可
[title*="Hello"] => <div title="aaaaHelloaaaa"></div>
//要么匹配單獨(dú)的zh,要么匹配zh-*開(kāi)頭的字符串,無(wú)法匹配zh *
[title|=zh] => <div title="zh"></div>
//匹配zh開(kāi)頭
[title^=zh]
//匹配cn結(jié)尾
[ttile$=cn]
//匹配帶title屬性的元素,哪怕title并沒(méi)有給值
[title] => <div title></div>
//not選擇器,匹配所有不帶cur類(lèi)的p標(biāo)簽
p:not(.cur) => <p class="notCur"></p>
12. css后代選擇器和子選擇器的區(qū)別
//后代選擇器:選擇div下的所有p標(biāo)簽
div p {
color:#f00;
}
<div>
<p>被選擇</p>
<section>
<p>被選擇</p>
</section>
</div>
//子選擇器:選擇div的直接子p標(biāo)簽,非直接性的子標(biāo)簽不選擇
div>p {
color:#f00;
}
<div>
<p>被選擇</p>
<section>
<p>不被選擇</p>
</section>
</div>
13. 自定義字體
IE9+支持.eot字體,其它主流瀏覽器基本都支持.ttf字體,所以自定義字體理論上至少要備齊這兩種類(lèi)型。聲明方法如下:
@font-face {
font-family: "custom_font";
src: ulr("custom_font.ttf"),
url("custom_font.eot");
}
聲明完成就可以跟正常字體一樣被引用了,但是對(duì)于特殊字符沒(méi)有統(tǒng)一unicode碼的那些,例如圖標(biāo)類(lèi)字體,使用方式相對(duì)也比較特別,例如一個(gè)自定義字體文件有一個(gè)字符,unicode編碼"e600"(十六進(jìn)制表示):
html轉(zhuǎn)義字符使用方式
//css聲明使用自定義字體
.use_custom_font {
font-family: "custom_font";
}
//html直接使用轉(zhuǎn)義形式,&#x + unicode編碼 + ;(十進(jìn)制表示的編碼不加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 + 十六進(jìn)制unicode編碼,需保證字體輸出的位置使用的是自定義字體。
document.write("\ue600");
附:
//js獲取文字的十進(jìn)制unicode編碼
"字".charCodeAt(); //輸出23383
//js獲取十進(jìn)制unicode編碼對(duì)應(yīng)的字符
String.fromCharCode(23383) //輸出"字"
最后推薦一個(gè)矢量圖標(biāo)字體網(wǎng):阿里巴巴矢量圖標(biāo)庫(kù)
14. chrome跨域ajax請(qǐng)求
跨域問(wèn)題實(shí)際上都是作為一種瀏覽器安全策略運(yùn)行,當(dāng)我們把安全策略關(guān)閉時(shí)自然就不會(huì)有跨域阻攔,此時(shí)可以隨意的訪(fǎng)問(wèn)不同站點(diǎn)資源。在chrome.exe
運(yùn)行時(shí)帶上參數(shù)即可。
--disable-web-security
windows下,參數(shù)添加在chrome的啟動(dòng)快捷圖標(biāo)(右鍵-屬性-快捷方式-目標(biāo))。
mac下,直接在終端輸入:
open -n /Applications/Google\ Chrome.app/ --args --disable-web-security --user-data-dir=/Users/Apple/MyChromeDevUserData/
瀏覽器跨域的用處在哪?開(kāi)發(fā)的時(shí)候,有時(shí)沒(méi)有本地代理,就尤其好用。
15. 不固定寬度的塊狀元素左右居中法門(mén)
//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;
}
效果:重點(diǎn):有定寬的塊狀元素居中很容易,或者用絕對(duì)定位設(shè)置left為50%,再margin-left修正到中間。或者直接設(shè)置margin左右auto都可以。而單純的行內(nèi)樣式,例如p標(biāo)簽,居中只要設(shè)置text-align為center即可,但犧牲了塊狀元素的特性。將元素設(shè)置為inline-box則可兼顧它們的特性。但重點(diǎn)還是在于父元素的text-align必須設(shè)置為center。
(原創(chuàng)文章,尊重成果)