前端基本功（一）-HTML+CSS+JS基礎
小Tips
- 任何一個標準的HTML頁面，第一行一定是一個以DOCTYPE ……開頭的語句。這一行，就是文件宣告頭，DocType Declaration。此標籤可告知瀏覽器文件使用哪種 HTML 或 XHTML 規範。
- 標準的div+css頁面，用的標籤種類很少：div p h1 span a img ul ol dl input
- 一個HTML頁面，不能出現相同的id，哪怕他們不是一個型別。比如頁面上有一個id為pp的p，一個id為pp的div，是非法的！
HTML 超文字標記語言 從語義的角度描述頁面結構。提到HTML的作用，只能從語義方面從想，絕對不能想樣式
CSS 層疊式樣式表 從審美的角度負責頁面樣式。
JS JavaScript 從互動的角度描述頁面行為。
HTML
CSS
CSS 基礎
類選擇器： class可以重複，也就是說，同一個頁面上可能有多個標籤同時屬於某一個類； 同一個標籤可以同時攜帶多個類。
1） 不要去試圖用一個類名，把某個標籤的所有樣式寫完。這個標籤要多攜帶幾個類，共同造成這個標籤的樣式。
2） 每一個類要儘可能小，有“公共”的概念，能夠讓更多的標籤使用。
到底用id還是用class？
答案：儘可能的用class，除非極特殊的情況可以用id。
原因：id是js用的。也就是說，js要通過id屬性得到標籤，所以我們css層面儘量不用id，要不然js就很彆扭。另一層面，我們會認為一個有id的元素，有動態效果。
就是一個標籤，可以同時被多種選擇器選擇，標籤選擇器、id選擇器、類選擇器。這些選擇器都可以選擇上同一個標籤，從而影響樣式，這就是css的cascading“層疊式”的第一層含義。
CSS 高階
後代選擇器，描述的是祖先結構
繼承性是從自己開始，直到最小的元素。
層疊性：
權重問題大總結：
1） 先看有沒有選中，如果選中了，那麼以（id數，類數，標籤數）來計權重。誰大聽誰的。如果都一樣，聽後寫的為準。
2） 如果沒有選中，那麼權重是0。如果大家都是0，就近原則。
塊級元素和行內元素
- 塊級元素
- 霸佔一行，不能與其他任何元素並列
- 能接受寬、高
- 如果不設定寬度，那麼寬度將預設變為父親的100%。
- 行內元素
- 與其他行內元素並排
- 不能設定寬、高。預設的寬度，就是文字的寬度。
在HTML中，我們已經將標籤分過類，當時分為了：文字級、容器級。
文字級：p、span、a、b、i、u、em
容器級：div、h系列、li、dt、dd
CSS的分類和上面的很像，就p不一樣：
所有的文字級標籤，都是行內元素，除了p，p是個文字級，但是是個塊級元素。
所有的容器級標籤都是塊級元素。
css中一共有三種手段，使一個元素脫離標準文件流：
1） 浮動
2） 絕對定位
3） 固定定位
浮動
- 浮動的基本性質
- 浮動的元素脫標
- 一旦一個元素浮動了，那麼，將能夠並排了，並且能夠設定寬高了。無論它原來是個div還是個span。
- 浮動的元素互相貼靠
- 浮動的元素有“字圍”效果
- 收縮
- 一個浮動的元素，如果沒有設定width，那麼將自動收縮為文字的寬度（這點非常像行內元素）。
- 浮動的元素脫標
清除浮動
- 清除浮動方法1：給浮動的元素的祖先元素加高度（ 加高法）。有高度的盒子，才能關注浮動。浮動的元素，只能被有高度的盒子關住。 也就是說，如果盒子內部有浮動，這個盒子有高，那麼妥妥的，浮動不會互相影響。但是，工作上，我們絕對不會給所有的盒子加高度，這是因為麻煩，並且不能適應頁面的快速變化。
- 清除浮動方法2：clear:both。clear就是清除，both指的是左浮動、右浮動都要清除。意思就是：清除別人對我的影響（表示自己的內部元素，不受其他盒子的影響）。這種方法有一個非常大的、致命的問題，margin失效了。
- 清除浮動方法3：隔牆法。在兩部分浮動元素中間，建一個牆。隔開兩部分浮動，讓後面的浮動元素，不去追前面的浮動元素。牆用自己的身體當做了間隙。隔牆法好用，但是第一個div，還是沒有高度。如果我們現在想讓第一個div，自動的根據自己的兒子，撐出高度，我們就要想一些“小伎倆”，“奇淫技巧”。
- 內牆法：浮動的元素不能把父親撐出高。內牆法的優點就是，不僅僅能夠讓後部分的p不去追前部分的p了，並且能把第一個div撐出高度。這樣，這個div的背景、邊框就能夠根據p的高度來撐開了
- 清除浮動方法4：overflow:hidden。所有溢位邊框的內容，都要隱藏掉。
- 一個父親不能被自己浮動的兒子，撐出高度。但是，只要給父親加上overflow:hidden; 那麼，父親就能被兒子撐出高了。這是一個偏方。
- 這個屬性的本意，就是將所有溢位盒子的內容，隱藏掉。但是，我們發現這個東西能夠用於浮動的清除。我們知道，一個父親，不能被自己浮動的兒子撐出高度，但是，如果這個父親加上了overflow:hidden；那麼這個父親就能夠被浮動的兒子撐出高度了。這個現象，不能解釋，就是瀏覽器的小偏方。並且,overflow:hidden;能夠讓margin生效。
盒子居中
- margin:0 auto;margin的值可以為auto，表示自動。當left、right兩個方向，都是auto的時候，盒子居中了
1 margin-left: auto;
2 margin-right: auto; //這兩句簡寫未 margin:0 auto;注意：
1） 使用margin:0 auto; 的盒子，必須有width，有明確的width
2） 只有標準流的盒子，才能使用margin:0 auto; 居中。
也就是說，當一個盒子浮動了、絕對定位了、固定定位了，都不能使用margin:0 auto;
3） margin:0 auto;是在居中盒子，不是居中文字。
文字的居中，要使用 text-align:center;
4) margin這個屬性，本質上描述的是兄弟和兄弟之間的距離； 最好不要用這個marign表達父子之間的距離。
所以，我們一定要善於使用父親的padding，而不是兒子的margin。
定位
以盒子為參考點：
子絕父絕、子絕父相、子絕父固，都是可以給兒子定位的。但是，工程上子絕、父絕，沒有一個盒子在標準流裡面了，所以頁面就不穩固，沒有任何實戰用途。工程上，“子絕父相”有意義，父親沒有脫標，兒子脫標在父親的範圍裡面移動。
