＃原创＃前端布局基础及移动端运用的思考

目录：

历史及发展变化
Html5的新结构元素
基于Css的布局之道
- 考虑屏幕分辨率
- 关于布局的几个名词
- 基本布局样式属性
其他布局相关
- CSS框架
- 人类阅读舒适度的考虑
- Css具体属性创建的目的与后期使用时和意义偏离的思考

1）历史及发展变化¹

1991年第一个网页的诞生只有简单的文字及链接，涉及应用的元素较少且简单，后来设计师们发现table能更好的展现网页内容于是表格布局时代出现。

随着，w3c规范的提出，出现了块级元素和内联元素的定义，2000年后进入div布局时代；截至目前，大多数页面布局都是基于div和css2实现的。

如今，迎来了Html5+Css3的时代，一些布局通过简单的标签及属性就能实现，但还存在一定的浏览器内核支持及兼容性差异，可以根据实际开发情况酌情运用（比如columns[文章多列]如今就适用于移动端浏览器²）。

思考??：

一个重要的知识点，结构和样式相辅相成共同构成布局。截止目前发展情况来看Webkit内核对css3支持较好，通过现在手机市场的占有率报告分析，不难看出绝大部分手机浏览器都采用的Webkit内核，这使得移动端产品能实践更多Css3效果，同时Css3属性的新尝试为前端开发带来很多便利。

2）Html5的新结构元素³

<header>，结构主体头部／文章标题（强调这是一篇文章的标题头）；

<nav>，标记一些链接的集合体，常用作导航条／边栏链接等，具有导向性质的链接处都可使用；

<section>，表示一块区域，书中的某一章节／网页某个工作区等；

<article>，代表一个独立的、完整的相关内容块；

<aside>，用来表示标记、侧栏、摘要、引用等常用补充内容；

<footer>，结构主体结尾部分；

思考??：

相较于前两个布局阶段，布局的结构标签从单一的table，div 到如今的多个结构标签，使得布局更加语义化的同时，我们也不得逆向思考这样布局是否也会因为太过于强调结构语义化而在Css灵活性布局上有所束缚（这里可以做一个深入思考）？

3）基于Css的布局之道

——3.1 考虑屏幕分辨率

在以前进行页面布局时是以800*600的分辨率为基准设计，随着大屏幕显示器的普及开始基于1024*768的基准，一些较出名的css框架（如960Grid）都是基于1024宽度下最完美的960px进行设计的，微软于2007年开始基于1024标准做设计基础，苹果2008年开始改版也以1024为设计基础（这些都是4:3的屏幕比例），这种固定像素的布局方式有一个严重的缺陷——更低分辨率下将隐藏一部分显示空间，出现横向滚动条；如今已经进入宽频时代（大部分比例为16:9），该方式又凸显了另一个不足——更高分辨率下将浪费一部分显示空间（白屏区域增大）。而Web应用需要注重空间的使用问题，所以100%满屏的布局方式更适合这样的需求。

——3.2 关于布局的几个名词⁴

固定布局（Fiexd）－以像素为单位对网页进行布局的方式；无论窗口如何改变内容宽度始终保持不变；存在一定局限，如1024的宽在800下出现横向滚动条（上面有提到）…

流式布局（Fluid）－以％百分比进行宽度设计的布局方式，高度大都是用px来固定住，可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整，尽可能的适应各种分辨率；往往配合 min/max-width 等属性控制尺寸流动范围以免过大或者过小影响阅读。

弹性布局（Elastic）－使用 em 或 rem 单位进行相对布局，相对 % 百分比更加灵活，同时可以支持浏览器的字体大小调整和缩放等的正常显示。因为em是相对父级元素的原因没有得到广泛推广。

响应式布局（Responsive）－使用@media 媒体查询给不同尺寸和介质的设备切换不同的样式。在优秀的响应范围设计下可以给适配范围内的设备最好的体验，在同一个设备下实际还是固定的布局。

自适应布局（ Adaptive）－通常使用 @media 媒体查询和网格系统 (Grid System) 配合相对布局单位进行布局，实际上就是综合响应式、流动等上述技术通过 CSS 给单一网页不同设备返回不同样式的技术统称。自适应几乎已经成为优秀页面布局的标准。

弹性盒布局模型（Flexible Box）⁵－ CSS3 规范中提出的一种新的布局方式。该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。这种布局方式在条目尺寸未知或动态时也能工作，用来为盒状模型提供最大的灵活性。截止目前为止，该布局模型在主流浏览器中都得到了支持。

由于弹性盒模型规范本身有过多个不同的版本，因此浏览器对于该规范的支持也存在一些不一致。浏览器一共支持 3 个不同版本规范的语法：

* 新规范：最新版本规范的语法，即"display: flex"。

* 中间版本：2011 年的非官方规范的语法，即"display: flexbox"。

* 老规范：2009 年的规范的语法，即"display: box"。

弹性盒布局模型的浏览器支持——

思考??：

站在解决问题的角度，传统的布局最优方式采用自适应布局综合其他布局模式以快速实现产品目标为目的；在合适的项目上使用新技术手段实现不失为一个更高效的方式，Flex布局在移动端的支持目前可以考虑逐步在开发中运用。

——3.3 基本布局样式属性

定位（position）：

static －默认值（不设置时），此时top/right/bottom/left无效；

绝对定位（absolute）－相对于该对象父级为relative的对象位置左上角定位，如果直到最上层body未出现relative，就相对于浏览器的左上角定位；

相对定位（relative）－相对于该对象原本该出现的位置左上角定位；

