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

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

因为对容器元素来说，他的高度只有100px（事实上他这里还有2px的border，实际占据102px）

所以说，即设置width，又设置margin等属性，直接导致其真实width溢出了，但是块级元素本身就是100%铺开的，这里不用设置

但是很多时候，我们又会设置，往往导致什么横向滚动条什么的BUG，为了解决这个问题，CSS3提出了一个box-sizing特性

② border-box，此属性的设置后，会表现与IE7表现一次，如果设置了width、margin等值，width会被重置，margin仍然会产生影响

PS：事实上，无论是事件冒泡还是IE盒模型，都是有其意义的

我们这里以一个例子做说明，然后再逐步分析，我们现在来看一个简单的头部布局

http://sandbox.runjs.cn/show/pok0fp78

以上是一种header的常用布局，但是为其中块级元素设置overflow与否却直接影响了tc的真实宽度，这其中的原因是什么呢

前面我们说过了，在网页中每个元素会表现得像一个盒子，不同的类型（display）会产生不同的结果

我们在js中一个对象会被其所在执行环境影响，或者说一个js对象不可能脱离其执行环境存在，整个元素对于浏览器而言事实上也是一个程序对象，他也有其依赖对象，这里所谓的对象便是我们的格式化上下文

BFC为块级格式化上下文，块级元素的布局会受其影响，他是一个独立的渲染区，这又像一个沙箱，内部不会对外部进行污染

并不是所有的块级元素都会形成对应的格式化上下文，这里与js一致，我们一般处于window环境下，有需要才会处于某个函数执行环境；当然，我们便有方法令某一个元素创建其独立的环境

元素触发（生成）BFC：

① 根元素本身便会创建BFC

② float不为none时

③ 定位元素，脱离文档流的元素

④ display为inline-block或者flex的元素（IE7模拟行内块级元素的花招是zoom:1+inline）

⑤ overflow不为visible的元素

回到我们上面的例子，我们每一个span为inline-block漂浮元素，所以各自维护着独立的BFC，那么BFC布局又有什么规则呢，我这里挑几个关键的来说：

① BFC内部的元素会每行一个的排布，这里参考块级元素的布局

② 元素间上下距离由margin决定，并且同一BFC中的元素会外边距叠加

③ 每个元素的左边（包含margin-left），与包含块（padding内区域）的左边框接触，适用于float元素

④ BFC区域不会与浮动元素重叠，BFC内部的浮动元素会参与高度计算（很关键）

一般情况下我们的div为块级元素，处于根元素的BFC下，所以其应该横向铺开，100%宽，正如上图

但是设置overflow后，情况有所变化，div元素生成了独立的BFC空间，整个布局方式会发生变化

根据上述标准，BFC区域不与浮动元素BFC区域重叠，整个div所占空间便被浮动元素挤压，这是其宽度变化的原因

这里是div触发bfc与不触发造成的区别，文字围绕浮动元素便是最好的说明：

简单来说，支持情况各位不必关注，移动端支持的蛮好的，不必为那5%的份额做让步，并且就现在国内手机的更新换代速度，用就好了。

Flexbox（伸缩布局）的提出，为的是让根元素中的子项目的宽度变化可以总是填充整个元素，换句话说子项目的布局总能表现的很好：

① 不会溢出容器元素

② 不会换行

③ 项目多了，比较挤的时候会自动变小

比如这种场景：

木有申请的Flexbox，这个功能的实现是非常讨厌的，而且就算resize神马的，他都不会换行，正是居家必备良药啊！

从这里各位可能有所发现，Flexbox的表现，和表格有些相似，都不会溢出容器

现在display由多出了一个常用属性：flex | inline-flex ；如前面所言，设置后会为容器创建独立的格式化上下文，内中的布局便特殊化了