千鋒教育-做有情懷、有良心、有品質(zhì)的職業(yè)教育機(jī)構(gòu)
關(guān)注千鋒學(xué)習(xí)站小程序
隨時(shí)隨地免費(fèi)學(xué)習(xí)課程
來(lái)到千鋒學(xué)習(xí)前端已經(jīng)一個(gè)月了,一階段的課程也告一段落。在這一階段我們先了解了常見(jiàn)的元素及其使用方法,隨后學(xué)習(xí)了position屬性和彈性布局,下面我簡(jiǎn)單分享一下自己的收獲以及對(duì)知識(shí)的理解。
常見(jiàn)的元素及其使用方法,主要講的是網(wǎng)頁(yè)布局結(jié)構(gòu),如何去快速正確的把網(wǎng)頁(yè)給展現(xiàn)出來(lái)。學(xué)習(xí)過(guò)程中我感覺(jué)很多東西都不會(huì)正確使用,總是容易把各個(gè)元素或者屬性用錯(cuò)地方導(dǎo)致出現(xiàn)問(wèn)題,特別是對(duì)于浮動(dòng)屬性。對(duì)于float真的是印象深刻,因?yàn)樽铋_(kāi)始并不知道用在哪里,所以對(duì)于float這個(gè)屬性如何用是在學(xué)習(xí)了float之后的一星期之后了,這一周就是自己不斷的探索試驗(yàn)的過(guò)程。
記得一次我給一個(gè)div添加了float:left;然后在div里面添加的內(nèi)容總是在向著左邊靠攏,那時(shí)候不懂真的是找了半個(gè)小時(shí)還沒(méi)找出來(lái)這個(gè)錯(cuò)誤,問(wèn)了同學(xué)才知道是給div這個(gè)大盒子添加了左浮動(dòng),之后遇到了很多次這種情況就是在我自己糊里糊涂的探索中才慢慢的把這個(gè)float換過(guò)來(lái)?yè)Q過(guò)去才得以解決。在之后的學(xué)習(xí)中還是經(jīng)常受到float的阻撓,歸根到底是因?yàn)樽约簩?duì)于網(wǎng)頁(yè)布局結(jié)構(gòu)理解的不夠清晰所導(dǎo)致的,在沒(méi)領(lǐng)悟的日子里真的是備受煎熬。
position有四個(gè)屬性值,static、absolute、relative和fixd。對(duì)于這幾個(gè)定位屬性的運(yùn)用方法我是這樣理解的:第一個(gè)值static是默認(rèn)值對(duì)于全局并沒(méi)有什莫影響的;而absolute是讓元素完全脫離文檔流,相對(duì)于定位的父元素的位置發(fā)生偏移,若父元素沒(méi)有定位則是相對(duì)于整個(gè)文檔發(fā)生改變;relative不影響元素本身的特性,不使元素脫離文檔流,并且如果沒(méi)有定位偏移量,對(duì)元素本身沒(méi)有任何影響;而fixed與絕對(duì)定位的特性基本一致,的差別是始終相對(duì)整個(gè)文檔進(jìn)行定位。完全了解position之后對(duì)于我的幫助真的很大,并不會(huì)像之前一樣到處用float而產(chǎn)生錯(cuò)誤了。
彈性布局{display:flex}中flex布局默認(rèn)存在兩根軸:水平的主軸和垂直交叉軸;其中的flex-decoration決定了主軸的方向,主要常用的是row(默認(rèn)值)水平方向;還有column主軸為垂直方向;還有就是flex-wrap換不換行,align-content多根軸線(xiàn)的對(duì)齊方式,Justify-content定義了項(xiàng)目在主軸上的對(duì)齊方式,align-items屬性定義項(xiàng)目在交叉軸上如何對(duì)齊,lign-self屬性允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對(duì)齊方式,最后就是flex的默認(rèn)值flex:0 1 auto;項(xiàng)目不能放大可以縮小,并且是項(xiàng)目原來(lái)的大小。
以上就是我對(duì)于第一個(gè)月的前端課程學(xué)習(xí)總結(jié)了,還是有很多不足的地方在以后會(huì)慢慢的補(bǔ)回來(lái)。
相關(guān)文章
了解千鋒動(dòng)態(tài)
關(guān)注千鋒教育服務(wù)號(hào)
掃一掃快速進(jìn)入
千鋒移動(dòng)端頁(yè)面
掃碼匿名提建議
直達(dá)CEO信箱