随笔杂记---前端问题汇总

主题

养成写代码标注的习惯

1.中“javascript:;”是为了取消a标签的默认事件;

2. 给搜索栏添加图标

(技巧:后面加/favicon.ico可以抓到想要的搜索栏图标)

3.wrapper这个容器很重要,可以调整整体位置;

4.table{border-collapse: collapse;

}可以合并为一个单一的边框

5.margin:0 auto;水平居中 text-align:center;水平居中(针对行内元素)

6.绝对定位的垂直水平有三种,知道元素身高就用.one{

position:absolute;

width:200px;

height:200px;

top:50%;

left:50%;

margin-top:-100px;margin-left:-100px;

transform:translate(-50%,-50%);(不知道身高就用这个)」

background:red;

}

top:0;bottom: 0;left: 0;right: 0;margin: auto;(第三种)

7.为什么诸如RGB值,IP地址等要以255为上限?

最主要的原因是 256(0~255) 正好为一字节,计算机存储的最小单位

8.弹性盒子就像是先弄好鞋盒再装鞋,鞋盒可以自由调节;

9.如何通过点击图片跳转到网页上去?

10.line-height针对于文字.text-align也是,span标签被用来组合文档中的行内元素。

11.a:hover 伪类在原基础上加东西,:link未设置之前的样式,hover鼠标指针的样式,active点击之后的样式。(:visited 已经被开垦过的样式)

为了产生预期的效果,在 CSS 定义中,a:hover 必须位于 a:link 和 a:visited 之后!!

为了产生预期的效果,在 CSS 定义中,a:active 必须位于 a:hover 之后!!

focus和active

:active选择器:当所指定的元素处于激活状态(鼠标在元素上按下还没有松开)时所使用的样式;

:focus选择器:当元素获得光标焦点时使用的样式,主要用在文本框输入文字时使用;

12.尽量不要使用
分割

13.特定需要修改的在特定位置设置class就好.

14.css选择器很重要,html5新增元素

15.required,表单必填的话加一下不填的话无法提交.

16.其他学生

请及时更新自己的身份,暑假期间注册,请选择下一学期的身份©️option后面不能直接接span文本,后面接©️

17.letter-spacing:2px 字间的间距设置;

18.font-weight:100-900(由清淡到浓烈);

19. 标签定义多行的文本输入控件。cols可见宽度,rows可见行数。

20.valign 属性规定单元格中内容的垂直排列方式。

21.checkbox.小学语文

22.input一般加一个label属性,这样点击文本也可以相当于勾了。

23.line-height和height在一起用,而且值相同能起到什么作用?文字能够上下居中 .

24.cursor:pointer放上去有手指图案;

25.relative——absolute;先设置relative在设置absolute,这样absolute的父元素就是设置的relative的元素,而不是页面本身。

absolute是相对于自己最近的父元素来定位的,而relative是相对于自己来定位的.

position:absolute是相对于他的包含块中第一个有position:absolute或者position:relative属性的父级元素,如果都没有,就是相对于body。!!!!

26.line-height设置了一般都会有float跟随;

27.class设计样式比标签id更有效率;

28.vertical-align:middle,应用在百度样式button对齐input,一个很重要的属性;

29.autofocus=“autofocus”,html5新增属性,自动聚焦,应用如打开百度时候看到的。

30.background-size属性规定背景图像的尺寸,第一个值设置宽度,第二个高度;

31.background:url() 2px 2px no-repeat;

2px 2px 针对雪碧图,当然也有background-position属性,可以设置图片在区域里面位置

32.填充一个图像的颜色 display: inline-block;width: 100%;

33.css选择器:after 选元素的内容后面插入内容。可以重叠某些样式,比如百度设置里面的三角样式;content:’.’

34.作为下拉菜单的主力,display:block和display:none

35.order可以设置或检索弹性盒模型对象的子元素出现的順序。312,321,213

36.常识:-moz代表firefox浏览器私有属性 -ms代表IE浏览器私有属性 -webkit代表chrome、safari私有属性

37. box-sizing: border-box;怪异盒子,可以在不扩大里面数据的情况下调节内容,margin 和padding包含在长宽里面,应用如3D魔方li的使用,本来要把wrapper扩大成156px;

38.transform-style:preserve-3d;3D的开头 transform都是以正中心为偏移反转点

39.css3D三要素:1.transform-style:preserve-3d;2.animation:cube(名字)ease-in-out infinite 10s;3.@keyframescube(名字){位置变换}

40. .eyes>div,A>B 表示选择A元素的所有子B元素。

与A B的区别在于,A B选择所有后代元素,而A>B只选择一代。

41.兼容问题,主要是IE问题,1.html5在IE中不支持,Doctype全换成html:xt,诸如header,nav,footer都要改成class .2.有些伪类或者其他功能需要低版本的jquery支持,所以这也需要考虑(IE不支持2.0版本以上的jquery,1.9的可以)

42.双飞翼布局middle要设置width:100%,float:left,有块级元素的作用,又有浮动的感觉。

