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