摘要：什么叫優雅降級和漸進增強漸進增強針對低版本瀏覽器進行構建頁面，保證最基本的功能，然后再針對高級瀏覽器進行效果交互等改進和追加功能達到更好的用戶體驗。優雅降級一開始就構建完整的功能，然后再針對低版本瀏覽器進行兼容。

選擇器類型：

id選擇器      （ # myid）
類選擇器      （.myclassname）
標簽選擇器    （div, h1, p）
相鄰選擇器    （h1 + p）
子選擇器      （ul > li）
后代選擇器    （li a）
通配符選擇器  （ * ）
屬性選擇器    （a[rel = "external"]）
偽類選擇器    （a:hover, li:nth-child）

選擇器優先級：就近原則，同權重情況下樣式定義最近者為準;載入樣式以最后載入的定位為準;

優先級為:!important > id > class > tag，同時important 比內聯優先級高

權重的規則：標簽的權重為1，class的權重為10，id的權重為100；如果權重相同，則最后定義的樣式會起作用

px：像素，絕對單位，指定是多少就是多少，計算比較容易；

em：相對單位，相對于父元素的字體大小，如果當前對象沒有設置字體尺寸，則相對于瀏覽器默認字號，em的值不固定，并且em會繼承父級元素的字體大??；

rem：相對單位，相對于HTML根元素的字體大小；

瀏覽器的默認字體高都是16px。所以未經調整的瀏覽器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。

浮動

父元素flex布局，左側子元素flex-basis:200px，右側子元素flex:1；

瀏覽器內核：IE-Trident，Firefox-Gecko，Opera-Blink，Chrome-Webkit，Safari-Webkit，360-兼容模式Trident+極速模式Webkit

    

 .box{
    width:200px;
    height:200px;
    border:1px solid #06C;
    display:table-cell;
    text-align:center;
    vertical-align:middle;
    *font-family:simsun;
    *font-size:200px;
}
.box img{
    vertical-align:middle;
} 

父元素沒有給定高度的前提下，父元素內整體浮動的元素無法撐開父元素，需要清除浮動。

父級上增加屬性overflow：hidden

.parent{
    overflow:hidden;
}

在最后一個子元素的后面加一個空的div，給它樣式屬性 clear:both（不推薦）

    12
    12
    12
    12
    12
    12
    12
    12
    

使用成熟的清浮動樣式類，clearfix

.clearfix:after{
    content:"";
    display:table;
    clear:both;
}

效果上的不同：opacity方案，子元素文字內容同時透明；rgba方案，子元素內容不透明

#lamp{
    width: 400px;
    height: 40px;
    background: #ff0000;
}
#lamp:hover{
    animation: rotate 2s;
    -webkit-animation: rotate 2s; /* Safari and Chrome */
}
@keyframes rotate
{
    from {transform: rotate(0deg);}
    to {transform: rotate(180deg);}
}
@-webkit-keyframes rotate /* Safari and Chrome */
{
    from {transform: rotate(0deg);}
    to {transform: rotate(180deg);}
}

在網頁中，一個元素占有空間的大小由幾個部分構成，其中包括元素的內容（content），元素的內邊距（padding），元素的邊框（border），元素的外邊距（margin）四個部分。
這四個部分占有的空間中，有的部分可以顯示相應的內容，而有的部分只用來分隔相鄰的區域或區域。4個部分一起構成了css中元素的盒模型。

行內元素：a、b、span、img、input、strong、select、label、em、button、textarea

塊級元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote

空元素：即系沒有內容的HTML元素，例如：br、meta、hr、link、input、img

實現方法有很多種，以下是其中一種實現：

//HTML結構：

     



//CSS：
.wrapper {
    position: relative;
    width: 500px;
    height: 500px;
    border: 1px solid red; 
 }
.content{
    position: absolute;
    width: 200px;
    height: 200px;
    /*top、bottom、left和right 均設置為0*/
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    /*margin設置為auto*/
    margin:auto;
    border: 1px solid green;    
} 

href標識超文本引用，用在link和a等元素上，href是引用和頁面關聯，是在當前元素和引用資源之間建立聯系

src表示引用資源，表示替換當前元素，用在img，script，iframe上，src是頁面內容不可缺少的一部分。

補充：link和@import的區別

兩者都是外部引用CSS的方式，但是存在一定的區別：

區別1：link是XHTML標簽，除了加載CSS外，還可以定義RSS等其他事務；@import屬于CSS范疇，只能加載CSS。

區別2：link引用CSS時，在頁面載入時同時加載；@import需要頁面網頁完全載入以后加載。

區別3：link是XHTML標簽，無兼容問題；@import是在CSS2.1提出的，低版本的瀏覽器不支持。

區別4：ink支持使用Javascript控制DOM去改變樣式；而@import不支持。

