weex布局（1）之综述

weex作为一款新开源的“混合”移动开发框架，尤其自己独特的优势吸引了我的注意。通过前面对weex h5 render源码的阅读，了解了下weex h5状态下的实现原理。但是光说不练假把式，不能仅仅要知其所以然，更要知其然。因此从今天开始我将会从实践者的角度出发构建一个weex程序。

先贴一张官方的图：

盒模型图

• weex在布局上使用了盒模型

具体体现在你可以在style中使用下面的属性：
1.padding ( padding-*:10px)
2.margin (margin-*:10px)

• 使用了弹性盒模型

  我认为在html布局里，最好用，功能最丰富的就属弹性盒模型了。不熟悉的话可以参考阮老师的博文.但是呢，在weex代码中，你无须再指定元素的<code>display:flex</code>了。另外改变了部分属性的名称。我将在下篇文章中对比weex的弹性盒模型与html5原生盒模型的区别。

• 使用了apple 6 的屏幕大小作为设计的原型

这意味着，你在设计程序布局时应该按照375*667进行布局，又因为CSS像素值在屏幕上的差异(我的描述有问题)，因此我们在布局时按照750*1334进行布局就可以了。
如果你把元素宽度设为了750px，那么不管你在什么手机上看这个元素，宽度都是屏幕宽度的100%

• 编写的网页在浏览器中是可以缩放的

就是你可以在浏览器通过手指进行放大缩小。解决这个问题你可以在inde.html中添加

<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>

来处理这个问题。

• 元素不能继承父元素的样式

这一点可能与以往的web开发有所区别。