前言
作為一名后端狗诵竭,也有一個全棧夢话告。前端工程師第一步,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。