HTML和CSS技巧點(diǎn)滴

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插件

在線(xiàn)base轉(zhuǎn)換直通車(chē)

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)橥该髦槐Ａ粢粋€(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ū)別了。一些特殊的樣式可以利用它們做到，但使用有些注意的地方：

  1. 空元素不支持偽元素：input img textarea select等，內(nèi)部無(wú)法包裹內(nèi)容
  2. 偽元素使用時(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)文章，尊重成果）

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 問(wèn)答題47 /72 常見(jiàn)瀏覽器兼容性問(wèn)題與解決方案？ 參考答案 (1)瀏覽器兼容問(wèn)題一：不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,815評(píng)論 1贊 92
  • 1.行內(nèi)元素和塊級(jí)元素?img算什么?行內(nèi)元素怎么轉(zhuǎn)化為塊級(jí)元素? 行內(nèi)元素：和有他元素都在一行上，高度、行高及外...
    極樂(lè)君閱讀 2,464評(píng)論 0贊 20
  • display: none; 與 visibility: hidden; 的區(qū)別 聯(lián)系：它們都能讓元素不可見(jiàn) 區(qū)別...
    紋小艾閱讀 1,691評(píng)論 0贊 1
  • Part 1 精要主義者核心思維模式 （時(shí)間與精力只用于有意義的事） 德國(guó)的博朗公司（Braun)首席設(shè)計(jì)師迪特·...
    李春輝閱讀 1,698評(píng)論 0贊 3
  • 《怦然心動(dòng)的人生整理魔法》筆記 整理之前你要知道的： 1. 整理之前先想好什么樣的家是讓自己怦然心動(dòng)的，建議可以找...
    snow_kuma閱讀 255評(píng)論 0贊 0