微信小程序基础知识

01 html

1.1 基本标签

标签名	代码	类型	属性	特点事项	使用频率
大盒子	div	块级		没有意义的大盒子	多
标题	h1-h6	块级		h1最大、h6最小	多
段落	p	块级		段落标签中不能再放div和h标签	多
无需列表	ul>li	块级		ul>li标签必须严格嵌套	多
表格	table>tr>td	块级	border 边框	大量数据需要整齐显示 存在合并单元格： 跨行 rowspan = ‘2’ 跨列 colspan = ‘2’	少
小盒子	span	行内		没有意义的小盒子	多
加粗	strong	行内			多
图片	img	行内	src 图片路径 alt 图片显示不出来时的提示信息 title 鼠标悬停图片时的提示信息	主要格式png、jpg	多
链接	a	行内	href 链接路径	链接标签中不能再放链接标签	多
音频	audio	行内	src 音频路径 controls 音频控件 autoplay 自动播放 loop 循环播放	主要格式MP3	少
视频	audio	行内	src 音频路径 controls 音频控件 autoplay 自动播放 loop 循环播放	主要格式MP4	少
表单	input	行内块	type 表单类型 => text 文本输入框 => password 密码输入框 => radio 单选 => checkbox 复选框 => submit 提交 => reset 重置 name 表单的名字（方便区分） value 表单的默认值（提交数据） placeholder 占位符（更人性化的提示）	checked 让单选、多选被默认被选中	多

1.2 标签类型

• 块级元素

  特性：独占一行，宽度默认100%，可以设置宽高

• 行内元素

  特性：一行显示多个，宽度默认由内容撑开，不可以设置宽高

• 行内块元素

  特性：具备块级和内联的优势，一行显示多个，宽度默认由内容撑开，可以设置宽高

  举例：button、input

1.3 路径

• 同级-------img图片和html页面处于同一级文件夹

  ./图片.jpg
  <img src="./tu.jpg" alt="">
  

• 下一级-------img图片和html页面不处于同一级文件夹，需要先进入图片文件夹再找到图片

  ./文件夹/图片.jpg
  <img src="./文件夹/tu.jpg" alt="">
  

• 上一级-------img图片和html页面不处于同一级文件夹，需要先跳出html页面文件夹再找到图片

  ../图片.jpg
  <img src="../tu.jpg" alt="">
  

02 css

2.1 常用选择器

选择器	css	html	使用	特点
标签选择器	div{}		通过标签名找到元素	无差异化
类选择器	.box{}		通过类名找到元素	指定元素
后代选择器	.boxA .boxC{}		选择器组合	匹配当前元素的子孙后代元素
子代选择器	.boxA>.boxB{}		选择器组合	匹配当前元素的亲儿子元素
伪类选择器	.box:hover{}		鼠标悬停时触发	一种状态
结构伪类选择器	li:nth-child(n){}	1 2 3 4 5	获取li的第n个元素	指定获取某一个

2.2 常用样式

样式	属性名	属性值	备注
宽度	width	数值+px
高度	height	数值+px
颜色	color	单词、16进制、rgba
字体大小	font-size	数值+px
字体粗细	font-weight	400（正常）-700（加粗）
字体样式	font-style	normal 正常 italic 倾斜
字体类型	font-family	“Microsoft YaHei”、微软雅黑
字体连写	font	style weight size family	size family为必填项
文本对齐方式	text-align	left/center/right	控制元素内部文字、图片对齐方式
文本修饰	text-decoration	none 清除
行高	line-height	数值+px	line-height和height一致控制单行文本垂直居中
背景颜色	background-color	单词、16进制、rgba
背景图	background-image	url(图片路径)
背景平铺	background-repeat	repeat 重复 no-repeat 不重复
背景位置	background-posistion	方位名词 left、center、right、top、bottom 精确单位 x、y轴值	精确单位控制方向 X和Y轴方向不能混 X轴控制左右，正值向右、负值向左 Y轴控制上下，正值向上、负值向下
背景尺寸	background-size	数值+px（X轴 Y轴） cover contain	cover 等比例缩放，直到其他两条边都覆盖（缺点：溢出部分被切掉） contain 等比例缩放，直到其他一条边覆盖（缺点：没覆盖位置留白）
背景连写	background	color image repeat posistion/size	顺序没有要求 背景颜色和图片可以同时存在
边框	border	粗细 样式 颜色 1px solid red
切换显示模式	display	block 块级 inline 行内 inline-block 行内块 none 隐藏元素	none和block属性可以看成一对反义词，专门处理隐藏和显示的功能
垂直对齐方式	vertical-align	top 顶部对齐 middle 中间对齐 bottom 底部对齐	解决文字、图片、表单元素垂直对不齐问题
鼠标样式	cursor	pointer 手型
圆角	border-radius	px、百分比
溢出部分效果	overflow	hidden 溢出隐藏 scroll 溢出显示滚动条 auto 不溢出则正常显示，溢出则显示滚动条
透明度	opacity	0-1	0透明 0-1之间 半透明 1不透明
过渡	transition	过渡属性 过渡时间	牛逼的属性，可以替代很多动态效果

