移動web開發基礎

完成的事

  1. 實驗了內聯元素在排版上的狀況,
  2. 學習了flex佈局,並應用開發簡單頁面。
  3. 媒體查詢@media相關的知識,瞭解了其關於自適應的關係。
  4. 瞭解了rem對自適應的影響。

解決的問題

  1. rem是怎麼自適應屏幕寬度的變化的,實際上是經過js動態獲取屏幕寬度的變化的程度,讓html字體大小也一樣程度變化,即實現rem等比擴大和縮小
  2. inline元素設置寬高不起做用,但設置padding,margin,border是起做用的,其padding,margin,border再也不文檔流之中。其自身寬高不受父容器限制。
  3. img等inline-block元素能夠設置寬高,但也inlie元素的特性,其寬高不會受文檔流的控制
  4. inline-flex實際相似於inline-block,inline-flex容器大小由內容決定,但可自行設置寬高,flex佈局的容器寬度不因內容變化。

仍有的困惑

  1. rem自適應屏幕的方式只參考了屏幕寬度的變化,高度呢?要不要考慮

開發步驟

flex佈局的簡單應用
  1. 主要應用flex佈局在垂直方向的居中和在水平方向的兩端對齊或各項間距相等拉開對齊
  2. 佈局後,可有padding,margin來控制間距縫隙,行內元素能夠用寬度,和其自身屬性來排列
關於flex

採用flex佈局的容器有兩個軸,各項目按照主軸去排列,direction方向即改變主軸的方向和項目在主軸上的排列方向,是橫仍是行,是從左到右排列仍是反過來,即row,column,row-reverse。那要是主軸排不下,能夠選擇換行wrap,還能夠選擇向上換行,wrap-reverse。flow就是二者的結合屬性。
定義主軸上的排列方式還能夠定義主軸上的對齊方式,是從主軸開始對齊仍是末尾處開始對齊,仍是中間對齊。是各個之間拉開間距,仍是兩端靠着邊而後拉開邊距。說完主軸再就是交叉軸,交叉軸上與內聯的垂直對齊方式差很少,有居中對齊,基線對齊等html

相關文章
相關標籤/搜索