全棧第一步-CSS基礎(chǔ)

前言

作為一名后端狗诵竭,也有一個全棧夢话告。前端工程師第一步,CSS的基礎(chǔ)得打好卵慰。本文僅用于記錄上周學(xué)習(xí)CSS的過程沙郭,文中對于CSS知識點(diǎn)可能存在理解錯誤之處。

CSS基礎(chǔ)

CSS主要知識點(diǎn)集中于盒模型裳朋,布局病线,選擇器等

盒模型

在對html標(biāo)簽有了整體認(rèn)識之后,在了解了文檔流的概念之后鲤嫡,就得了解元素在整個瀏覽器中的展現(xiàn)形式送挑。CSS盒模型如下圖所示:

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。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末藏否,一起剝皮案震驚了整個濱河市瓶殃,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌副签,老刑警劉巖遥椿,帶你破解...
    沈念sama閱讀 216,843評論 6 502
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異淆储,居然都是意外死亡冠场,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,538評論 3 392
  • 文/潘曉璐 我一進(jìn)店門本砰,熙熙樓的掌柜王于貴愁眉苦臉地迎上來碴裙,“玉大人,你說我怎么就攤上這事√蛑辏” “怎么了莺琳?”我有些...
    開封第一講書人閱讀 163,187評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長载慈。 經(jīng)常有香客問我惭等,道長,這世上最難降的妖魔是什么办铡? 我笑而不...
    開封第一講書人閱讀 58,264評論 1 292
  • 正文 為了忘掉前任辞做,我火速辦了婚禮,結(jié)果婚禮上寡具,老公的妹妹穿的比我還像新娘秤茅。我一直安慰自己,他們只是感情好晒杈,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,289評論 6 390
  • 文/花漫 我一把揭開白布嫂伞。 她就那樣靜靜地躺著,像睡著了一般拯钻。 火紅的嫁衣襯著肌膚如雪帖努。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,231評論 1 299
  • 那天粪般,我揣著相機(jī)與錄音拼余,去河邊找鬼。 笑死亩歹,一個胖子當(dāng)著我的面吹牛匙监,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播小作,決...
    沈念sama閱讀 40,116評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼亭姥,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了顾稀?” 一聲冷哼從身側(cè)響起达罗,我...
    開封第一講書人閱讀 38,945評論 0 275
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎静秆,沒想到半個月后粮揉,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,367評論 1 313
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡抚笔,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,581評論 2 333
  • 正文 我和宋清朗相戀三年扶认,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片殊橙。...
    茶點(diǎn)故事閱讀 39,754評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡辐宾,死狀恐怖狱从,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情叠纹,我是刑警寧澤矫夯,帶...
    沈念sama閱讀 35,458評論 5 344
  • 正文 年R本政府宣布,位于F島的核電站吊洼,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏制肮。R本人自食惡果不足惜冒窍,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,068評論 3 327
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望豺鼻。 院中可真熱鬧综液,春花似錦、人聲如沸儒飒。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,692評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽桩了。三九已至附帽,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間井誉,已是汗流浹背蕉扮。 一陣腳步聲響...
    開封第一講書人閱讀 32,842評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留颗圣,地道東北人喳钟。 一個月前我還...
    沈念sama閱讀 47,797評論 2 369
  • 正文 我出身青樓,卻偏偏與公主長得像在岂,于是被迫代替她去往敵國和親奔则。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,654評論 2 354

推薦閱讀更多精彩內(nèi)容