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

作者 : 开心源码 本文共3919个字,预计阅读时间需要10分钟 发布时间: 2022-05-12 共138人阅读

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

文本域

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));

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 你还没有采使用回溯法来学习?

发表回复