固定定位（fixed）－元素固定住浏览器可视区域不会随其他元素滚动。

浮动（float）⁷：

常用于多列布局；因使用浮动后对象会脱离文档流，所以为保障布局正常要对使用浮动后紧跟的对象进行清除浮动操作；初始时用于图片使文本环绕，css中任何元素都可以应用浮动，浮动元素自身生成一个块级框，再不设置宽度的前提下宽度由内容支撑。

none －默认值，元素不浮动；

left －向左边浮动；

right －向右边浮动；

inherit －继承父级浮动。

外边距（margin）：

申明元素四边外边距的值，设置方向依次top/right/bottom/left（顺时针），允许使用负值；块级元素垂直方向相邻外边距会自动合并，內联元素设置上下边距无效，浮动元素外边距不会合并。

内边距（padding）：

申明元素四边内边距的值，设置方向同上，允许使用负值；內联元素垂直方向相邻内边距会自动合并，浮动元素内边距不会合并，内边距值不计算在元素设置的宽度內。

边框（border）：

申明四边边框的宽度／样式／颜色，也可以单独设置某一边框；內联元素为文字内容多行时，设置边框会重合且视觉凌乱。

display⁶：

在传统的布局方式中，我们常常会用到display对应值有block、none、inline这三个值；block 布局是把块在垂直方向从上到下依次排列的；而 inline 布局则是在水平方向来排列，none用于隐藏。

单位⁸（以下只涉及部分常用单位）：

* px，相对于显示器屏幕而言（windows用户分辨率一般为96像素／英寸）

* em，相对于当前对象内文本的字体尺寸而言（任意浏览器默认字号16px，所以1em＝16px，10px＝0.625em，以此我们就可以利用此公式换算出设置具体宽度）

* rem，Css3引入的新字体尺寸单位，它是相对于根节点（或者是html节点）的font size而言的

?? 初始设置font-size:62.5%;不可用于PC端环境⁹，对谷歌浏览器来说，默认小于12像素的字体大小依然以12px显示，所以62.5%会有问题；而移动端webkit浏览器支持是设置小于12px字体的。

flex¹⁰：

采用Flex布局的元素，称为Flex容器（flex container）。它的所有子元素自动成为容器成员，称为Flex项目（flex item）。

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

?? 设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

?? 目前安卓自带浏览器对flex的支持为4.4+版本，就截止3月份谷歌发布的市场占有率来说4.1-4.3差不多占有20%左右，随着时间推移不断下降中，新版本的占有率逐步升高。

思考??：

通过以上了解我们可以知道css布局方式因运用不同结构和属性而改变，但目的只有一个就是更适用于当前生产的需要。了解学习了布局的这知识后，根据开发的产品，自行结合生产实际考虑使用哪一种（或中和使用）；例如弹性盒模型，因现代浏览器支持较好，所以移动端开发就显得适用。

4）其他布局相关

——4.1 CSS框架¹¹

CSS框架是一种能够使用在你的web项目中概念上的结构，是别人已经写完的而且很完善的Css定义集合。960Grid是基于网格系统的Css布局框架，只要遵守一些简单的规则（其实就是class类），你就能快速设计出960px宽度的网页结构来。

——4.2 人类阅读舒适度的考虑

研究表明，通常认为每行大概65～75个字符是最适合的阅读长度；这样在设计布局时存在一些限制，也导致网站无法充分利用宽屏所赋予的机会。多年来，经过杂志和报纸的不断实践，使用多列布局让内容流动起来，这种布局解决了长文本的处理以及如何把许多材料放到有限的空间的问题。（还有借鉴书籍的排版设计与舒适阅读的关系？？？？这里有时间可以单独讨论及研究一下）

——4.3 Css具体属性创建的目的与后期使用时和意义偏离的思考

一个属性（或物品，概念等）被广泛使用是因为它解决了大部分人当下面临的问题，并受到推荐和再运用。一个最初的项目在其发展过程中很可能偏离开始的意义，我认为这并不一定是坏事儿，取决于这个项目好坏可以参考它的出现为大众的接受认可度以及广泛使用。我理解的创新就是为解决问题而存在，不断创新就是不断提升解决问题的效率。总结一个重要的点就是，为当前生产解决问题且有效率优质的解决问题。如果是这样那无论它最初是什么目的及意义结果时接受者受益就是好的。仁者见仁，智者见智。

参考：

¹《大巧不工－Web前端设计修炼之道》章节3.2／3.4(2,4)／3.5(2)／5.1

²“columns－css3速查手册” http://www.css88.com/book/css/properties/multi-column/columns.htm

“手机浏览器有哪几种内核标准” http://dwz.cn/3e89zx

³“HTML5中div、article、section的区别及使用介绍” http://edu.cnzz.cn/201308/922645d5.shtml

⁴“web app 自适应方案总结关键字弹性布局之rem” http://www.cnblogs.com/breakdown/p/4231708.html

“web app变革之rem” http://isux.tencent.com/web-app-rem.html

⁵“深入理解 CSS3 弹性盒布局模型” http://www.ibm.com/developerworks/cn/web/1409_chengfu_css3flexbox//

⁶“display属性参考手册” http://www.css88.com/book/css/properties/layout/display.htm

⁷“css-float浮动的深入研究、详解及拓展一” http://dwz.cn/1k76fK

“css-float浮动的深入研究、详解及拓展二” http://dwz.cn/3jLW9q

⁸“CSS长度值与单位” http://www.css88.com/book/css/values/length/index.htm