前端總結系列
- 前端總結·基礎篇·CSS（一）布局
- 前端總結·基礎篇·CSS（二）視覺
- 前端總結·基礎篇·CSS（三）補充
- 前端總結·基礎篇·JS（一）原型、原型鏈、構造函數和字符串（String）
- 前端總結·基礎篇·JS（二）數組深拷貝、去重以及字符串反序和數組（Array）
- 前端總結·基礎篇·JS（三）arguments、callee、call、apply、bind及函數封裝和構造函數
- 前端總結·基礎篇·JS（四）異步請求及跨域方案
- 前端總結·工具篇·管理（一）常用模塊化方案
目錄
一、移動端
1.1 視口（viewport）
1.2 媒體查詢（media query）
1.3 相對字體大小（rem/em）
二、選擇器
2.1 常用
2.2 關系
2.3 偽元素
2.4 偽類
2.5 優先級
三、樣式重置（reset）
3.1 常用重置
3.2 重置插件（Normalize.css）
四、瀏覽器前綴
4.1 前綴由來
4.2 解決方案
五、兼容性
5.1 IE條件注釋
5.2 IE hack
5.3 指定渲染模式
五、CSS庫
一、移動端
移動端還沒有上車。先來總結一下三個基本的移動端開發特性：視口（viewport）、媒體查詢（@media）和相對字體大小。
1.1 視口（viewport）
加上視口之后，頁面將會自動裁剪成適合移動頁面的大小。
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
width=device-width // 把頁面寬設置成設備一樣
initial-scale=1.0 // 初始縮放為1.0
user-scalable=no // 不允許用戶縮放（此處有坑，有時會無效）
1.2 媒體查詢（media query）
以下只是對媒體查詢使用的一個演示。實際中我們常用媒體查詢來根據不同寬度的設備顯示不同的布局。
/* HTML */
<div class="media">meida</div>
/* CSS */
.media {
background-color: gray;
color: white;
}
@media screen and (max-width:1000px) {
.media {
background-color: red;
}
}
@media screen and (max-width:800px) {
.media {
background-color: orange;
}
}
1.3 相對字體大小（rem/em）
rem是相對於根字體的大小，em是相對於父級的字體大小。
/* HTML */
<div class="rem">rem</div>
/* CSS */
/* 根字體在html而不是body中 */
html {
font-size: 60px; /* 修改根字體，對應div中的字體會改變 */
}
.rem {
font-size: 1.2rem;
}
二、選擇器
2.1 常用
標簽（tag）、id和類（class）都是常用的選擇器。其中class最為常用。
// id在頁面中是唯一的，class的屬性可以有多個
<p id="mark" class="mark important">mark</p>
<p class="mark todo">have a lunch</p>
p {color:red;} // 標簽選擇器
#mark {color:red;} // id選擇器
.mark {color:red;} // 類選擇器
2.2 關系
后代（parent child-child） 子代（parent>child） 兄弟（+） 相鄰（~）。
兄弟選擇器常用來制作，導航欄中間的一條邊框線。
<ul>
<li class="brother"><a>one</a></li>
<li>two</li>
<li>three</li>
</ul>
ul li {color:red;} // 后代選擇器，one、two和three都變成紅色
ul>li {color:red;} // 子代選擇器，two和three變成紅色
.brother+li {color:red;} // 兄弟選擇器，two變成紅色
.brother~li {color:red;} // 相鄰選擇器，two和three變成紅色
中間線示例
li {
float: left;
list-style-type: none;
padding: 5px;
}
li+li {
border-left: 1px solid red;
}
2.3 偽元素
偽類有::before、::after、::selection、::first-line、::first-letter。
其中::before常用來制作三角形和登陸框左邊的圖標。更多請見kingkit。
/* HTML */
<div class="triangle">triangle</div>
/* CSS */
.triangle {
position: relative;
border: 1px solid red;
padding: 2px 4px;
width: 60px;
height: 20px;
margin-left: 10px;
border-radius: 10%; // 設置矩形圓角
}
.triangle::before,.triangle::after {
content: "";
position: absolute;
top: 7px;
left: -10px;
width: 0;
height: 0;
border-style: solid;
border-color: transparent red transparent transparent; // 右邊框設置為紅色
border-width: 5px 10px 5px 0; // 左邊框設置為0
}
.triangle::after {
left: -9px;
border-right-color: white; // 設置三角形內容為白色
}
.triangle::selection {
color: red; // div內選中的部分會變成紅色
}
2.4 偽類
LVHA（:link,:visited,:hover,:active）、:focus、lang、first-child（last-child,nth-child(n)）
div:first-child {}
div:nth-child(5) {}
div:last-child {}
2.5 優先級
優先級最高的是設置了!important的元素，其次看元素的權重。權重相同時看誰離HTML更近（內嵌>內鏈>外鏈），近的優先級更高。
權重分配是attr：1000，id：100，class：10，tag：1。當有多種選擇器組合的時候，他們的權重之和就是總權重。權重大的優先級高。
display: none!important; // 優先級最高，IE6不支持同一選擇符中的!important
.parent > div {} // 權重計算 10+1=11
同級的按照就近原則（內嵌>內連>外鏈），越近優先級越高
優先級最高
三、樣式重置（reset）
3.1 常用重置
* {box-sizing:border-box;} /* IE8+ */
body {margin:0;} /* 去除邊距 */
ul {margin:0;padding-left:0;} /* 去除邊距和左填充 */
li {list-style-type:none;} /* 去除列表的圓點 */
a {text-decoration:none;} /* 去除下划線 */
3.2 重置插件（Normalize.css,IE8+）
當然，你也可以不自己寫重置樣式，使用插件制動幫你完成。
四、瀏覽器前綴
想要使用未標准化的新特性，往往伴隨着一大堆兼容前綴。各瀏覽器使用自己的私有前綴實現新功能，我門在寫完了兼容屬性之后，還要加上一條標准屬性。等到屬性標准化之后我們就不需要重新添加標准屬性了。
div
{
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari 和 Chrome */
-o-transition: width 2s; /* Opera */
}
4.1 前綴由來
在實驗性功能尚未標准化之前，瀏覽器廠商為了開發者能盡快的體驗這些新特效。通過帶前綴的CSS屬性使得這些功能可以直接被使用。
待到標准化之后，則可以通過不帶前綴的屬性設置樣式。但是對於沒有更新瀏覽器的用戶來說，樣式依舊需要通過私有屬性訪問。
這樣，你不得不寫N條兼容代碼。chrome（-webkit-）、firefox(-moz-)和opera(-o-)。safari和chrome一樣，私有屬性前綴也是-webkit-。
4.2 解決方案
這時，你需要的是一個Autoprefixer或者-prefix-free。
五、兼容性
除了手寫IE兼容性，你也可以直接使用IE9.js自動處理IE6-9的bug。另外，讓IE6-9支持的支持圓角、背景漸變、邊框圖片、盒陰影、rgba等可視化的功能可以用CSS3PIE。讓IE6-8支持媒體查詢可以使用Respond.js。IE6-7支持CSS3 box-sizing可以使用borderBoxModel.js。IE6-8支持:first-child等高級CSS選擇符，可以用selectivizr。讓IE8及以下的瀏覽器支持H5新元素，可以用html5shiv.js。
5.1 IE條件注釋
這類代碼只有IE會解析，其他瀏覽器會作為注釋處理。更多請見天堂的旋轉木馬。
<!--[if IE 6]>
<script type="text/javascript" scr="IE6.js"></script>
<![endif]-->
if <條件> IE <版本>
條件：gt/gte/lt/lte/!（大於/大於等於/小於/小於等於/非）
版本：5.5/6/7/8
!IE 通常連在一起
5.2 IE hack
為針對不同IE瀏覽器進行樣式修改，可以使用css hack。更多請見freshlover。
指定版本：IE6(_),IE7(+),IE8(/),IE9(:root 9)
指定范圍：IE6-7(*),IE8-10(\0),IE9-10(\9\0),IE All(\9)
.hack{
_color:red; /* IE6 */
color:red\0; /* IE8-10 */
}
:root .hack{color:red\0;} /* IE9 */
5.3 指定渲染模式
你可以為IE指定渲染模式，當用戶安裝谷歌插件GCF之后，將會強制頁面使用chrome模式渲染。更多請見腳本之家。
<meta http-equiv="X-UA-Compatible" content="IE=7" /> // IE8-9使用IE7模式渲染
<meta http-equiv="X-UA-Compatible" content="IE=8" /> // IE8-9使用IE8模式渲染
<meta http-equiv="X-UA-Compatible" content="edge" /> // IE8-9使用IE最高版模式渲染
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> // 安裝GCF之后，IE使用chrome模式渲染
五、CSS庫
為了方便快速的再次實現需要的效果，把常用的功能封裝起來。通過設置class的方式，使用封裝好的css庫。更多請見深度開源。
CSS3懸浮效果（Hover.CSS）、提示（HINT.css）、進度（progress.js）、加載動畫（css-loaders）、按鈕（Buttons）、預處理（less,sass）、界面（Bootstrap）。
總結
這一節主要參考的書籍有：《CSS設計指南》和《CSS揭秘》。主要參考的網站和博客有夢之都、腳本之家、W3School、深度開源、kingkit、天堂的旋轉木馬和freshlover。另外還有一些平時的積累。
未來半個月的更新頻率不能保證了，快與慢完全說不准。