摘要：什么叫優(yōu)雅降級(jí)和漸進(jìn)增強(qiáng)漸進(jìn)增強(qiáng)針對(duì)低版本瀏覽器進(jìn)行構(gòu)建頁(yè)面，保證最基本的功能，然后再針對(duì)高級(jí)瀏覽器進(jìn)行效果交互等改進(jìn)和追加功能達(dá)到更好的用戶體驗(yàn)。優(yōu)雅降級(jí)一開(kāi)始就構(gòu)建完整的功能，然后再針對(duì)低版本瀏覽器進(jìn)行兼容。

選擇器類(lèi)型：

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

選擇器優(yōu)先級(jí)：就近原則，同權(quán)重情況下樣式定義最近者為準(zhǔn);載入樣式以最后載入的定位為準(zhǔn);

優(yōu)先級(jí)為:!important > id > class > tag，同時(shí)important 比內(nèi)聯(lián)優(yōu)先級(jí)高

權(quán)重的規(guī)則：標(biāo)簽的權(quán)重為1，class的權(quán)重為10，id的權(quán)重為100；如果權(quán)重相同，則最后定義的樣式會(huì)起作用

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

em：相對(duì)單位，相對(duì)于父元素的字體大小，如果當(dāng)前對(duì)象沒(méi)有設(shè)置字體尺寸，則相對(duì)于瀏覽器默認(rèn)字號(hào)，em的值不固定，并且em會(huì)繼承父級(jí)元素的字體大??；

rem：相對(duì)單位，相對(duì)于HTML根元素的字體大??；

瀏覽器的默認(rèn)字體高都是16px。所以未經(jīng)調(diào)整的瀏覽器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。

浮動(dòng)

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

瀏覽器內(nèi)核：IE-Trident，F(xiàn)irefox-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;
} 

父元素沒(méi)有給定高度的前提下，父元素內(nèi)整體浮動(dòng)的元素?zé)o法撐開(kāi)父元素，需要清除浮動(dòng)。

父級(jí)上增加屬性overflow：hidden

.parent{
    overflow:hidden;
}

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

    12
    12
    12
    12
    12
    12
    12
    12
    

使用成熟的清浮動(dòng)樣式類(lèi)，clearfix

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

效果上的不同：opacity方案，子元素文字內(nèi)容同時(shí)透明；rgba方案，子元素內(nèi)容不透明

#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);}
}

在網(wǎng)頁(yè)中，一個(gè)元素占有空間的大小由幾個(gè)部分構(gòu)成，其中包括元素的內(nèi)容（content），元素的內(nèi)邊距（padding），元素的邊框（border），元素的外邊距（margin）四個(gè)部分。
這四個(gè)部分占有的空間中，有的部分可以顯示相應(yīng)的內(nèi)容，而有的部分只用來(lái)分隔相鄰的區(qū)域或區(qū)域。4個(gè)部分一起構(gòu)成了css中元素的盒模型。

行內(nèi)元素：a、b、span、img、input、strong、select、label、em、button、textarea

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

空元素：即系沒(méi)有內(nèi)容的HTML元素，例如：br、meta、hr、link、input、img

實(shí)現(xiàn)方法有很多種，以下是其中一種實(shí)現(xiàn)：

//HTML結(jié)構(gòu)：

     



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

href標(biāo)識(shí)超文本引用，用在link和a等元素上，href是引用和頁(yè)面關(guān)聯(lián)，是在當(dāng)前元素和引用資源之間建立聯(lián)系

src表示引用資源，表示替換當(dāng)前元素，用在img，script，iframe上，src是頁(yè)面內(nèi)容不可缺少的一部分。

補(bǔ)充：link和@import的區(qū)別

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

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

區(qū)別2：link引用CSS時(shí)，在頁(yè)面載入時(shí)同時(shí)加載；@import需要頁(yè)面網(wǎng)頁(yè)完全載入以后加載。

區(qū)別3：link是XHTML標(biāo)簽，無(wú)兼容問(wèn)題；@import是在CSS2.1提出的，低版本的瀏覽器不支持。

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

漸進(jìn)增強(qiáng) progressive enhancement：
針對(duì)低版本瀏覽器進(jìn)行構(gòu)建頁(yè)面，保證最基本的功能，然后再針對(duì)高級(jí)瀏覽器進(jìn)行效果、交互等改進(jìn)和追加功能達(dá)到更好的用戶體驗(yàn)。

優(yōu)雅降級(jí) graceful degradation：
一開(kāi)始就構(gòu)建完整的功能，然后再針對(duì)低版本瀏覽器進(jìn)行兼容。

區(qū)別：

