今天下班在地鐵上看了一個樣式教學視頻，因為最近在學習前端。以前剛畢業的時候，感覺后台才是王道，但最近發現，前端也很重要，比如：自己接一些私單做的時候，自己要根據需求做好界面，才能更加符合客戶需求，不然還得找人去做；不同的是，后台的就可以放心找人做，只要測試得沒問題，效率還過得去就可以了，所以最近打算學好點前端，自己接一些單子來做。廢話不多說，入正題：
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后面的元素之前，單獨加個 <div style="clear:both"> 清楚元素來專門用於清除浮動即可，接下來的元素應用margin則可以正常起效（補充：其實一般來說，可以在樣式表里面單獨設置 .clear{clear：both;} 這樣的樣式來專門用於清除浮動，避免重復，代碼會規優雅規范很多）。
三、z-index作用
可以用來處理非普通流元素的前后位置，z-index越大，元素就在越前面(同時存在普通流和非普通流的時候才有意義）。
四、塊元素和行內元素一些差別
①塊元素才有width,height屬性，而行內元素沒有；
②每個塊元素默認自動占一行，而行內默認會擠滿一行才會繼續下一行；
③行內元素在css加上“display：block”則可以使該元素變成塊元素；
……