你还没有采使用回溯法来学习？

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表单

<strong>默认值</strong>文本域

placeholder提醒文字

12、

13、

通配符<标签(伪元素)<class(属性，伪类)<id<行间<important

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、 BFC block 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));