）inherit
从父元素继承display属性的值
（2）position（定位）样式，其属性和说明如表所示。
position样式的属性和说明
属性
说明
absolute
生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。
元素的位置通过left、top、right及bottom属性进行规定
relative
生成相对定位的元素，相对于其正常位置进行定位。
因此，“left：
20”会向元素的LEFT位置添加20像素
fixed
生成绝对定位的元素，相对于浏览器窗口进行定位。
元素的位置通过left、top、right及bottom属性进行规定
static
默认值，没有定位，元素出现在正常的流中（忽略top、bottom、left、right或者z-index声明）
inline-flex
将对象作为内联块级弹性伸缩盒显示
inherit
规定应该从父元素继承position属性的值
（3）float（浮动）样式，其属性和说明如表所示。
float样式的属性和说明
属性
说明
left
元素向左浮动
right
元素向右浮动
none
默认值，元素不浮动，并会显示其在文本中出现的位置
inherit
规定应该从父元素继承float属性的值
（4）background（背景）样式，其属性和说明如表所示。
background样式的属性和说明
属性
说明
background
简写属性，作用是将背景属性设置在一个声明中background:
colorpositionsizerepeatoriginclipattachmentimage;
background-color
指定要使用的背景颜色
background-position
指定背景图像的位置background-position:
center
background-size
指定背景图像的大小background-size：
80px60px;（宽度、高度）
background-repeat
指定如何重复背景图像repeat,repeat-x,repeat-y,no-repeat,inherit
background-origin
指定背景图像的定位区域padding-box。
背景图像填充框的相对位置
border-box
背景图像边界框的相对位置
content-box
背景图像相对位置的内容框
background-clip
指定背景图像的绘画区域。
属性值，同上
background-attachment
设置背景图像是否固定或者随着页面的其余部分滚动
scroll
背景图像随页面的其余部分滚动。
这是默认属性
fixed
背景图像是固定的
inherit
指定background-attachment的设置应该从父元素继承
local
背景图像随滚动元素滚动
background-image
指定要使用的一个或多个背景图像，使用url（'URL'）提供图像的URL
（5）border（边框）样式，其属性和说明如表所示。
border样式的属性和说明
属性
说明
属性值
border
简写属性，用于把针对4个边的属性设置在一个声明中
border：
5pxsolidred;
border-width
用于为元素的所有边框设置宽度，或者单独地为各边框设置宽度
thin、medium、thick、length
border-style
设置元素所有边框的样式，或者单独地为各边设置边框样式
solid、dashed、dotted、double等
border-color
设置元素的所有边框中可见部分的颜色，或为4个边分别设置颜色
border-color:
red;
（6）outline（轮廓）样式，其属性和说明如表所示。
outline样式的属性和说明
属性
说明
属性值
outline
在一个声明中设置所有的外边框属性
outline:
outline-color,outline-style,outline-width
outline-color
设置外边框的颜色
outline-style
设置外边框的样式
Solid、dashed、dotted、double等
outline-width
设置外边框的宽度
thinmediumthicklength
（7）text（文本）样式，其属性和说明如表所示。
text样式的属性和说明
属性
说明
属性值
color
设置文本颜色
direction
设置文本方向
ltr：
文本方向从左到右
rtl：
文本方向从右到左
letter-spacing
设置字符间距
line-height
设置行高
text-align
对齐元素中的文本
left：
把文本排列到左边。
默认值，由浏览器决定
right：
把文本排列到右边
center：
把文本排列到中间
justify：
实现两端对齐文本效果
inherit：
规定应该从父元素继承text-align属性的值
text-decoration
向文本添加修饰
underline：
定义文本下的一条线
overline：
定义文本上的一条线
line-through：
定义穿过文本下的一条线
blink：
定义闪烁的文本
text-indent
缩进元素中文本的首行
text-shadow
设置文本阴影
text-shadow:
h-shadowv-shadowblurcolor;
h-shadow：
水平阴影的位置，允许负值
v-shadow：
垂直阴影的位置，允许负值
blur：
模糊的距离
color：
阴影的颜色
text-transform
控制元素中的字母
capitalize：
文本中的每个单词都以大写字母开头
uppercase：
定义仅有大写字母
lowercase：
定义无大写字母，仅有小写字母
vertical-align
设置元素的垂直对齐
baseline、sub、super、top、text-top、middle、bottom、text-bottom、length、%、inherit
white-space
设置元素中空白的处理方式
normal、pre、nowrap、pre-wrap、pre-line、inherit
word-spacing
设置字间距
normal、length、inherit
（8）font（字体样式），其属性和说明如表所示。
font样式的属性和说明
属性
说明
属性值
font
在一个声明中设置所有字体属性
font:
font-stylefont-variantfont-weightfont-size/line-heightfont-family（按顺序）
font-style
指定文本的字体样式
normal：
默认值。
浏览器会显示一个标准的字体样式
italic：
浏览器会显示一个斜体的字体样式
oblique：
浏览器会显示一个倾斜的字体样式
inherit：
规定应该从父元素继承字体样式
font-variant
以小型大写字体或者正常字体显示文本
normal：
默认值。
浏览器会显示一个标准的字体
small-caps：
浏览器会显示小型大写字母的字体
inherit：
规定应该从父元素继承font-variant属性的值
font-weight
指定字体的粗细
normal：
默认值。
定义标准的字符
bold：
定义粗体字符
bolder：
定义更粗的字符
lighter：
定义更细的字符
inherit：
规定应该从父元素继承字体的粗细
font-size
指定文本的字体大小
smaller：
把font-size设置为比父元素更小的尺寸
larger：
把font-size设置为比父元素更大的尺寸
length：
把font-size设置为一个固定的值
%：
把font-size设置为基于父元素的一个百分比值
font-family
指定文本的字体系列
（9）margin（外边距）样式，其属性和说明如表所示。
margin样式的属性和说明
属性
说明
属性值
margin
在一个声明中设置所有外边距属性
margin：
10px5px15px20px;（上边距，右边距，下边距，左边距）
margin-top
设置元素的上外边距
margin-right
设置元素的右外边距
margin-bottom
设置元素的下外边距
margin-left
设置元素的左外边距
（10）padding（填充）样式，其属性和说明如表所示。
padding样式的属性和说明
属性
说明
属性值
padding
使用缩写属性设置在一个声明中的所有填充属性
padding：
10px5px15px20px;（上填充，右填充，下填充，左填充）
padding-top
设置元素的顶部填充
padding-right
设置元素的右部填充
padding-bottom
设置元素的底部填充
padding-left
设置元素的左部填充
3.5 微信小程序条件渲染
在编写微信小程序时，经常需要进行条件判断，以确定是否需要渲染某代码块。
3.5.1使用wx:
if判断单个组件
在微信小程序框架里，使用 wx:
if="{{condition}}" 来进行条件判断，判断是否需要渲染该代码块，示例代码如下。
if="{{condition}}">你好,欢迎学习微信小程序
使用 wx:
elif 和wx:
else来添加一个else代码块。
if="{{length>5}}">长度大于5
elif="{{length>2}}">长度大于2
else>长度为3
//index.js
Page（{
data:
{
length:
8
}
}）
当length=8时，输出结果为长度大于5，执行第一个判断条件。
3.5.2使用blockwx:
if判断多个组件
因为wx:
if是一个控制属性，需要将它添加到一个组件上。
但是如果我们想一次性判断多个组件，可以使用一个＜block/＞标签将多个组件包装起来，并在上边使用wx:
if控制属性，示例代码如下。
if="{{true}}">
内容1
内容2
并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。
3.6微信小程序列表渲染
我们经常需要将一些内容以列表的形式显示出来，这就要用到微信小程序的列表渲染。
如果只是将数据以列表的形式显示出来，那么直接一行行显示就行。
但如果数据的显示是动态的，这种方式就不能解决问题了。
微信小程序提供了wx:
for的方式来解决这个问题。
3.6.1使用wx:
for列表渲染单个组件
在组件上使用wx:
for控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。
默认数组当前项的下标变量名为index，数组当前项的变量名为item，示例代码如下。
for="{{array}}">
{{index}}:
{{item.name}}
//index.js
Page（{
data:
{
array:
[{
name:
'tom',
},{
name:
'kevin'
}]
}
}）
使用wx:
for-item可以指定数组当前元素的变量名，使用wx:
for-index可以指定数组当前下标的变量名，示例代码如下。
for="{{array}}"wx:
for-index="idx"wx:
for-item="itemName">
{{idx}}:
{{itemName.name}}
3.6.2使用blockwx:
for列表渲染多个组件
wx:
for应用在某一个组件上，但是当想渲染一个包含多节点的结构块时，wx:
for就需要应用在标签上，示例代码如下。
for="{{[1,2,3]}}">
{{index}}:
{{item}}
3.6.3使用wx:
key指定唯一标识符
如果列表中项目的位置会动态改变，或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 中的输入内容， 的选中状态），就需要使用 wx:
key 来指定列表中项目的唯一标识符。
wx:
key 的值以下列两种形式提供。
展开阅读全文
相关搜索