前言
作為一名後端狗，也有一個全棧夢。前端工程師第一步，CSS的基礎得打好。本文僅用于記錄上周學習CSS的過程，文中對于CSS知識點可能存在了解錯誤之處。
CSS基礎
CSS主要知識點集中于盒模型，布局，選擇器等
盒模型
在對html标簽有了整體認識之後，在了解了文檔流的概念之後，就得了解元素在整個浏覽器中的展現形式。CSS盒模型如下圖所示：
css盒模型
從内到外分别為content、padding、border、margin，從盒子模型可知，元素的width和height與padding/border/margin的設定大小有關系，padding,margin等都可以分别設定top、bottom、left、right大小。盒子的整體width、height計算方式比較簡單。
目前存在兩種不同類型的盒模型，IE盒模型和W3C标準盒模型，差別在于我們在設定的width和height包含哪些部分，進而影響整個盒子的整體高度和寬度的計算。這篇文章對于兩種盒模型的差別和計算方法講得很充分。差別在于IE對于設定的width不僅包含content width，還包含了border和padding。在使用過程中為了統一認識，使用box-sizing:border-box比較好。
上文提到了可以顯式設定width、height，目前也存在一些設定width/height不起作用的元素。html元素有塊級元素（block-level elements）和行内元素(inline elements)等。在文檔流中，塊級元素通常被現實為獨立的一塊，獨占一行；inline元素則前後不會産生換行，一系列inline元素都在一行内顯示，直到該行排滿。
常見的分類有：
常見的塊級元素有 DIV, FORM, TABLE, P, PRE, H1~H6, DL, OL, UL 等。
常見的内聯元素有 SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR 等。
但是我們可以通過設定元素的display屬性來改變布局級别。常見的display屬性有三種，block、inline、inline-block；差別如下：摘自網絡
display:block
block元素會獨占一行，多個block元素會各自新起一行。預設情況下，block元素寬度自動填滿其父元素寬度。
block元素可以設定width,height屬性。塊級元素即使設定了寬度,仍然是獨占一行。
block元素可以設定margin和padding屬性。
display:inline
inline元素不會獨占一行，多個相鄰的行内元素會排列在同一行裡，直到一行排列不下，才會新換一行，其寬度随元素的内容而變化。
inline元素設定width,height屬性無效。
inline元素的margin和padding屬性，水準方向的padding-left, padding-right, margin-left, margin-right都産生邊距效果；但豎直方向的padding-top, padding-bottom, margin-top, margin-bottom不會産生邊距效果。
display:inline-block
簡單來說就是将對象呈現為inline對象，但是對象的内容作為block對象呈現。之後的内聯對象會被排列在同一行内。比如我們可以給一個link（a元素）inline-block屬性值，使其既具有block的寬度高度特性又具有inline的同行特性。
布局
布局算是css非常重要的一塊應用吧，常見的網頁設計可能會分為頂部導航欄，左側菜單欄，右側内容區，底部版權聲明等。布局主要靠兩種屬性，float和postion
float
float有幾個屬性值，left、right，none等，使用float後元素會脫離文檔流，使元素display:block,float不會對其上方的元素産生影響，會對其下方的元素産生影響，可以使用clear:both清除影響。
float的屬性值有none、left、right，有幾個要點：
隻有橫向浮動，并沒有縱向浮動。
當元素應用了float屬性後，将會脫離普通流，其容器（父）元素将得不到脫離普通流的子元素高度。
會将元素的display屬性變更為block。
浮動元素的後一個元素會圍繞着浮動元素（典型運用是文字圍繞圖檔），與應用了position的元素相比浮動元素并不會遮蓋後一個元素。
浮動元素的前一個元素不會受到任何影響（如果你想讓兩個塊狀元素并排顯示，必須讓兩個塊狀元素都應用float）。
position
這篇文章對于position和float講得非常清楚
1、static：預設值。沒有定位，元素出現在正常的流中（忽略top,bottom,left,right或者z-index聲明）。
2、relative：生成相對定位的元素，通過top,bottom,left,right的設定相對于其正常位置進行定位。可通過z-index進行層次分級。
3、absolute：生成絕對定位的元素，相對于static定位以外的第一個父元素進行定位。元素的位置通過"left","top","right"以及"bottom"屬性進行規定。可通過z-index進行層次分級。
4、fixed：生成絕對定位的元素，相對于浏覽器視窗進行定位。元素的位置通過"left","top","right"以及"bottom"屬性進行規定。可通過z-index進行層次分級。
- fixed這個元素比較重要的一點是參照的對象是浏覽器視窗，例如标題欄header或者頂部的導航欄啥的可以選擇固定
- fixed與absolute最大的差別就是fixed參照對象是浏覽器視窗，而absolute的“根元素”是可以被設定的，預設的話是body标簽
static與fixed的定位方式較好了解，在此不做分析。下面對應用的較多的relative和absolute進行分析
比較重要的一點是:
relative是相對于自身位置進行定位，
absolute是相對于static定位以外的第一個父元素進行定位，包括fixed情況。
總結
本文對近期的CSS學習做個總結，總結過程中發現自己對于position定位還不是特别清楚，後續使用過程中得繼續體會，接下來準備學習下bootstrap和jquery。