前言
作為一名后端狗诵竭，也有一個全棧夢话告。前端工程師第一步，CSS的基礎(chǔ)得打好卵慰。本文僅用于記錄上周學(xué)習(xí)CSS的過程沙郭，文中對于CSS知識點(diǎn)可能存在理解錯誤之處。
CSS基礎(chǔ)
CSS主要知識點(diǎn)集中于盒模型裳朋，布局病线，選擇器等
盒模型
在對html標(biāo)簽有了整體認(rèn)識之后，在了解了文檔流的概念之后鲤嫡，就得了解元素在整個瀏覽器中的展現(xiàn)形式送挑。CSS盒模型如下圖所示：
從內(nèi)到外分別為content、padding暖眼、border让虐、margin，從盒子模型可知罢荡，元素的width和height與padding/border/margin的設(shè)置大小有關(guān)系，padding,margin等都可以分別設(shè)置top对扶、bottom区赵、left、right大小浪南。盒子的整體width笼才、height計(jì)算方式比較簡單。
目前存在兩種不同類型的盒模型络凿，IE盒模型和W3C標(biāo)準(zhǔn)盒模型骡送，區(qū)別在于我們在設(shè)置的width和height包含哪些部分昂羡，從而影響整個盒子的整體高度和寬度的計(jì)算。這篇文章對于兩種盒模型的區(qū)別和計(jì)算方法講得很充分摔踱。區(qū)別在于IE對于設(shè)置的width不僅包含content width虐先，還包含了border和padding。在使用過程中為了統(tǒng)一認(rèn)識派敷，使用box-sizing:border-box比較好蛹批。
上文提到了可以顯式設(shè)置width、height篮愉，目前也存在一些設(shè)置width/height不起作用的元素腐芍。html元素有塊級元素（block-level elements）和行內(nèi)元素(inline elements)等。在文檔流中试躏，塊級元素通常被現(xiàn)實(shí)為獨(dú)立的一塊猪勇，獨(dú)占一行；inline元素則前后不會產(chǎn)生換行颠蕴，一系列inline元素都在一行內(nèi)顯示泣刹，直到該行排滿。
常見的分類有：
常見的塊級元素有 DIV, FORM, TABLE, P, PRE, H1~H6, DL, OL, UL 等裁替。
常見的內(nèi)聯(lián)元素有 SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR 等项玛。
但是我們可以通過設(shè)置元素的display屬性來改變布局級別。常見的display屬性有三種弱判，block襟沮、inline、inline-block昌腰；區(qū)別如下：摘自網(wǎng)絡(luò)
display:block
block元素會獨(dú)占一行开伏，多個block元素會各自新起一行。默認(rèn)情況下遭商，block元素寬度自動填滿其父元素寬度固灵。
block元素可以設(shè)置width,height屬性。塊級元素即使設(shè)置了寬度,仍然是獨(dú)占一行劫流。
block元素可以設(shè)置margin和padding屬性巫玻。
display:inline
inline元素不會獨(dú)占一行，多個相鄰的行內(nèi)元素會排列在同一行里祠汇，直到一行排列不下仍秤，才會新?lián)Q一行，其寬度隨元素的內(nèi)容而變化可很。
inline元素設(shè)置width,height屬性無效诗力。
inline元素的margin和padding屬性，水平方向的padding-left, padding-right, margin-left, margin-right都產(chǎn)生邊距效果我抠；但豎直方向的padding-top, padding-bottom, margin-top, margin-bottom不會產(chǎn)生邊距效果苇本。
display:inline-block
簡單來說就是將對象呈現(xiàn)為inline對象袜茧，但是對象的內(nèi)容作為block對象呈現(xiàn)。之后的內(nèi)聯(lián)對象會被排列在同一行內(nèi)瓣窄。比如我們可以給一個link（a元素）inline-block屬性值笛厦，使其既具有block的寬度高度特性又具有inline的同行特性。
布局
布局算是css非常重要的一塊應(yīng)用吧康栈，常見的網(wǎng)頁設(shè)計(jì)可能會分為頂部導(dǎo)航欄递递，左側(cè)菜單欄，右側(cè)內(nèi)容區(qū)啥么，底部版權(quán)聲明等登舞。布局主要靠兩種屬性，float和postion
float
float有幾個屬性值悬荣，left菠秒、right，none等氯迂，使用float后元素會脫離文檔流践叠，使元素display:block,float不會對其上方的元素產(chǎn)生影響，會對其下方的元素產(chǎn)生影響嚼蚀，可以使用clear:both清除影響禁灼。
float的屬性值有none、left轿曙、right弄捕，有幾個要點(diǎn)：
只有橫向浮動，并沒有縱向浮動导帝。
當(dāng)元素應(yīng)用了float屬性后守谓，將會脫離普通流，其容器（父）元素將得不到脫離普通流的子元素高度您单。
會將元素的display屬性變更為block斋荞。
浮動元素的后一個元素會圍繞著浮動元素（典型運(yùn)用是文字圍繞圖片），與應(yīng)用了position的元素相比浮動元素并不會遮蓋后一個元素虐秦。
浮動元素的前一個元素不會受到任何影響（如果你想讓兩個塊狀元素并排顯示平酿，必須讓兩個塊狀元素都應(yīng)用float）。
position
這篇文章對于position和float講得非常清楚
1悦陋、static：默認(rèn)值染服。沒有定位，元素出現(xiàn)在正常的流中（忽略top,bottom,left,right或者z-index聲明）叨恨。
2、relative：生成相對定位的元素挖垛，通過top,bottom,left,right的設(shè)置相對于其正常位置進(jìn)行定位痒钝”牛可通過z-index進(jìn)行層次分級。
3送矩、absolute：生成絕對定位的元素蚕甥，相對于static定位以外的第一個父元素進(jìn)行定位。元素的位置通過"left","top","right"以及"bottom"屬性進(jìn)行規(guī)定栋荸」交常可通過z-index進(jìn)行層次分級。
4晌块、fixed：生成絕對定位的元素爱沟，相對于瀏覽器窗口進(jìn)行定位。元素的位置通過"left","top","right"以及"bottom"屬性進(jìn)行規(guī)定匆背『羯欤可通過z-index進(jìn)行層次分級。
- fixed這個元素比較重要的一點(diǎn)是參照的對象是瀏覽器窗口钝尸，例如標(biāo)題欄header或者頂部的導(dǎo)航欄啥的可以選擇固定
- fixed與absolute最大的區(qū)別就是fixed參照對象是瀏覽器窗口括享，而absolute的“根元素”是可以被設(shè)置的，默認(rèn)的話是body標(biāo)簽
static與fixed的定位方式較好理解珍促，在此不做分析铃辖。下面對應(yīng)用的較多的relative和absolute進(jìn)行分析
比較重要的一點(diǎn)是:
relative是相對于自身位置進(jìn)行定位，
absolute是相對于static定位以外的第一個父元素進(jìn)行定位猪叙，包括fixed情況娇斩。
總結(jié)
本文對近期的CSS學(xué)習(xí)做個總結(jié)，總結(jié)過程中發(fā)現(xiàn)自己對于position定位還不是特別清楚沐悦，后續(xù)使用過程中得繼續(xù)體會成洗，接下來準(zhǔn)備學(xué)習(xí)下bootstrap和jquery。
