推荐下载
-
2020-05-12 浏览：789
-
2020-04-04 浏览：654
-
2020-05-06 浏览：560
-
2020-05-08 浏览：545
-
2020-05-12 浏览：543
微信小程序 UI样式基础及相对定位和绝对定位
发布时间:2020-11-29一：UI样式基础
尺寸
/*width: 宽*/
/*height: 高*/
/*min-width: 最小宽度*/
/*max-width: 最大宽度*/
/*min-height: 最小高度*/
/*max-height: 最大高度*/
背景
/*background-color: 背景颜色*/
/*background-image: 背景图片*/
/*background-repeat: 背景图片的重叠方式*/
边框
/*border-radius:50% 圆形*/
/*border-radius:20% 方形圆角*/
/*border-width: 10px;*/
/*border-color: red;*/
/*border-style:inset;*/
边距
margin:距离上一个标签的距离
padding:标签距离内部包裹的内容的距离
文本
/*color: red;*/
/*font-size: 20px; */
/*font-weight:700; 加粗*/
其他（列表，内容，表格）
----------------------------------------------------------------------------------------------------
样式选择器
类选择器，ID选择器，元素选择器，通配符选择器(现有的编译器并不支持)，
包含选择器 p c{} //p下面的所有
子元素选择器 p > c{} //p下面的一级
邻近兄弟选择器 c + c{}
通用兄弟选择器 c~c{}
动态伪类选择器 (:active :focus) (:link :visited :hover)--小程序不支持
.item:active{background-color:yellow}
状态伪类选择器（:enable :disable :checked）
选择伪类选择器：（:first-child :last-child :nth-child() :nth-last-child() :nth-of-type() :nth-last-of-type() :first-of-type :last-of-type :only-child :only-of-type）
空内容伪类选择器：:empty
否定伪类选择器：:not
伪元素：::first-line ::first-letter ::before ::after ::selection
二：相对定位和绝对定位
相对定位：元素是相对自身进行定位，参照物是自己。
绝对定位：元素是相对离它最近的一个已定位的父级元素进行定位
-----------------------------------------------------------------------------------------------
相对定位：
position:relative; /*启用相对定位*/
left:150rpx; /*相对于自己往右偏离150*/
top:50rpx; /*相对于自己往下偏离150*/
绝对定位：
position: absolute;
left: 50rpx;
top: 50rpx;
（父级元素一定要是已定位）
- 上一篇：使用nodejs获取微信小程序带参数二维码
- 下一篇：微信小程序的事件及生命周期
