样式与弹性盒子模型
另外一种的样式引用方式可以放在wxss中。然后我们先给图片的设置一个class，类名为user-avatar，然后直接在welcome.wxss里面给图片设置样式user-avatar{width：200rpx，height：200rpx}就可以了。最后设置margin-top：160rpx；
注意：这里跟css里面有一个区别，html引用样式的时候，里面必须link引用，样式才可以显示。但是在wxss不一样，因为welcome文件夹下面的四种类型，自动联合在一起。在配置文件json里面写的时候，也只是写了"pages/welcome/welcome"，没有加后缀格式名。说明注册的时候，不是注册welcome.wxml或者welcome.wxss单个文件，而是以welcome开头的所有文件。
关于class和style ，动态改变样式，放在style，静态样式很多，不会改变，写在class样式表中。因为style每次编译的时候，都会去动态解析这个样式，所有如果太多静态样式在sytle里面，运行效率比较低。更多的从复用性，代码规范上 ，选择class。
分析首页，三个元素1、垂直排列，2、中轴线。
CSS3 弹性盒子(Flex Box)
弹性盒子是 CSS3 的一种新的布局模式。
CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
CSS3 弹性盒子内容
弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
弹性容器内包含了一个或多个弹性子元素。
flex-direction
flex-direction顺序指定了弹性子元素在父容器中的位置。
语法
flex-direction:row|row-reverse|column|column-reverse
flex-direction的值有:
row：横向从左到右排列（左对齐），默认的排列方式。
row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
column：纵向排列。
column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。
如何设置弹性盒子？
第一步：先给弹性容器设置display：flex；这里的弹性容器指的就是包裹首页三个元素的一个容器。给一个ID为container。
第二步：子元素是垂直排列，所以给container一个属性：flex-direction:colum。（这个属性不是放在子元素上的，如果子元素200个，每一个子元素都设置一下，显然不如在父元素设置一次方便。）
这样三个元素就已经垂直排列了。比把三个元素设置为block简单很多。
第三步：让子元素居中。同理，思考一下，这个让子元素居中的align-items：center应该放在哪里？同样是在父元素中更简洁。也就是container中。
弹性盒子设置
编写css时候一定有大局观，整体的思想来布局。不要用断裂式的。
弹性盒子设置好了之后，给我们的文字设置样式。
第四步：给“你好”设置一个class为user-name，welcome.wxss中设置text的字体，即： .user-name:{font-size:32rpx;font-family:MicrosoftYaHei;font-weight:bold;}。同样给“开启小程序之旅” 一个类名moto，设置样式：.moto:{font-size:22rpx;font-family:Microsoft yahei；font-weight:bold;}
网友评论