html5+css3之CSS中的布局与Header的实现

我们在手机上布局一般是这个样子的：

其中头部对整个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中新增了一些概念对盒模型进行了补充

我们在实际工作中经常会出现这样的代码，从而引起元素溢出，并导致横向滚动条：

发表评论 共有条评论 用户名: 密码: 验证码: 匿名发表