小程序常用属性

一、常用属性

  font-size: 20px;
  /*设置文字字号*/
  color: red;
  /*设置文字颜色*/
  font-weight: bold;
  /*设置字体加粗*/
  border: 1px solid red;
  /*添加边框样式（粗细为1px， 颜色为红色的实线）*/
  font-family: "宋体";
  /*设置字体为宋体*/
  font-style: italic;
  /*文字排版--斜体*/
  text-decoration: underline;
  /*文字排版--下划线*/
  text-decoration: line-through;
  /*文字排版--删除线*/
  text-indent: 2em;
  /*段落排版--缩进*/
  line-height: 1.5em;
  /*段落排版--行间距（行高）*/
  letter-spacing: 50px;
  /*段落排版--中文字间距*/
  word-spacing: 50px;
  /*字母间距*/
  text-align: center;
  /*right;left;*/
  /*段落排版--对齐*/
  display: inline-flex;
  /*将对象作为内联块级弹性伸缩盒显示*/
  display: block;
  /*设置为块状元素*/
  display: inline;
  /*设置为内联元素*/
  display: inline-block;
  /*设置为内联块状元素*/
  word-break: keep-all;
  /* 不换行 */
  white-space: nowrap;
  /* 不换行 */
  vertical-align: middle;
  /*把此元素放置在父元素的中部。*/
  /* （边框样式） */
  border: solid 1rpx #333;
  /*表示为实线；1rpx 宽度；颜色为黑色。dashed（虚线）| dotted（点线）| solid（实线）。*/
  /**border-bottom border-top border-right border-left 上下左右线单独设置边框样式*/
  /*当使用padding的时候不影响大小;即内容容器大小不变*/
  padding-top: 10rpx;
  /**上边距10rpx*/
  /* top、right、bottom、left*/
  padding: 10rpx 5rpx 5rpx 5rpx;
  /**等价于 padding-top:10rpx;padding-right:5rpx;padding-bottom:5rpx;padding-left:5rpx*/
  margin: 0 auto; 
  /* 等价于 margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: 0;*/

二、常用样式

设置控件水平居中

行内标签和行内块级标签：在父控件中设置text-align:center.

<view class="item-container">
    <text class="item-text">布局</text>
</view>

.item-container {
  width: 300rpx;
  height: 200rpx;
  text-align: center;
  background-color: darkgoldenrod;
}

块级标签 在子控件自身设置margin：0 auto。

<view class="item-container">
    <view class="item-child-container"></view>
</view>

.item-container {
  width: 300rpx;
  height: 200rpx; 
  background-color: darkgoldenrod;
}

.item-child-container {
  width: 50rpx;
  height: 50rpx;
  margin: 0 auto;
  background-color: darkgreen;
}

设置控件垂直居中

行内标签和行内块级标签：只需将line-height 的值设置为父控件的高度。

.item-container {
  width: 300rpx;
  height: 200rpx;
  background-color: darkgoldenrod;
}

.item-text {
  line-height: 200rpx;
}

块级标签：

• 第一种：可将块级标签转为行内块级，然后同上
• 第二种：用position，然后left=50%，top=50%，然后设置平移属性transform: translate(-50%, -50%) 向左、向上平移自身的50%；

.item-child-container {
  width: 50rpx;
  height: 50rpx;
  background-color: darkgreen;
  position: relative;
  top: 50%;
  left: 50%; 
  transform: translate(-50%, -50%);
}

• 第三种：通过align-items: center; justify-content: center;设置子块在父块和主轴（横轴）居中

.item-container {
  width: 300rpx;
  height: 200rpx;
  background-color: darkgoldenrod;
  display: flex;
  flex-direction: row;
  align-items: center; 
  justify-content: center;
}

文本两行显示，超出省略号表示

.item-text {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

文本一行显示，超出省略号表示

.item-text-line {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
}