小Tips

• 任何一個(gè)標(biāo)準(zhǔn)的HTML頁(yè)面，第一行一定是一個(gè)以DOCTYPE ……開(kāi)頭的語(yǔ)句。這一行，就是文檔聲明頭，DocType Declaration。此標(biāo)簽可告知瀏覽器文檔使用哪種 HTML 或 XHTML 規(guī)范。
• 標(biāo)準(zhǔn)的div+css頁(yè)面，用的標(biāo)簽種類很少：div p h1 span a img ul ol dl input
• 一個(gè)HTML頁(yè)面，不能出現(xiàn)相同的id，哪怕他們不是一個(gè)類型。比如頁(yè)面上有一個(gè)id為pp的p，一個(gè)id為pp的div，是非法的！

HTML 超文本標(biāo)記語(yǔ)言 從語(yǔ)義的角度描述頁(yè)面結(jié)構(gòu)。提到HTML的作用，只能從語(yǔ)義方面從想，絕對(duì)不能想樣式
CSS 層疊式樣式表 從審美的角度負(fù)責(zé)頁(yè)面樣式。
JS JavaScript 從交互的角度描述頁(yè)面行為。

HTML

CSS

CSS 基礎(chǔ)

類選擇器： class可以重復(fù)，也就是說(shuō)，同一個(gè)頁(yè)面上可能有多個(gè)標(biāo)簽同時(shí)屬于某一個(gè)類； 同一個(gè)標(biāo)簽可以同時(shí)攜帶多個(gè)類。
1） 不要去試圖用一個(gè)類名，把某個(gè)標(biāo)簽的所有樣式寫(xiě)完。這個(gè)標(biāo)簽要多攜帶幾個(gè)類，共同造成這個(gè)標(biāo)簽的樣式。
2） 每一個(gè)類要盡可能小，有“公共”的概念，能夠讓更多的標(biāo)簽使用。

到底用id還是用class？
答案：盡可能的用class，除非極特殊的情況可以用id。
原因：id是js用的。也就是說(shuō)，js要通過(guò)id屬性得到標(biāo)簽，所以我們css層面盡量不用id，要不然js就很別扭。另一層面，我們會(huì)認(rèn)為一個(gè)有id的元素，有動(dòng)態(tài)效果。

就是一個(gè)標(biāo)簽，可以同時(shí)被多種選擇器選擇，標(biāo)簽選擇器、id選擇器、類選擇器。這些選擇器都可以選擇上同一個(gè)標(biāo)簽，從而影響樣式，這就是css的cascading“層疊式”的第一層含義。

CSS 高級(jí)

后代選擇器，描述的是祖先結(jié)構(gòu)

繼承性是從自己開(kāi)始，直到最小的元素。

層疊性：
權(quán)重問(wèn)題大總結(jié)：
1） 先看有沒(méi)有選中，如果選中了，那么以（id數(shù)，類數(shù)，標(biāo)簽數(shù)）來(lái)計(jì)權(quán)重。誰(shuí)大聽(tīng)誰(shuí)的。如果都一樣，聽(tīng)后寫(xiě)的為準(zhǔn)。
2） 如果沒(méi)有選中，那么權(quán)重是0。如果大家都是0，就近原則。

塊級(jí)元素和行內(nèi)元素

• 塊級(jí)元素
  
  • 霸占一行，不能與其他任何元素并列
  • 能接受寬、高
  • 如果不設(shè)置寬度，那么寬度將默認(rèn)變?yōu)楦赣H的100%。
• 行內(nèi)元素
  
  • 與其他行內(nèi)元素并排
  • 不能設(shè)置寬、高。默認(rèn)的寬度，就是文字的寬度。

在HTML中，我們已經(jīng)將標(biāo)簽分過(guò)類，當(dāng)時(shí)分為了：文本級(jí)、容器級(jí)。
文本級(jí)：p、span、a、b、i、u、em
容器級(jí)：div、h系列、li、dt、dd

CSS的分類和上面的很像，就p不一樣：
所有的文本級(jí)標(biāo)簽，都是行內(nèi)元素，除了p，p是個(gè)文本級(jí)，但是是個(gè)塊級(jí)元素。
所有的容器級(jí)標(biāo)簽都是塊級(jí)元素。

css中一共有三種手段，使一個(gè)元素脫離標(biāo)準(zhǔn)文檔流：
1） 浮動(dòng)
2） 絕對(duì)定位
3） 固定定位

浮動(dòng)

• 浮動(dòng)的基本性質(zhì)
  
  • 浮動(dòng)的元素脫標(biāo)
    
    • 一旦一個(gè)元素浮動(dòng)了，那么，將能夠并排了，并且能夠設(shè)置寬高了。無(wú)論它原來(lái)是個(gè)div還是個(gè)span。
  • 浮動(dòng)的元素互相貼靠
  • 浮動(dòng)的元素有“字圍”效果
  • 收縮
    
    • 一個(gè)浮動(dòng)的元素，如果沒(méi)有設(shè)置width，那么將自動(dòng)收縮為文字的寬度（這點(diǎn)非常像行內(nèi)元素）。