漸進增強 progressive enhancement：
針對低版本瀏覽器進行構建頁面，保證最基本的功能，然后再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。

優雅降級 graceful degradation：
一開始就構建完整的功能，然后再針對低版本瀏覽器進行兼容。

區別：

a. 優雅降級是從復雜的現狀開始，并試圖減少用戶體驗的供給

b. 漸進增強則是從一個非?；A的，能夠起作用的版本開始，并不斷擴充，以適應未來環境的需要

c. 降級（功能衰減）意味著往回看；而漸進增強則意味著朝前看，同時保證其根基處于安全地帶

當圖片不輸出信息的時候，會顯示alt信息，鼠標放上去沒有信息，當圖片正常讀取，不會出現alt信息

當圖片不輸出信息的時候，會顯示alt信息 鼠標放上去會出現title信息
當圖片正常輸出的時候，不會出現alt信息，鼠標放上去會出現title信息

title屬性可以用在除了base，basefont，head，html，meta，param，script和title之外的所有標簽

title屬性的功能是提示。額外的說明信息和非本質的信息請使用title屬性。title屬性值可以比alt屬性值設置的更長

title屬性有一個很好的用途，即為鏈接添加描述性文字，特別是當連接本身并不是十分清楚的表達了鏈接的目的。

當不對doctype進行定義時，會觸發怪異模式。

在標準模式下，一個塊的總寬度= width + margin(左右) + padding(左右) + border(左右)

在怪異模式下，一個塊的總寬度= width + margin(左右)（即width已經包含了padding和border值）
CSS3的box-sizing
當設置為box-sizing:content-box時，將采用標準模式解析計算，也是默認模式；
當設置為box-sizing:border-box時，將采用怪異模式解析計算；

分為邊框、背景，漸變，陰影、2D轉換 3D轉換、過渡、動畫、彈性盒子等。

比如：邊框(border-radius、border-shadow、border-image)之類的 。

一般來說是針對不同的瀏覽器寫不同的CSS,就是 CSS Hack。

IE瀏覽器Hack一般又分為三種，條件Hack、屬性級Hack、選擇符Hack（詳細參考CSS文檔：css文檔）。例如：

// 1、條件Hack

// 2、屬性Hack
.test{
    color:#0909; /* For IE8+ */
    *color:#f00;  /* For IE7 and earlier */
    _color:#ff0;  /* For IE6 and earlier */
}
// 3、選擇符Hack
* html .test{color:#090;}       /* For IE6 and earlier */
* + html .test{color:#ff0;}     /* For IE7 */

百分比布局+媒體查詢

同向margin的重疊：
在最外層的div中加入overflow:hidden;zoom:1
在最外層加入padding:1px;屬性
在最外層加入：border:1px solid #cacbcc;

異向重疊問題：
float:left（只能解決IE6瀏覽器中的異向重疊問題，可以解決IE8以上、chorme、firefox、opera下的同向重疊問題）

absolute 生成絕對定位的元素，相對于static定位以外的第一個父元素進行定位。

fixed 生成絕對定位的元素，相對于瀏覽器窗口進行定位。

relative 生成相對定位的元素，相對于其正常位置進行定位。因此，"left:20" 會向元素的 left位置添加 20 像素。

static 默認值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。

inherit 規定應該從父元素繼承 position 屬性的值。

渲染的流程如下：
1.解析HTML文件，創建DOM樹。自上而下，遇到任何樣式（link、style）與腳本（script）都會阻塞（外部樣式不阻塞后續外部腳本的加載）。
2.解析CSS。優先級：瀏覽器默認設置<用戶設置<外部樣式<內聯樣式3.將CSS與DOM合并，構建渲染樹（Render Tree）;
4.布局和繪制，重繪（repaint）和重排（reflow）;

標簽提供關于 HTML 文檔的元數據。它不會顯示在頁面上，但是對于機器是可讀的。
可用于瀏覽器（如何顯示內容或重新加載頁面），搜索引擎（關鍵詞），或其他 web 服務。
還有一個用途是可以添加服務器發送到瀏覽器的http頭部內容

新的語義標簽和屬性

表單新特性

視頻和音頻

Canvas繪圖

SVG繪圖

地理定位

拖放API

display:none是徹底消失，不在文檔流中占位，瀏覽器也不會解析該元素；visibility:hidden是視覺上消失了，可以理解為透明度為0的效果，在文檔流中占位，瀏覽器會解析該元素；

使用visibility:hidden性能要好，display:none切換顯示時visibility，頁面產生回流（當頁面中的一部分元素需要改變規模尺寸、布局、顯示隱藏等，頁面重新構建，此時就是回流。所有頁面第一次加載時需要產生一次回流），而visibility切換是否顯示時則不會引起回流。