weex布局（1）之综述

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

---

先贴一张官方的图：

盒模型图

如果不熟悉盒模型可以看一下百度百科给的定义： http://baike.baidu.com/link?url=lTgnomTVMdVDuBHGalopXCjbo4qeW1RZ4lUx-4RXLx1irEMhQ2h4R59Cn4tsfrPZq_F_ySshT-mZr-kkiOvkeq。

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

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

• 使用了弹性盒模型

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

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

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

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

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

来处理这个问题。

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

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