微信小程序开发经验总结(四)

微信小程序开发经验总结

微信小程序开发经验总结(一)
微信小程序开发经验总结(二)
微信小程序开发经验总结(三)
微信小程序开发经验总结(四)
微信小程序开发经验总结(五)
微信小程序开发经验总结(六)
微信小程序开发经验总结(七)

12. wxss

全局样式与局部样式

• 定义在 app.wxss 中的样式为全局样式，作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。

flex

• 官方demo使用了这种布局,没有采用float布局,使用起来挺方便的

• Flex是Flexible Box的缩写，意为”弹性布局”

• 参考: http://www.runoob.com/w3cnote/flex-grammar.html

• flex-direction属性 决定主轴的方向（即项目的排列方向）
  row（默认值）： 主轴为水平方向，起点在左端。
  row-reverse： 主轴为水平方向，起点在右端。
  column： 主轴为垂直方向，起点在上沿。
  column-reverse： 主轴为垂直方向，起点在下沿

• align-items align-items属性定义项目在交叉轴上如何对齐。

  （1）flex-start： 交叉轴的起点对齐。
  （2）flex-end： 交叉轴的终点对齐。
  （3）center： 交叉轴的中点对齐。
  （4）baseline: 项目的第一行文字的基线对齐。
  （5）stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

• justify-content justify-content属性定义了项目在主轴上的对齐方式。
  （1）flex-start（默认值）：左对齐
  （2）flex-end：右对齐
  （3）center： 居中
  （4）space-between：两端对齐，项目之间的间隔都相等。
  （5）space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

• flex-wrap 如果一条轴线排不下，如何换行。
  （1）nowrap（默认）：不换行。
  （2）wrap：换行，第一行在上方。
  （3）wrap-reverse：换行，第一行在下方。
  flex-flow flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

• align-content 属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
  （1）lex-start：与交叉轴的起点对齐。
  （2）flex-end：与交叉轴的终点对齐。
  （3）center：与交叉轴的中点对齐。
  （4）space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
  （5）space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
  （6）stretch（默认值）：轴线占满整个交叉轴。

• 项目的属性

  （1）order

  order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

  （2）flex-grow

  flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）

  （3）flex-shrink

  flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。负值对该属性无效。

  （4）flex-basis
  flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

  （5）flex

  flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
  该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

  （6）align-self
  align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

  该属性可能取6个值，除了auto，其他都与align-items属性完全一致。

• 常用实例

//flex 横向  各item居中对齐 从头开始排列
.container {
  display: flex;
  align-items: center;
}
//flex 纵向 各item居中对齐 从头开始排列
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

text

• 字间距

  letter-spacing:8px;，字间距为8px

• text-decoration

  none  默认。定义标准的文本。
  underline 定义文本下的一条线。
  overline  定义文本上的一条线。
  line-through  定义穿过文本下的一条线。
  blink 定义闪烁的文本。
  inherit   规定应该从父元素继承 text-decoration 属性的值。

• 空格

  <text class="text_12_4b" decode="{{true}}">&nbsp;微信：</text>

• 两端对齐

  .wxml
  <view class="hint"><p>座</p><p>位</p><p>险</p><p>：</p></view>
  .wxss
  .hint {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 120rpx;
  }

  ​

font

• font-weight 粗细

  normal  默认值。定义标准的字符。
  bold    定义粗体字符。
  bolder  定义更粗的字符。
  lighter 定义更细的字符。
  100
  200
  300
  400
  500
  600
  700
  800
  900
  定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。
  inherit 规定应该从父元素继承字体的粗细。

• font-size 大小

  font-size: 32rpx;//大小

box

• box-sizing

  content-box | border-box | inherit;
  content-box
  描述：在宽度和高度之外绘制元素的内边距和边框。
  border-box
  描述：为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制
  inherit
  描述：继承 父元素 box-sizing属性的值
  /** 全部设置*/
  *, *:before, *:after {
  　　-moz-box-sizing: border-box;
  　　-webkit-box-sizing: border-box;
  　　box-sizing: border-box;
  　　}

• box-shadow 阴影

  box-shadow: h-shadow v-shadow blur spread color inset;

  ​

page

• 背景色

  page{
    background-color:red;
  }

样式导入

• ​

   /**实际路径要写全*/
   @import "common.wxss";

dispkay

• ​

  // 默认值：此时不可调节宽高。
  dispkay：inline
  // 改变默认值：此时就可以调节宽高。
  display：block
  // 或者这样
  display：inline-block