web前端：9_复习

web的传统的布局方式:
	1.文档流布局: 默认的布局方式.网页内容是从左往右,从上往下.通过内外边距,元素类型转换进行排版
	2.浮动布局(float): 给元素添加浮动.让它脱离文档流, 向左/右移动. 直到遇到边界/其他浮动元素位置
	3.定位布局(position): 给元素设置四个方向的距离,让元素在指定的位置出现
		绝对定位: 让元素在父级的基础上.基于四个方向调整距离. 如果没有专门的父级,就以body作为父级
		相对定位: 让元素在自身的基础上,进行四个方向的移动
		固定定位: 让元素在网页的指定位置固定显示,不会随着滚轮滚动而消失.

float:
	基本上可以给所有的标签都加上float属性.但是注意,加了float的元素会脱离文档流.可能会造成布局塌陷.为了避免这种情况,可以给盒子设置溢出隐藏
		overflow:hidden;

position:
	absolut: 绝对定位
	relative: 相对定位
	只是设置定位,还需要补充四个方向对应的距离值.元素才会移动
		top -- 上
		right -- 右
		bottom -- 下
		left -- 左
	一个网页其实可以做到,全程都有定位来进行布局.但是这样麻烦/性能比较弱. 所以布局一般是用在微调上

选择器拓展:
	基础选择器:
		*{}   通配符选择器.选择网页里的所有标签
		标签名{}  标签选择器.选择网页里的所有该标签
		.class名{}  类名选择器.选择网页里所有带class属性为XX的标签  class可以有多个
		#id名{} id选择器.选择网页里带有id属性为XX的标签.  id是唯一的,不可以多设

	进阶选择器:
		ul,li{}  并集选择器.选中多个标签
		.msg p{}  后代选择器,只选择.msg里的p
		.msg > p{} 子代选择器, 只选择.msg里子代的p

	伪类选择器: 当满足条件是,激活样式
		元素:hover{}   当鼠标经过该元素时,触发样式
		元素:active{}  当鼠标点击该元素时,触发样式

	伪元素: 在网页里生成一个只能看 + 不能用/选中的元素. 性能/安全性更好
		伪元素需要有content属性才能激活
		元素::after{content:''}  元素后面添加
		元素::before{content:''}  元素前面添加

	结构选择器: 在一个结构(有多个元素的情况下)选中指定的元素:
		元素:nth-child(n){}   选中第n个元素
		元素:first-child{}    选中第一个元素
		元素:last-child{}    选中最后一个元素

表单标签(form)
	主要是用来和用户键交互的.让用户能够输入内容/选中内容/点击内容

表单工具:
	input : 输入框
	textarea : 多行输入框
	button : 按钮
	select: 下拉菜单
	option: 下拉菜单选项

input的多种类型:
	text : 普通文本
	password : 密码文本,输入的内容
	radio: 单选框,基于name属性判断是否为同一事件
	checkbox: 多选框
	submit: 提交框
	reset: 重置框
	file: 文件框

阿里图标:
	很多网页里都会用到图标.如果这些图标都是用img图片的方式插入. 性能比较差
	所以采用文字的方式.提前把图标通过特定方式转换为一种文字样式. 就可以以插入文字的方式,插入图标

	1.进入阿里图标官网
	2.下载素材
	3.解压压缩包
	4.写代码 (1.导入css文件 iconfont.css 2.写一个文本标签.类名为iconfont icon-xxx )

flex(弹性盒模型布局)
	flex是目前比较主流的布局方式. 布局原理就是通过两条轴区分调整容器布局

	主轴: 横轴.默认从左往右进行布局
	副轴: 纵轴
	flex容器 -- 容器
	flex元素 -- 项目

	主轴的方向: 通过修改主轴方向.调整布局方式(左右布局/上下布局)
		flex-direction: row;   # 行,默认,从左往右
						row-reverse;   # 行反转,从右往左
						column;   # 列,从上往下布局
						column-reverse;   # 列反转,从下往上

	主轴的对齐方式:
		justify-content: flex-start;   靠起点
						 flex-end;    靠终点
						 center;	居中
						 space-around;	均分布局
						 space-between;	左中右布局

	副轴的对齐方式:
		align-items: flex-start;   靠起点
					 flex-end;    靠终点
				     center;       居中