HTML 語義化

語義化的含義就是用正確的標(biāo)簽做正確的事情，html 語義化就是讓頁面的內(nèi)容結(jié)構(gòu)化，便于對(duì)瀏覽器搜索引擎解析；在沒有CSS樣式情況下也以一種文檔格式顯示，并且是容易閱讀的。搜索引擎的爬蟲依賴于標(biāo)記來確定上下文和各個(gè)關(guān)鍵字的權(quán)重，利于SEO。使閱讀源代碼的人對(duì)網(wǎng)站分塊，便于閱讀維護(hù)理解。

文檔流

文檔流（Normal Flow）就是文檔中正常排列方式。塊級(jí)元素從上到下依次排列，內(nèi)聯(lián)元素從左到右依次排列，寬度不夠就換行。

position 屬性

元素在頁面中的布局遵守一套文檔流的方式，默認(rèn)的定位屬性值為static。

元素如果被定位了，那么它的top,left,bottom,right值就會(huì)生效，能設(shè)置定位的屬性是relative, absolute和fixed。

需要注意的另一點(diǎn)是被定位的元素層次( z-index)會(huì)得到提高。

static

該關(guān)鍵字指定元素使用正常的布局行為，即元素在文檔流中當(dāng)前的布局位置。此時(shí) top, right, bottom, left 和 z-index 屬性無效。

relative

相對(duì)于自己定位，依然占據(jù)文檔流中原有位置，只是發(fā)生了偏移。

absolute

設(shè)置了絕對(duì)定位之后，元素脫離文檔流，相對(duì)于祖先中最近的已定位（position 值不為 static）的元素定位，如果找不到滿足條件的，就相對(duì)于最外面的包含塊 html 元素定位。

fixed

相對(duì)于 viewport 定位，不在文檔流中。

層疊順序

position > inline > float > content > border > background > z-index:-1

CSS 權(quán)重

權(quán)重，也就是選擇器的優(yōu)先級(jí)，每條選擇器的規(guī)則都有其權(quán)重，權(quán)重大的會(huì)覆蓋掉權(quán)重小的。

根據(jù)樣式所在位置，對(duì)元素的影響也有關(guān)系：內(nèi)聯(lián)樣式（標(biāo)簽內(nèi)style形式）> style標(biāo)簽> link標(biāo)簽。

另外一點(diǎn)需要注意的是!improtant,凡是屬性值后加上了!important，那么它的值不會(huì)被其他值替換。

權(quán)重的計(jì)算

權(quán)重記憶口訣從0開始，一個(gè)行內(nèi)樣式+1000，一個(gè)id+100，一個(gè)屬性選擇器/class或者偽類+10，一個(gè)元素名或者偽元素+1。

body #container .content a:hover

最終的權(quán)重是122，#container 是一個(gè) id 選擇器加了100，.content 是一個(gè) class 選擇器加了10，:hover 是一個(gè)偽類選擇器加了10，body和a 是元素選擇器各加了1。