本文从CSS3的布局（CSS的布局的演化、CSS3盒模型-box-sizing、float布局中的bfc、Flexbox简介）Header布局的实现（float实现布局、Header js的实现）向我们展示了HTML5与CSS3的魅力。

上次，我们形成了两种header的布局，一种flexbox，一种float，最后与身边做重构的同事交流下来，选择了float的布局。 事实上布局的选型不需要我关注，我的参与或者一些意见多数是自我提升，但要说html结构完全控制于csser的话就不一定了 在整个header组件的代码过程中，我与重构同事就一些地方发生了重复的交流，争论，今天就header组件的布局以及功能实现，聊一聊js与css的配合 然后header组件本身是一个老组件，我们顺便探讨下，这类老组件应该如何翻新比较合适。 最初的结

前言 我们在手机上布局一般是这个样子的： 其中头部对整个mobile的设计至关重要，而且坑也很多： ① 一般来说整个header是以fixed布局，fixed这个产物在移动端来说本身坑就非常多 ② 在Hybrid应用中，Header很多时候扮演了不一样的角色，首先要完成以webview(window)为容器的功能，又要调用native提供的接口 Hybrid中Header的实现往往是一个难点，主要原因是同一套接口，要保证H5站点与native处于不一样的环境调用相同的接口，完成不同的功能 ③