小程序之wxss

一.字体 font

• font-style ： 文字样式 normal正常的字体， italic斜体字 oblique 倾斜的字体
• font-variant : 设置对象中的文本是否为小型的大写字母
• font-weight : 设置文本字体的粗细。取值范围为100-900.取值：normal：正常大小(400)。bold :粗体(700)。bolder， lighter。
• font-size : 设置字体尺寸大小. 取值：normal 正常的字体。small-caps 小型的大写字母字体。设置了以后会不论原来是否为大小字母 全部改为大写。
• line-height
• font-family : 设置字体名称。
• font-stretch:
  normal：正常文字宽度。
  ultra-condensed：比正常文字宽度窄4个基数。
  extra-condensed：比正常文字宽度窄3个基数。
  condensed：比正常文字宽度窄2个基数。
  semi-condensed：比正常文字宽度窄1个基数。
  semi-expanded：比正常文字宽度宽1个基数。
  expanded:比正常文字宽度宽2个基数.
  extra-expanded：比正常文字宽度宽3个基数。
  ultra-expanded：比正常文字宽度宽4个基数。
  font-size和font-family的值是必需的。如果缺少了其他值，默认值将被插入，如果有默认值的话.

二. 边框 border

• border-color : 边框的颜色

• border-style : 边框的样式
  none ：无样式
  hidden ： 隐藏样式
  dotted ： 点状排布
  dashed ： 虚线
  solid ： 实线

• border-width ： 设置边框宽度：常用取值：medium：默认值，相当于3px。thin：1px。thick：5px。不可以为负值。

• border-top:设置顶部边框。border-top-width,border-top-style,border-top-color 分别设置 宽度，样式以及颜色

• border-right：设置右边框。

• border-bottom：设置底边框。

• border-left：设置左边框。

• border-radius : 设置圆角边框。左上角：border-top-left-radius，右上角：border-top-right-radius，左下角：border-bottom-left-radius，右下角：border-bottom-right-radius

• box-shadow

• 10.border-image：对象的边框样式使用图片来填充。

1>border-image-source:设置图片的来源。使用绝对或者相对地址或者渐变色来确定图片。

2>border-image-slice :设置边框背景图的分隔方式。取值：数值／百分比 fill.该属性指定从上右下左来分割图片，将图像分成4个角，4条边以及中间区域。中间区域始终是透明的，除非使用关键字fill。

3>border-image-width:设置边框背景的宽度。用于指定使用多厚的边框来承载呗裁剪后的图像。

4>border-image-outset：设置对象的边框背景图的扩展，意思就是说假如设置了10rpx，那么图像就会在原来基础上外延10rpx在显示。

5>border-image-repeat：设置对象的边框图片的平铺方式。

stretch:拉伸。

repeat：平铺，碰到边界的时候截断。

round：根据边框的尺寸动态调整图片的大小，使得刚好可以铺满整个边框。

space：根据边框的尺寸动态调整图片的之间的间距，使得刚好铺满整个边框。100

三.外边距（margin）和内边距（padding）

1. margin：外边距；设置对象四边的外延边距。

• margin: 20rpx 10rpx 25rpx 10rpx ：如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。
• margin：20rpx：如果只提供一个，将用于全部的四边。
• margin：20rpx 20rpx：如果提供两个，第一个用于上、下，第二个用于左、右。
• margin：20rpx 20rpx 10rpx：如果提供三个，第一个用于上，第二个用于左、右，第三个用于下。

2. padding：内边距：设置对象四边的内部边距。

• padding: 20rpx 10rpx 25rpx 10rpx ：如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。
• padding：20rpx：如果只提供一个，将用于全部的四边。
• padding：20rpx 20rpx：如果提供两个，第一个用于上、下，第二个用于左、右。
• padding：20rpx 20rpx 10rpx：如果提供三个，第一个用于上，第二个用于左、右，第三个用于下。

3. margin-top，margin-right，margin-bottom，margin-left对应的分别是上右下左外边的距离，可取值：auto／数值／百分比。
4. padding-top，padding-right，padding-bottom，padding-left对应的分别是上右下左内边的距离，可取值：auto／数值／百分比。

四. display

示例Demo：

<!-- wxml -->
<view class="demo-view">
    <view class="bc_green"></view>
    <view class="bc_red"></view>
    <view class="bc_yellow"></view>
    <view class="bc_black"></view>
</view>

<!-- wxss -->
.demo-view {
  margin-top: 200rpx;
  display: flex;
  flex-direction: row;
  background-color: #fff;
  height: 100%;
}

.bc_green {
  background-color: #0f0;
  width: 100rpx;
  height: 100rpx;
}

.bc_red {
  background-color: #f00;
  width: 200rpx;
  height: 100rpx;
}

.bc_yellow {
  background-color: #00f;
  width: 300rpx;
  height: 100rpx;
}

.bc_black {
  background-color: #000;
  width: 400rpx;
  height: 100rpx;
}

效果图

1. block （块布局）

block表示[块内]容器模式，总是使用新行开始显示，小程序的3个视图容器（view，srcoll-view，swiper）默认值均为display:block ;

display:block; 块内容器换行

2. flex （弹性布局）

• flex-direction

flex-direction : row; 水平排列 flex-direction : row-reverse;;水平翻转排列

flex-direction :column;竖直排列 flex-direction: column-reverse;竖直翻转排列

• flex-wrap
  wxml中总共4个view，它们的宽的和为1000rpx，而屏幕宽度最大为750rpx，而view没有自动换行，说明一定是压缩了，这正是flex属性值的好处，自动调整各个子组件的宽度.

  
  flex-wrap:nowarp; 自动调整各个子组件的宽度

flex-wrap:warp; 换行显示 flex-wrap:warp-reverse; 换行反向显示

• align-item

  
  align-item:center.纵向居中显示

align-item:flex-start;纵向左侧显示 align-item:flex-end;纵向右侧显示

二.

二.

二.

注意点

• 在wxss里面 对标签设置样式. 对该页面内所有的swiper和swiper-item样式设置。 不用加 .

swiper {
  width: 100%;
  height: 375rpx;
  background-color: white;
}

swiper-item {
  width: 100%;
  height: 375rpx;
  background-color: yellow;
}

待整理
如何居中 x和y轴的居中
padding-bottom

14. 如何设置 view的高度是宽度的0.5倍

15. float: right;

16. position: relative;

17. z-index: -99;