我們在手機上布局一般是這個樣子的：

其中頭部對整個mobile的設計至關重要，而且坑也很多：

① 一般來說整個header是以fixed布局，fixed這個產物在移動端來說本身坑就非常多

② 在Hybrid應用中，Header很多時候扮演了不一樣的角色，首先要完成以webview(window)為容器的功能，又要調用native提供的接口

Hybrid中Header的實現往往是一個難點，主要原因是同一套接口，要保證H5站點與native處于不一樣的環境調用相同的接口，完成不同的功能

③ 若是Hybrid中采用native提供的頭會導致mask不能全屏遮蓋，并且Header定制會變難；但是在Hybrid中采用H5提供的Header的話，萬一js報錯，便會導致毀滅性的假死，用戶除了關閉進程，就出不來了

PS：這里以一個簡單的a標簽便可以解決js錯誤導致的假死問題，這里與我們今天的內容無關，不予擴展

顯然，以上的內容與今天的文章沒有一毛錢關系，我們今天的主要內容是：

用float于Flexbox兩種方式實現我們的Header

小釵初學CSS有很多不足，理解也有錯誤，請您指正，并且感謝左盟主的指導

CSS3的布局

CSS的布局的演化

最初的布局主要依賴于表格，表格主要的問題是：

① 不靈活

② 效率低，要整個渲染結束才會顯示

發展到CSS2.X系列，div+css的說法大行其道，很大程度上說，布局對重構來說，變得比較簡單，但是由于塊級元素的特性，多列布局仍舊讓人很頭疼

div不能多列，span什么的又不適合作為布局元素，于是多列布局一般采用float實現，使用float就要清楚浮動

偶爾多列布局會使用定位屬性（事實上大范圍的布局推薦定位元素），但是小范圍的絕對定位會不太靈活

CSS3中引入了一些新的布局機制，顯然在PC瀏覽器中不適合，但幸運的是我是移動前端，所以不存在！！！

盒模型的概念我這里不再贅述，在瀏覽器中，元素都會被當做一個盒模型，CSS3中新增了一些概念對盒模型進行了補充

我們在實際工作中經常會出現這樣的代碼，從而引起元素溢出，并導致橫向滾動條：

發表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發表