一.字体 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：
<!-- 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 ;
2. flex （弹性布局）
- flex-direction
-
flex-wrap
wxml中总共4个view，它们的宽的和为1000rpx，而屏幕宽度最大为750rpx，而view没有自动换行，说明一定是压缩了，这正是flex属性值的好处，自动调整各个子组件的宽度.
flex-wrap:nowarp; 自动调整各个子组件的宽度
-
align-item
align-item:center.纵向居中显示
二.
二.
二.
注意点
- 在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;
