小程序之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）

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

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

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

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

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

四. display

示例Demo：


.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

如何设置 view的高度是宽度的0.5倍
float: right;
position: relative;
z-index: -99;