小Tips

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

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

HTML

CSS

CSS 基礎

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

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

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

CSS 高級

后代選擇器，描述的是祖先結構

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

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

塊級元素和行內元素

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

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

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

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

浮動(dòng)

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

• 清除浮動(dòng)

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

• 盒子居中

  • margin:0 auto;margin的值可以為auto，表示自動(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） 只有標準流的盒子，才能使用margin:0 auto; 居中。
也就是說(shuō)，當一個(gè)盒子浮動(dòng)了、絕對定位了、固定定位了，都不能使用margin:0 auto;
3） margin:0 auto;是在居中盒子，不是居中文本。
文本的居中，要使用 text-align:center;
4) margin這個(gè)屬性，本質(zhì)上描述的是兄弟和兄弟之間的距離； 最好不要用這個(gè)marign表達父子之間的距離。
所以，我們一定要善于使用父親的padding，而不是兒子的margin。

定位

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