43. 公共区域用到的 .cf::after{content: ' ‘;

width: 0;

height: 0;

clear: both;

overflow: hidden;}

44.布局技巧——嵌套

45.bootstrap功能是减少工作量,很多样式,是前端less编写的一个框架。

46.jquery和bootstrap先后顺序很重要

47.弹性盒子很重要,在最外面用display:flex;在里面的话用-webkit-flex-grow来适配

48.jquery默认的两种

49.jquery两种绑定方式

50.jquery的代理,onclick,第一个有效果,第二个没效果

动态的绑定(第一个)

51.jquery

自定义事件

52.jquery捕获

53.jquery添加元素

54.jquery删除元素

55.jquery隐藏和显示

56.jquery淡入淡出

57.jquery滑动

58.jquery过滤

59.Math.max

60.简单计算器

61.background: -webkit-gradient(linear,center top,center bottom,from(#ccc), to(#000));

线性渐变

62.js概念杂症-this

总原则:this指的是,调用函数的那个对象。

63.浮动框,标签页切换,换肤器

64.清除浮动伪类法.cf::before,.cf::after{ content:’ ‘;display:block; clear:both;}

65.

66.ajax 的全称是Asynchronous JavaScript and XML,

ajax并非一种新的技术,而是几种原有技术的结合体。它由下列技术组合而成。

1.使用CSS和XHTML来表示。

2. 使用DOM模型来交互和动态显示。

3.使用XMLHttpRequest来和服务器进行异步通信。

4.使用javascript来绑定和调用。

XMLHttpRequest是ajax的核心机制,它是在IE5中首先引入的,是一种支持异步请求的技术。 简单的说,也就是javascript可以及时向服务器提出请求和处理响应,而不阻塞用户。达到无刷新的效果。

XMLHttpRequest是完全用来向服务器发出一个请求的,它的作用也局限于此,但它的作用是整个ajax实现的关键,因为ajax无非是两个过程,发出请求和响应请求。并且它完全是一种客户端的技术。而XMLHttpRequest正是处理了服务器端和客户端通信的问题所以才会如此的重要。

67.cookie和session的区别

共同点:两者都是用来跟踪浏览器用户身份的会话方式;

不同点:cookie数据保存在客户端,而session数据保存在服务器端。

68.a标签喵点,a href=‘#a’ —-id=‘a’

问题汇总

1.造假数据怎么实现,小米官网,因为内容不可能是死的

2.什么情况有缓存,一直访问同一个地址

3.事件绑定和事件委托

事件绑定一般是给未来元素的,dom创建的元素

事件委托是把自己的事情交给别人去做

4.%是比判断更好的值,可以循环

5.bReady一开始是运行的,点击的时候是不运行,等事件结束之后才开始运行,如果再次点击的时候进行判断:

事件没完成之前是false,if(bOk==false) return为了防止狂击点击

6.防止出现点击滚动条跳一下(翻书)body{overflow:hidden;}

7.img{vertical-align:top}写入到默认css

8.非浮动元素居中: margin:0 auto 进行水平居中,浮动元素居中???

9.事件绑定的话不能用return false阻止浏览器默认行为,要用ev.preventDefault();0

10.data-index自定义属性obj.dataset.xxxobj.dataset.xxx=1

obj.classList.add(‘xxx’) obj.classList.remove(‘xxx’)

11.三目运算符,短路运算符要经常用

12.内联外链不清晰定义

13.设置样式的时候需要style,比如错误没有效果的写法oCur.setAttribute(‘width',''+scale*100+'%');

正确写法是oCur.setAttribute(‘style’,'width:'+scale*100+'%');

14.’'+(93-93*scale)+'px' 正确写法+外面加’

’+’(93-93*scale)'+px'错误写法

15.getAttribute正确用法

if(oChange.getAttribute('class')=='icn icn_loop'){

oChange.className='icn icn_one';

}else if(oChange.getAttribute('class')=='icn icn_one'){

oChange.className='icn icn_shuffle';

}else if(oChange.getAttribute('class')=='icn icn_shuffle'){

oChange.className='icn icn_loop';

16.捕鱼达人难点重点

1.var oImg=new Image();

oImg.onload=function (){

gd.drawImage(oImg,

0,198,130,175,

0,0,260,350

);

};

//背景图显示大小,背景图位置,定位位置,放大放小比率

oImg.src='1.jpg';

2.clearRect() context.clearRect(x,y,width,height);

x要清除的矩形左上角的 x 坐标y要清除的矩形左上角的 y 坐标

width要清除的矩形的宽度,以像素计height要清除的矩形的高度,以像素计

3.loadImage(素材名,创建图片,是否加载成功)1 3 2,先传入素材,然后看是否加载成功,成功就创建图片

js是单线程,存的越多越慢

4.优化问题—数组问题

arrBullet.splice(i,1) 删除的元素返回之后想获取想要的下标,需要i- -;

5.一开始就被干掉了

websocket webWorker websql

mongoDB

ionic

17.两个匿名函数不相等;因为函数的本质是每次都new一个出来;

你可能感兴趣的:(随笔杂记---前端问题汇总)