a. 優(yōu)雅降級(jí)是從復(fù)雜的現(xiàn)狀開(kāi)始，并試圖減少用戶體驗(yàn)的供給

b. 漸進(jìn)增強(qiáng)則是從一個(gè)非?；A(chǔ)的，能夠起作用的版本開(kāi)始，并不斷擴(kuò)充，以適應(yīng)未來(lái)環(huán)境的需要

c. 降級(jí)（功能衰減）意味著往回看；而漸進(jìn)增強(qiáng)則意味著朝前看，同時(shí)保證其根基處于安全地帶

當(dāng)圖片不輸出信息的時(shí)候，會(huì)顯示alt信息，鼠標(biāo)放上去沒(méi)有信息，當(dāng)圖片正常讀取，不會(huì)出現(xiàn)alt信息

當(dāng)圖片不輸出信息的時(shí)候，會(huì)顯示alt信息 鼠標(biāo)放上去會(huì)出現(xiàn)title信息
當(dāng)圖片正常輸出的時(shí)候，不會(huì)出現(xiàn)alt信息，鼠標(biāo)放上去會(huì)出現(xiàn)title信息

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

title屬性的功能是提示。額外的說(shuō)明信息和非本質(zhì)的信息請(qǐng)使用title屬性。title屬性值可以比alt屬性值設(shè)置的更長(zhǎng)

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

當(dāng)不對(duì)doctype進(jìn)行定義時(shí)，會(huì)觸發(fā)怪異模式。

在標(biāo)準(zhǔn)模式下，一個(gè)塊的總寬度= width + margin(左右) + padding(左右) + border(左右)

在怪異模式下，一個(gè)塊的總寬度= width + margin(左右)（即width已經(jīng)包含了padding和border值）
CSS3的box-sizing
當(dāng)設(shè)置為box-sizing:content-box時(shí)，將采用標(biāo)準(zhǔn)模式解析計(jì)算，也是默認(rèn)模式；
當(dāng)設(shè)置為box-sizing:border-box時(shí)，將采用怪異模式解析計(jì)算；

分為邊框、背景，漸變，陰影、2D轉(zhuǎn)換 3D轉(zhuǎn)換、過(guò)渡、動(dòng)畫(huà)、彈性盒子等。

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

一般來(lái)說(shuō)是針對(duì)不同的瀏覽器寫(xiě)不同的CSS,就是 CSS Hack。

IE瀏覽器Hack一般又分為三種，條件Hack、屬性級(jí)Hack、選擇符Hack（詳細(xì)參考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;

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

absolute 生成絕對(duì)定位的元素，相對(duì)于static定位以外的第一個(gè)父元素進(jìn)行定位。

fixed 生成絕對(duì)定位的元素，相對(duì)于瀏覽器窗口進(jìn)行定位。

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

static 默認(rèn)值。沒(méi)有定位，元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。

inherit 規(guī)定應(yīng)該從父元素繼承 position 屬性的值。

渲染的流程如下：
1.解析HTML文件，創(chuàng)建DOM樹(shù)。自上而下，遇到任何樣式（link、style）與腳本（script）都會(huì)阻塞（外部樣式不阻塞后續(xù)外部腳本的加載）。
2.解析CSS。優(yōu)先級(jí)：瀏覽器默認(rèn)設(shè)置<用戶設(shè)置<外部樣式<內(nèi)聯(lián)樣式3.將CSS與DOM合并，構(gòu)建渲染樹(shù)（Render Tree）;
4.布局和繪制，重繪（repaint）和重排（reflow）;

標(biāo)簽提供關(guān)于 HTML 文檔的元數(shù)據(jù)。它不會(huì)顯示在頁(yè)面上，但是對(duì)于機(jī)器是可讀的。
可用于瀏覽器（如何顯示內(nèi)容或重新加載頁(yè)面），搜索引擎（關(guān)鍵詞），或其他 web 服務(wù)。
還有一個(gè)用途是可以添加服務(wù)器發(fā)送到瀏覽器的http頭部?jī)?nèi)容

新的語(yǔ)義標(biāo)簽和屬性

表單新特性

視頻和音頻

Canvas繪圖

SVG繪圖

地理定位

拖放API

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

使用visibility:hidden性能要好，display:none切換顯示時(shí)visibility，頁(yè)面產(chǎn)生回流（當(dāng)頁(yè)面中的一部分元素需要改變規(guī)模尺寸、布局、顯示隱藏等，頁(yè)面重新構(gòu)建，此時(shí)就是回流。所有頁(yè)面第一次加載時(shí)需要產(chǎn)生一次回流），而visibility切換是否顯示時(shí)則不會(huì)引起回流。