2.3 盒子模型

盒子模型由内容、内边距、边框、外边距组成。

内容	属性	取值个数	单独方向	作用	取值
内容	width	1	无	里面内容	px
内边距	padding	1个 4个方向 2个 左右 上下 3个 上 左右 下 4个 上右下左	padding-left padding-right padding-top padding-bottom	盒子与文字之间的距离	px
边框	border	1	border-left border-right border-top border-bottom	盒子的轮廓	粗细 样式 颜色
外边距	margin	1个 4个方向 2个 左右 上下 3个 上 左右 下 4个 上右下左	margin-left margin-right margin-top margin-bottom	盒子与盒子之间的距离	px

注意事项：

• 盒子模型的组成部分很简单，但是搭配非常灵活！
• 盒子真实大小由内容、内边距、边框共同影响，在开发过程中不太方便。
• 改变盒子模型的计算方式，只由盒子width决定。加入属性 box-sizing : border-box

2.4 浮动和清除浮动

浮动作用：让元素一排显示

浮动代码：float：left、right

浮动注意：是兄弟就一起浮动

浮动后注意：清除浮动（清除浮动带来的问题）

如何清除浮动：在浮动元素亲父级身上加入类名 clearfix 。 具体clearfix请复制下面代码

// css
li {
	float:left;
}
.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

// html
// 父级清除浮动
<ul class = 'clearfix'>
	<li>儿子们一起浮动</li>
	<li>儿子们一起浮动</li>
	<li>儿子们一起浮动</li>
	<li>儿子们一起浮动</li>
</ul>

2.5 定位

定位模式	定位属性	相对与谁定位	是否脱标（占据位置）	使用场景
相对定位	position: relative	自身	不脱标、占位置	打辅助（子绝父相）
绝对定位	position: absolute	有定位父级则以定位父级为标准 没有定位父级则以浏览器为标准	脱标、不占位置	压住其他元素
固定定位	position: fixed	浏览器为标准	脱标、不占位置	固定在浏览器的某一个位置

子绝父相，最常用的一种定位方式，解释：

子绝：让元素压住别人（完成页面效果）

父相：给子绝元素当爹的（保证子绝元素的定位标准），而且不影响其他页面结构（占据位置、不脱标）

03 移动端

3.1移动端与pc端的不同？

	1. pc        1. 屏幕大 2. 有版心
	2. 移动端 1. 屏幕小 2. 没版心

3.2 如何调试移动端？

	移动端网页直接在谷歌浏览器的手机模拟器中进行调试，
	可以选择机型、手机屏幕尺寸、显示显示比例等信息

3.3分辨率

	1. 物理分辨率（出厂固定）
	2. 逻辑分辨率（软件控制）

3.4视口有什么作用

	为了让网页在移动端上显示正常，我们需要添加视口标签，保证网页等于设备宽度，代码自动生成即可

3.5二倍图作用

	因为手机屏幕越来越好，物理像素和逻辑像素不一致，所以需要2、3倍图

04 flex布局

4.1 弹性布局flex概念

	名称：弹性布局、flex布局 作用：灵活、方便的控制元素的排列方式 
	作用元素：被控制元素的父级元素（亲爸爸） 
	属性名：display:flex 介绍： 父级：弹性容器 子级：弹性盒子 主轴：默认水平 侧轴：默认垂直

4.2弹性布局主轴属性

	1. justify-content:flex-strat 左侧对齐
	2. justify-content:flex-end 右侧对齐
	3. justify-content:center 居中对齐
	4. justify-content:space-around 每一个元素都拥有属于自己的间隙
	5. justify-content:space-between 两端对齐平分剩下间隙
	6. justify-content:space-evenly 所有地方的间距都相等

4.3 弹性布局侧轴属性

	1. align-items:flex-strat 左侧对齐

	2. align-items:flex-end 右侧对齐

	3. align-items:center 居中对齐

	4. align-items:stretch 拉伸（子元素不设置高度）

4.4弹性布局单独控制某一个侧轴属性

	1. align-self:flex-strat 左侧对齐

	2. align-self:flex-end 右侧对齐

	3. align-self:center 居中对齐

	4. align-self:stretch 拉伸（子元素不设置高度）

4.5弹性布局flex属性?

	1. 获取剩下的所有空间

	2. 获取剩下的所有空间并按比例划分