• 清除浮動(dòng)

  • 清除浮動(dòng)方法1：給浮動(dòng)的元素的祖先元素加高度（ 加高法）。有高度的盒子，才能關(guān)注浮動(dòng)。浮動(dòng)的元素，只能被有高度的盒子關(guān)住。 也就是說(shuō)，如果盒子內(nèi)部有浮動(dòng)，這個(gè)盒子有高，那么妥妥的，浮動(dòng)不會(huì)互相影響。但是，工作上，我們絕對(duì)不會(huì)給所有的盒子加高度，這是因?yàn)槁闊?，并且不能適應(yīng)頁(yè)面的快速變化。
  • 清除浮動(dòng)方法2：clear:both。clear就是清除，both指的是左浮動(dòng)、右浮動(dòng)都要清除。意思就是：清除別人對(duì)我的影響（表示自己的內(nèi)部元素，不受其他盒子的影響）。這種方法有一個(gè)非常大的、致命的問(wèn)題，margin失效了。
  • 清除浮動(dòng)方法3：隔墻法。在兩部分浮動(dòng)元素中間，建一個(gè)墻。隔開(kāi)兩部分浮動(dòng)，讓后面的浮動(dòng)元素，不去追前面的浮動(dòng)元素。墻用自己的身體當(dāng)做了間隙。隔墻法好用，但是第一個(gè)div，還是沒(méi)有高度。如果我們現(xiàn)在想讓第一個(gè)div，自動(dòng)的根據(jù)自己的兒子，撐出高度，我們就要想一些“小伎倆”，“奇淫技巧”。
    
    • 內(nèi)墻法：浮動(dòng)的元素不能把父親撐出高。內(nèi)墻法的優(yōu)點(diǎn)就是，不僅僅能夠讓后部分的p不去追前部分的p了，并且能把第一個(gè)div撐出高度。這樣，這個(gè)div的背景、邊框就能夠根據(jù)p的高度來(lái)?yè)伍_(kāi)了
  • 清除浮動(dòng)方法4：overflow:hidden。所有溢出邊框的內(nèi)容，都要隱藏掉。
    
    • 一個(gè)父親不能被自己浮動(dòng)的兒子，撐出高度。但是，只要給父親加上overflow:hidden; 那么，父親就能被兒子撐出高了。這是一個(gè)偏方。
    • 這個(gè)屬性的本意，就是將所有溢出盒子的內(nèi)容，隱藏掉。但是，我們發(fā)現(xiàn)這個(gè)東西能夠用于浮動(dòng)的清除。我們知道，一個(gè)父親，不能被自己浮動(dòng)的兒子撐出高度，但是，如果這個(gè)父親加上了overflow:hidden；那么這個(gè)父親就能夠被浮動(dòng)的兒子撐出高度了。這個(gè)現(xiàn)象，不能解釋，就是瀏覽器的小偏方。并且,overflow:hidden;能夠讓margin生效。

• 盒子居中

  • margin:0 auto;margin的值可以為auto，表示自動(dòng)。當(dāng)left、right兩個(gè)方向，都是auto的時(shí)候，盒子居中了

1   margin-left: auto;
2   margin-right: auto;  //這兩句簡(jiǎn)寫(xiě)未 margin:0 auto;

注意：
1） 使用margin:0 auto; 的盒子，必須有width，有明確的width
2） 只有標(biāo)準(zhǔn)流的盒子，才能使用margin:0 auto; 居中。
也就是說(shuō)，當(dāng)一個(gè)盒子浮動(dòng)了、絕對(duì)定位了、固定定位了，都不能使用margin:0 auto;
3） margin:0 auto;是在居中盒子，不是居中文本。
文本的居中，要使用 text-align:center;
4) margin這個(gè)屬性，本質(zhì)上描述的是兄弟和兄弟之間的距離； 最好不要用這個(gè)marign表達(dá)父子之間的距離。
所以，我們一定要善于使用父親的padding，而不是兒子的margin。

定位

以盒子為參考點(diǎn)：
子絕父絕、子絕父相、子絕父固，都是可以給兒子定位的。但是，工程上子絕、父絕，沒(méi)有一個(gè)盒子在標(biāo)準(zhǔn)流里面了，所以頁(yè)面就不穩(wěn)固，沒(méi)有任何實(shí)戰(zhàn)用途。工程上，“子絕父相”有意義，父親沒(méi)有脫標(biāo)，兒子脫標(biāo)在父親的范圍里面移動(dòng)。