小程序入门系列之了解结构样式及行为配置的关系结构和样式

本节将以一个示例来描述结构和样式的关系 。首先，我们准备好一个图片素材，放到/static/imgs/命名为timg.jpg.如下图：

下面我们将在wxml定义如下结构：

下面我们需要在wxss中定义一个类，并且这个类将给上面定义的View组件。假如为box

并在类中定义如下的样式：

.box{display:flex;align-items: center;}

通过右侧的预览，我们发现，图片已经和文字进行垂直方向 的居中对齐了，那么下面，我们要对图片进行美化一下，此时，给这个图片，定义一个headimg的类：并作如下定义：

.headimg{width:66px;height:66px;border-radius:3px;padding:4px;}

至此，通过这样的一个简单的例子，我们可以明白wxml是控制显示的结构，而wxss是控制显示的样子和布局堆叠样式。
　　实用教程，请关注 手机模板网http://www.sjmoban.com