1、主流浏览器的内核：IE(trident)、firefox（gecko）、chrome （webkit）
2、http：超文本传输协议 hypertext transfer protocol
3、html：超文本标记语言 hypertext markup language
4、css：层叠样式表
5、javascript：行为动作
6、h1用于LOGO
7、特殊字符：©版权
8、iframe内嵌窗口与A标签配合使用：用于广告区
width
height
scrolling="auto" 是否出现滚动条
auto 默认 自动
yes
no
frameborder=""
0 没有边框
1 有边框
marginheight 上下多XX空间
marginwidth 左右多XX空间
9、video
src
资源格式：mp4 webM ogg
controls
autoplay
width
height
audio
src=路径
资源格式：mp3 wav ogg
controls 控制台
controls="controls"
autoplay="autoplay"
10、table表格
cellspacing 单元格到单元格距离
cellpadding 内容距离单元格的距离
rowspan 合并行
colspan 合并列
caption 是在table里面的第一行 描述信息
thead
tbody
tfoot
注：1、thead，tbody，tfoot必须同时出现
2、如果tbody里面的内容太多，那么把tfoot放到tbody前面
11、form表单文本域“textarea”
placeholder提示文字
12、
13、
通配符<标签(伪元素)
0 1 10 100 1000 infinity
14、font-family默认微软雅黑16号字，多个单词组成用引号
15、font-weight字体加粗
bold加粗
normal正常
16、font-style字体倾斜:italic
17、text-indent文本缩进em相对自己字体大小，如果自己没有字体大小，会继承父级的字体大小
18、text-decoration:underline下划线
line-through中划线
overline上划线
none
19、background-size:contain优先占满宽度
cover优先占满高度
注：当图片和颜色都存在时，图片在上面
20、文字图片对齐
文字图片低对齐 默认的样子
文字图片中对齐 img vertical-align: middle|top|bottom;
文字图片上对齐 img vertical-align:top
float: left;
21、 BFCblock format content 块级格式化上下文
这是一种效果，这种效果可以触发
position:absolute
display:inline-block
float：left
overflow：hidden
22、:link 未访问的链接
:visited 已访问的链接
:hover 鼠标悬停
:active 激活链接(点下的一瞬间)
23、:和::的区别
::一般用于 伪元素
：一般用于伪类
----------------
::超伪类一般用于刚出来的还没有被所有浏览器所兼容，或者没有被w3c正式承认
:已经被承认，并且兼容良好
24、 隐藏：display:none 不会占据原来的位置
隐藏：visibility:hidden 占着原来的位置
显示：display：block
rgba
opacity：0
25、相对定位 position: relative;不改变元素类型，相对自己，没有脱离文档流，为绝对做父级
绝对定位 position: absolute;改变元素类型，相对relative/body，脱离文档流，用于运动效果图
固定定位 position: fixed;改变元素类型，相对浏览器定位，脱离文档流，广告，固定导航栏
26、 定位层级
1、后写的在上面
2、z-index 默认是0 数越大 层级越高
27、 清除浮动三件套.clearfix::after{
content: '';
clear: both;
display: block;
}
28、单行文本溢出隐藏三件套white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
注：定义类时记得配合title使用实现鼠标悬停显示全部字
29、 nth-child(n)
是从1开始的
按子元素的位置排列的
nth-of-type(n)
同类型子元素顺序
last-child
最后一个元素
30、 伪类选择器
:checked 选择选中的
:disable 选择不可用的
:not() 反选
:enable 选择可用的
::selection 用户选中
::placeholder 提示文字
31、过渡
transition 参与过渡的属性 过渡的时间 过渡的类型 延迟时间
单个属性 s ms linear 匀速
all 500ms ease 由慢到快
.5s ease-in 慢速开始
ease-out 缓慢结束
ease-in-out 慢速开始，慢速结束
32、box-shadow:x轴的偏移量 y轴的偏移量 阴影的模糊半径 阴影的扩展半径 阴影的颜色 投影的方式
可以是负数 不写是外阴影
inset内阴影
text-shadow: 4px 4px 4px red;
33、transform
rotate(deg)旋转
scale() 0没了 1不变 -1缩小在放大 一个值代表X,Y同时缩放
translate(x,y) 1个值代表X轴
skew(xdeg,ydeg)拉伸,一个值代表X轴
注：触发的先后的顺序：先写的后执行，后写的先执行
34、 变形的注意：
只能作用于块或者行内快
物体本身没有发生变化，盒子模型没有变，他不会引起重排，他只会重绘，性能高
看起来盒子动了，其实位置没有发生变化
盒子模型的大小
内容+padding+border+margin
盒子模型发生变化后：1、整个页面结构需要重新排列，2整个页面需要重新绘制（上色）
重绘重排
35、3D
景深 perspective(800px)
800-1000
假3D
transform：rotate(deg)
rotateX
rotateY
rotateZ 这个就是默认rotate()
rotate3d(x,y,z)
translateX
translateY
translateZ
translate3d()
真正的3d
只让物体出现三维空间
让父级变成3d空间
transform-style:preserve-3d;
36、动画
设置(定义)动画
@keyframes 动画名称{
from{}
to{}
}
@keyframes 动画名称{
1%{}
。。。。
100%{}
}
调用动画
animation [动画名称] [动画执行的时间] [动画播放的次数] [动画的过渡效果] [等待，延迟时间] [最终效果]
1 linear forwards
infinite ease
ease-in
ease-out
37、 线性渐变
linear-gradient(color1,color,.....)
linear-gradient(方向,color1,color,.....)
方向0 从下向上
90 从左到右
180 从上到下
270 从右到左
top
left
bootom
right
top left 不兼容
linear-gradient(方向,color1 大小,color 大小,.....)
径向渐变
background:radial-gradient(red,blue) ;
background:radial-gradient(形状,red,blue) ;
circle 圆形
ellipse 椭圆
background:radial-gradient(形状,red 大小,blue 大小) ;
background:-webkit-radial-gradient(位置,形状,red 大小,blue 大小) ;
位置：center left top...
x y 坐标
不兼容
-webkit- 谷歌 苹果
-moz- 火狐
-ms- 微软
-o- 欧鹏
什么都不加的
background:-webkit-radial-gradient(位置,形状,red 大小,blue 大小) ;
background:-moz-radial-gradient(位置,形状,red 大小,blue 大小) ;
background:-ms-radial-gradient(位置,形状,red 大小,blue 大小) ;
background:-o-radial-gradient(位置,形状,red 大小,blue 大小) ;
background:radial-gradient(位置,形状,red 大小,blue 大小) ;
重复渐变
background:repeating-linear-gradient(red 0px,red,10px,blue 10px, blue 20px);
background:repeating-radial-gradient(red 0px, blue 10px);
38、蒙版
类似背景图
有颜色的地方显示出来，没有颜色的地方不显示
-webkit-mask: url(1.png);
-webkit-mask: 渐变
-webkit-mask-position:x y
文本蒙版
background:渐变|背景图 //文字显示的颜色
-webkit-background-clip:text;
color: rgba(0,0,0,0); //字体颜色透明
39、倒影
-webkit-box-reflect:方向 距离 颜色 ;
below
above
-webkit-box-reflect: below 4px linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.5));
