【css-04】移动端登录页的header有哪些实现方式？

小课堂【武汉第116期】

分享人：王力

目录

1.背景介绍

伴随移动互联网的快速发展，移动客户端的使用数据量正在的逐步的逼近PC端，而这一现象主要的推力应归公于手机app应用的迅速发展。不仅如此，wifi的覆盖范围不断拓宽，这也使得移动端APP应用的发展空间有了更大的平台，而手机app的数量也呈井喷趋势。

2.知识剖析

零布局

零布局的意思就是几乎完全按照正常文档流的方式来布局，不采用比如float，position，display等css属性，这是最基本的布局方式，就是按照文档顺序一个一个地显示，块元素独占一行，内联元素共享一行。。

display布局

每个元素都有自己的display属性，有的是block，有的是inline。css3中增加了好几个display的值，比如list-item,table-cell,inline-block等。

float布局

float布局可以用来实现文字在图片周围浮动的效果，或者是文字向左边增加的效果等等。但是需要注意的是：

  1.float属性不会让元素上浮到另一个z-index层，它仍然让元素在z-index:0层排列。

  2.float会影响它周围的元素。

  3.float会把该元素以inline-block显示，就算我们显式地让元素以block或者inline显示都不行。

position布局

position布局能应对很多复杂的布局。给元素设置relative值，元素会相对于它之前的位置做相应的移动，但它还是在z-index:0这一层，但它对于周围的元素是没有影响的。

给元素设置absolute值，该元素会完全脱离文档流，就是不在z-index:0这一层了，也不会对周围元素有影响。给元素设置Fixed值，该元素相对于视窗进行定位，不管你的滚动条滚到哪里，该元素总会出现在相同位置。所以position布局可以用来实现元素的重叠摆放，元素固定位置呈现等。

flex布局

用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效，主要思想是给予容器控制内部元素高度和宽度的能力，就是PC兼容性相对较差，IE要10，甚至11以上才有很好的兼容，当然我们的主题是移动端登陆页面，在这里面不用考略这些

从上面的这些app可以看出除了一些无header的app登陆页面其他大致可以分为左元素-标题-（右元素）这种结构

浮动定位方法：针对这种类型布局，可以在两边设置浮动，中间设置居中即可

绝对定位的方法布局：可以将header部分设置成relative，然后将左右浮动元素都设置成absolute

表格方法：设置table-cell,设置了display:table-cell的元素对宽度高度敏感，对margin值无反应，响应padding属性,vertical-align：middle可以同时将多行文字设置垂直居中

flex布局：使用flex布局可以简便、完整、响应式地实现各种页面布局,这种响应式的布局是应用的最广泛的。

3.常见问题

使用浮动定位的时候由于左右元素不相会导致标题元素不居中，原因是因为header部分进行居中的时候是去掉了浮动元素所占据的空间再进行的居中

4.解决方法

将左右元素设置一个相同的宽度,可以让中间的标题依然居中，但是这样会导致一些美观问题，所以建议大家尽量使用其他方法进行布局

6.扩展思考

设计登陆界面的时候遵循什么模式会比较吸引人？

像简书，豆瓣一刻这样的，先呈现的是登录，也就是说，APP默认进入这一页面的主要是已有账号的用户，但为新用户提供了注册选项，但在页面的重要程度低于登录的——只是一个跳转到注册页面的链接。这也是主流的APP登录/注册页面的设计模式.还有一些APP为了简化流程方便用户注册，推荐用户用第三方账号登录而弱化注册新用户选项，如种子习惯和糗事百科。背景精美的插画，或者图片,没有装饰性的元素，只有简单的logo。

7.参考文献

参考一：https://www.zhihu.com/question/37254177

参考二：http://www.qdfuns.com/notes/13976/1f305c05c91960db7679a3dce26eaabd.html

8.更多讨论

还可以使用其他的布局设计app登陆的header部分吗？