九.表格，表单，BFC

1.表单
	1) 表单字段集  fieldset
	2）表单字段标题 legend
	3）提示信息  label for
	4）上传文件  type="file"
			上传多个文件  multipe
	5）单选按钮  type="radio"
			必须name="" 同组必须是一样的
			选中  checked
			禁用  disabled
	6）多选按钮	type="checkbox"
	7) 下拉菜单 	select option
	8）文本域 textarea
			行数 rows
			字符宽度cols
			css自带去除自带伸缩功能：resize：none；
2.表格
	1）css相关属性
			控制单元格和单元格之间的属性border-spacing
			合并单元格边框的属性border-collapse:collapse;
			单元格内容为空的时候属性empty-cells：hide；
			固定的单元格的宽度：table-layout	：fixed；
			控制单元格标题的属性caption-side：top   bottom谷歌可以；，但是left right只有火狐可以
	2）html的相关
			th标签  文字加粗并水平居中显示
			列分组：<col span=""><colgroup span="">
			行分组 thead  tbody tfoot
3.BFC
	1）什么是BFC？		块级格式化上下文
	2）BFC产生的现象
			内部的box在垂直方向一个一个排列
			属于同一个BFC里面相邻的两个box上下间距会发生重叠
				外边距重叠之后，最终的数据显示是最大的值
				hack：给其中的任意一个元素添加父元素并添加声明overflow：hidden；
			一个元素的margin-left和包含块的border-left相接触	
			BFC区域不会与浮动的盒子发生重叠
				自适应的两栏布局
			BFC是一个独立的渲染区域，里面的元素不会影响外面的元素
			BFC盒子：参与浮动元素的高度计算
				高度塌陷解决方法的原因
	3）BFC的触发条件
			根元素html
			float不为none
			position：absolute和fixed
			display：inline-block flex等
			overflow不为visible

十.html新增加的

1.html和xhtml的的区别
	xhtml必须要结尾
	xhtmtl的字母必须要小写
	xhtml必须要有根元素html
	xhtml必须正确的嵌套
2.html4需要引入DTD后面很长的东西
	原因：HTML4的语言是依据SGML的语言
3.doctype
	如果doctype丢失，在IE6-IE8上会产生怪异盒子模型的解析
		添加padding和border的时候，盒子不会撑大
	也可以用box-sizing属性
		border-box的怪异的解析模式
		content-box的	默认值
4.常用的html标签
		头部 header
		尾部 footer
		导航 nav
		内容块 section
		文章块 article
		旁边 aside
	视频 video
		引入路径src
		自动播放autoplay 在谷歌上不支持
		显示控件 controls
		循环loop
		显示第一帧图片poster
		预备加载preload
		支持的格式mp4 ogg webm
		当引入多个格式的文件时，需要一个标签source-src
	音频 audio
		支持mp3 ogg webm
		是一个独立的内容块，类似dl dt dd
		figure figcaption
		多媒体标签 embed
		高亮显示mark
	拥有下拉列表的  datalist
		list属性写出id的名字
		自动记录的功能 autocomplete="off"
		opation如果是空标记，需要value写内容
5.表单新增加的属性
	邮箱type="email"
	网址url
	数字 number
	拖拽 range
	时间组
		天date	周week 月mouth 时间time 本地时间datetime-local
6.表单的属性	
	提示信息 placeholder
	自动获取焦点autofocus
	自动填充autocomplete
	输入不能为空required
	最大max最小min 步长step 最大长度maxlength
	取消验证novalidate		

十一.css选择器

1.属性选择器	权重是10
	1）	a{href}
2.伪类选择器	权重是10
	1）动态伪类
		：focus
	2）UI状态伪类
		：enabled除了禁用的
		：disabled禁用
		：checked选中
	3）结构伪类
		-child
		-type
			：first-of-type
			：last-of-type
			：nth-of-type
			：nth-last-of-type
		-emply
		-root
	4）否定伪类：not（）
	5）目标伪类：target
	6）语言伪类：lang（）
	
3.层次选择器
	包含结构
		子选择器E>F
		后代选择器包含E F
	针对并列结构
		相邻兄弟选择器E+F
		通用兄弟选择器E~F

