今天下班在地鐵上看了一個樣式教學視訊，因為最近在學習前端。以前剛畢業的時候，感覺後臺才是王道，但最近發現，前端也很重要，比如：自己接一些私單做的時候，自己要根據需求做好介面，才能更加符合客戶需求，不然還得找人去做；不同的是，後臺的就可以放心找人做，只要測試得沒問題，效率還過得去就可以了，所以最近打算學好點前端，自己接一些單子來做。廢話不多說，入正題：

　　html是按照檔案流（普通流）的方式載入的，但是全部是普通流的話，很多好看的樣式是實現不了的，所以出現了浮動，相對定位，絕對定位的概念。

　　一、首先，按照普通流和非普通流來分類：

　　　　①普通流：就是按照上下左右的順序一行一行排列的，長度不夠就會自動擠到下一行。

　　　　②非普通流：顧名思義就是脫離普通流的，在普通流上面是不佔據位置的。css有position的樣式，position包括：static，relative，absolute，fixed四種值。其中static是屬於普通流；relative也是屬於特殊的普通流，詳細下面有介紹；absolute和fixed以及float就是屬於非普通流的，載入的時候，也會順序載入，但是會脫離普通流的位置。

　　二、分別介紹static,relative,absolute,fixed和float（通過top,left,right,bottom來設定相對定位）

　　　　①static：就是預設的普通流，不手動設定position樣式的話，預設就是static；

　　　　②relative：叫相對定位，指的是相對他自己原來的位置的相對位置，並且原來的位置還是佔著的（所以說屬於特殊的普通流），其他的元素不會填上去，但是設定好相對位置之後，他新的位置是不會擠壓其他元素的，就像把該元素從原來的位置上摳出來，放在單獨一層來佈局。

　　　　③absolute:叫絕對定位，指的是①相對其父元素位置的絕對定位，但是他屬於非普通流，②原來的位置是不會佔著的，是單獨的一層，脫離了普通流。除了以上兩點，其他的和relative差不多。

　　　　④fixed：叫固定定位，指的是元素相對於瀏覽器視窗的定位（比如一些網站兩邊的廣告），拉動滾動條，他也不會跟著動，也是屬於非普通流，其他的跟relative差不多。

　　　　⑤float：叫浮動，是css單獨的樣式，有top，right，bottom，left四種常用值，以上四個是屬於position的一種；float也是屬於普通流，單會改變普通流。他只能和普通流在同一層，但是可以改變元素的位置，同樣是佔著位置的（和relative有點像），不會單獨一層（而relative，absolute，fixed會單獨一層，可以設定z-index屬性來改變其前後位置）。使用float之後，元素則會脫離普通流，該元素則在普通流上不再佔用位置，普通流的元素則會填補上去，這樣如果不去設定的話則會出現重疊覆蓋的情況；如果想使用了float的元素也佔著普通流上的位置，該如何辦呢？這時候，可以把應用了float樣式的元素緊接著的元素應用clear樣式，clear樣式包括：both，right，left三個值。both表示right和left的float都清除掉，另外兩個同理。這樣子則可以清除在此之前的非普通流，讓他們也佔著普通流上的位置，但是這只是佔著位置，其實該元素是不存在於該位置的，該位置不存在任何元素（詳細自己google理解），但是這樣子的話，緊接著的那個元素想設定margin等，是會出現問題的，因為應用了float樣式的元素霸佔的那個位置其實是什麼東西也沒有的，不存在邊界，所以應用margin則不會以那個元素（應用了float的那個）為邊界的，會跳過那個邊界來計算，當然你也可以把margin設大點（也就是加上float元素的長度或者寬度）也可以達到效果。其實，可以在float後面的元素之前，單獨加個

　　三、z-index作用

　　　　可以用來處理非普通流元素的前後位置，z-index越大，元素就在越前面(同時存在普通流和非普通流的時候才有意義）。

　　四、塊元素和行內元素一些差別

　　　　①塊元素才有width,height屬性，而行內元素沒有；

　　　　②每個塊元素預設自動佔一行，而行內預設會擠滿一行才會繼續下一行；

　　　　③行內元素在css加上“display：block”則可以使該元素變成塊元素；

　　　　……