⼩程序WXSS样式全解
尺⼨
1.⾼度
height: ⾼度
line-height: ⾏⾼
max-height: 最⼤⾼度
min-heught: 最⼩⾼度
2.宽度
width: 宽度
margin属性值可以为百分比max-width: 最⼤宽度
min-width: 最⼩宽度
3.设置⽅法
像素值
px，如20px
rp
List item
x，如20rpx
说明：px=2rpx
百分⽐
如10%
背景
1.backgroung
多属性的缩略写法，顺序分别是background-color，图像地址，图像重复，图像是否重 复 ，图像是否固定，图像位置2.background-attachment：图像是否固定，或随着页⾯的其余部分滚动
默认值scroll，即随着页⾯其余部分滚动
fixed，图像固定不动
inherit，从⽗元素继承background-attachment属性值
3.bacground-color：背景颜⾊
color_name，颜⾊名称，如red
hex_number，颜⾊16进制值，如：#00ff00
rgb_number ,rgb背景颜⾊，如rgb(255,123,111)
transparent，默认值即透明
inherit，从⽗元素继承background-image属性的值
4.background-image：背景图像，不能在wxss中定义
默认值none，即不显⽰图像
url(“url”)，指向图像的路径
inherit，从⽗元素继承background-image属性的值
5.background-position：设置背景图⽚的位置
默认值0%0%，如果只设置了⼀个关键词，则第⼆个默认是center
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x% y%
第⼀值是⽔平位置，第⼆个值是垂直位置
左上⾓是0% 0%，右下⾓是100% 100%
如果只设置了第⼀个值，第⼆个值默认是50%
xpos ypos
第⼀值是⽔平位置，第⼆个值是垂直位置
左上⾓是0 0
如果只设置了第⼀个值，第⼆个值默认是50%
6.background-repeat：如何重复背景图像
默认值repeat, 背景图像将在垂直⽅向和⽔平⽅向重复
repeat-x ，在⽔平⽅向重复
repeat-y ，在垂直⽅向重复
no-repeat ，仅显⽰⼀次
inherit ，从⽗元素继承background-repeat属性设置
边框
1.border
针对四个边的属性设置，border-width,border-style,border-color的缩写，如border: 5px soild green 2.border-style：元素所有边框的样式
默认值none，即⽆边框
hidden，隐藏边框，同none
dotted，点状边框
dashed，虚线边框
solid，实线
doubie，双线
groove，3D凹槽边框
ridge，3D垄状边框
inset，3Dinset 边框
outset，3Doutset边框
inherit，从⽗元素继承边框样式
3.border-width：边框的⾼度
4.border-color：边框的颜⾊
5.上边框
border-top：上边框的属性
border-top-color：上边框的颜⾊
border-top-style：上边框的样式
border-top-width: 上边框的宽度
6.下边框
border-bottom：下边框的属性
border-bottom-color：下边框的颜⾊
border-bottom-style：下边框的样式
border-bottom-width: 下边框的宽度
7.左边框
border-left：左边框的属性
border-left-color：左边框的颜⾊
border-left-style：左边框的样式
border-left-width: 左边框的宽度
8.右边框
border-right：右边框的属性
border-right-color：右边框的颜⾊
border-right-style：右边框的样式
border-right-width: 右边框的宽度
9.border-radius：圆⾓
轮廓
1.元素周围的⼀条线，即在边框边缘的外围
2.outline：
outline-color
outline-style
outline-width
3.outline-color：轮廓颜⾊
4.outline-style：轮廓样式
5.outline-width：轮廓宽度
none:⽆轮廓，默认值
dotted：点状轮廓图
dashed：虚线轮廓
solid：实现轮廓
double：双线轮廓
groove：3D凹槽轮廓
ridge：3D凸轮廓
inset：3D凹边轮廓
outset：3D凸边轮廓
inherit：从⽗元素继承轮廓
边距
1.内边距
padding：四个边距，padding-top，padding-right，padding-bottom，padding-left的简写，如：padding：10px 10px 10px 10px；
padding-top：上边距
padding-right：右边距
padding-bottom：下边距
padding-left：左边距
2.外边距
margin:top right bottom left
margin-top：上外边距:(1)默认值0，允许使⽤负值（2）auto （3） length固定的值（4）%基于⽗对象总⾼度的百分⽐上外边距（5）inherit从⽗元素继承上外边距
margin-right：右外边距
margin-bottom：下外边距
margin-left：左外边距
3.外边距合并
当两个垂直外边距相遇时，它们将形成⼀个外边距。合并后的外边距的⾼度等于两个发⽣合并的外边距的⾼度重的较⼤者。
⽂本
颜⾊名称，如：red
⼗六进制颜⾊值，如：#ff00dd
rgb颜⾊值，如：rgb（10,111,233）
inherit：从⽗元素继承颜⾊值
2.direction：⽂本⽅向
ltr：默认值，从左向右
rtl：从右向左
inherit：从⽗元素继承
3.line-height：⾏⾼
normal：默认，设置合理的⾏间距
number：设置的数字会与当前的字体尺⼨相乘来设置⾏间距length：设置固定的⾏间距
%：基于当前字体尺⼨的百分⽐间距
inherit：从⽗元素继承
4.letter-spacing字符间距
normal：默认，没有额外的空间
length：固定空间，允许使⽤负值
inherit：从⽗元素继承
<-align：对齐元素中的⽂本
left：默认，⽂本排序到左边
right：⽂本排序到右边
center：⽂本排列到中间
justify：两端对齐
inherit：从⽗元素继承
<-decoration：祥⽂本中添加修饰
none：默认
underline:⽂本下的⼀条线
overline：⽂本上的⼀条线
line-through：穿过⽂本下的⼀条线，即删除线
blink：闪烁的⽂本
inherit：从⽗元素继承
<-indent：缩进元素中⽂本的⾸⾏
length：默认值0，固定的缩进
%：基于⽗元素宽度的百分⽐
inherit：从⽗元素继承
<-shadow：设置⽂件阴影
<-transform：控制元素中的字母
none：默认，标准的⽂本
capitalize：每个单词以⼤写字母开头
uppercase：⼤写字母
lowercase：⼩写字母
inherit：从⽗元素继承
10.unicode-bidi：设置⽂本⽅向
11.white-space：设置元素中空⽩的处理⽅式
normal：默认，空⽩会被浏览器忽略
pre：空⽩会被浏览器保留
nowrap：⽂件不会换⾏，直到遇到
标签换⾏
pre-wrap：保留空⽩符序列，正常换⾏
pre-line：合并空⽩符序列，保留换⾏符
inherit：从⽗元素继承
12.word-spacing：设置字间距
normal：默认，定义标准空间
length：固定空间
inherit：从⽗元素继承
尺⼨
1.⾼度
height: ⾼度
line-height: ⾏⾼
max-height: 最⼤⾼度
min-heught: 最⼩⾼度
2.宽度
width: 宽度
max-width: 最⼤宽度
min-width: 最⼩宽度
3.设置⽅法
像素值
px，如20px
rpx，如20rpx
说明：px=2rpx
百分⽐
如10%
背景
1.backgroung
多属性的缩略写法，顺序分别是background-color，图像地址，图像重复，图像是否重 复 ，图像是否固定，图像位置2.background-attachment：图像是否固定，或随着页⾯的其余部分滚动
默认值scroll，即随着页⾯其余部分滚动
fixed，图像固定不动
inherit，从⽗元素继承background-attachment属性值
3.bacground-color：背景颜⾊
color_name，颜⾊名称，如red
hex_number，颜⾊16进制值，如：#00ff00
rgb_number ,rgb背景颜⾊，如rgb(255,123,111)
transparent，默认值即透明
inherit，从⽗元素继承background-image属性的值
4.background-image：背景图像，不能在wxss中定义
默认值none，即不显⽰图像
url(“url”)，指向图像的路径
inherit，从⽗元素继承background-image属性的值
5.background-position：设置背景图⽚的位置

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。