十二.css3属性

	1.浏览器前缀
		-webkit- （谷歌，Safari，新版Opera浏览器，以及几乎所有iOS系统中的浏览器（包括 iOS 系统中的火狐浏览器）；基本上所有基于WebKit 内核的浏览器）
		-moz- （火狐浏览器）
		-o- （旧版Opera浏览器）
		-ms- （IE浏览器 和 Edge浏览器）
	2.css3添加前缀之后书写的顺序代表了两个写法
		渐进增强 从小到大
		优雅降级 从大到小
	3.阴影
		文字阴影	text-shadow:水平的 垂直的 模糊色 颜色
		盒子阴影 box-shadow：水平 垂直 模糊度 延伸半径 颜色 inset
		（多个阴影用逗号隔开）
	  背景相关的
	  	背景的剪裁background-clip
	  		默认值border-box
	  		padding-box	
	  		content-box
	  		text
	  背景的起点background-origin
	  		默认值padding-box
	  		border-box
	  		content-box
	  背景的大小background-size
	  		单位用px	%
	  		cover图片被放大到了极致，就会造成部分图片无法显示和图片变形
	  		contain按比例进行缩放
	  border开头的两个属性
	  	圆角：border-radius
	  	椭圆角：border-radius：圆的半径水平/圆的垂直属性
	  颜色的新写法hsl（20,30%,90%）

十三.弹性盒

1.添加在flex容器上的
	1）display-flex；或者inline-flex；
	2）改变主轴方向flex-direction：
			默认值横轴:row
			row-reverse
			竖轴：column
			column-reverse
	3）换行flex-wrap
			默认值nowwrap
			wrap
			wrap-severse
	4）简flex-flow：row nowrap
	5）主轴上的对齐方式justify-content
			flex-start
			flex-end
			center
			两端对齐space-between
			space-around
	6）侧轴 对齐方式
			align-items
				flex-start
				flex-end
				center
				baseline
				默认值 stretch
			align-content
				对于单行不起作用
				多行之间的间距就会没有
2.添加在flex项目上
	1）前后顺序order
	2）放大比例flex-grow
	3）缩小比例flex-shrink
	4）和宽度一样flex-basis
	5）简写flex
	6）自己对齐的align-self

十四.响应式和多列

	1.响应式
		响应式设计的三个条件
			1）灵活的网格基础
			2）弹性图片
			3）	@media
	2.多列式
			1）分栏个数column-count
			2）分栏的宽度column-width
			3）分栏的间距column-gap
			4）分栏的边框column-rule
			5）合并分栏column-span：all；	

十五.过渡，动画，转换

1.过渡
	1）定义过渡的属性：transition-property；
	2）定义过渡的时间：transition-duration：3s；
	3）定义过渡的延迟时间：tranition-delay；
	4）定义过渡的运动形式：transition-timing-function；
			默认值ease
			加快ease-in
			变慢ease-out
			先快后慢ease-in-out
			匀速 linear
			逐帧动画step（）
			贝塞尔曲线
	5）简写transition注意2个时间的顺序
	6）必须和：hover时间一起用
2.动画
	1）定义动画的名字：animation-name；
			关键帧@keyframes 名字{}
	2）动画的执行时间：animation-duration；
	3）延迟时间 animation-delay
	4）运动形式animation-timing-function
	5）定义运动的次数animation-iteration-count
		循环：infinite；
	6）定义动画的播放方向：animation-direction；
		默认值：normal
		alternate
	7）鼠标经过暂停动画animation-play-state
	8) 定义动画执行的第一帧或者最后一帧停留的位置animation-fill-mode
	9）简写：animation；
3.转换transform
	1）平移：transform：translate（）；
	2）旋转：transform：rotate（）；
	3）缩放：scale（）默认是1；
		可以给负值，表示先顺时针旋转180deg，然后再放大或缩小
	4）倾斜：skew（）
		里面内容也会倾斜
	5）视距（景深）transform：perspective；
	6）矩阵
4.改变转换的中心点
	transform-origin：left top；
	transform-origin：水平 垂直 居中
		最后一个参数，只能用数值