常见问题
行内元素有哪些?块级元素有哪些?CSS的盒模型?
块级元素:div p h1 h2 h3 h4 form ul
行内元素: a b br i span input select
Css盒模型:内容,border ,margin,padding
简述同步和异步的区别
同步是阻塞模式,异步是非阻塞模式。
同步就是指一个进程在执行某个请求的时候,若该请求需要一段时间才能返回信息,那么这个进程将会一直等待下去,直到收到返回信息才继续执行下去;
异步是指进程不需要一直等下去,而是继续执行下面的操作,不管其他进程的状态。当有消息返回时系统会通知进程进行处理,这样可以提高执行的效率。
px和em的区别
px和em都是长度单位,区别是,px的值是固定的,指定是多少就是多少,计算比较容易。em得值不是固定的,并且em会继承父级元素的字体大小。
浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em
写出几种IE6 BUG的解决方法
1.双边距BUG float引起的 使用display
2.3像素问题 使用float引起的 使用dislpay:inline -3px
3.超链接hover 点击后失效 使用正确的书写顺序 link visited hover active
4.Ie z-index问题 给父级添加position:relative
5.Png 透明 使用js代码 改
6.Min-height 最小高度 !Important 解决’
7.select 在ie6下遮盖 使用iframe嵌套
8.为什么没有办法定义1px左右的宽度容器(IE6默认的行高造成的,使用over:hidden,zoom:0.08 line-height:1px)
超链接访问过后hover样式就不出现的问题是什么?如何解决? 被点击访问过的超链接样式不在具有hover和active了,解决方法是改变CSS属性的排列顺序: L-V-H-A(link,visited,hover,active)
9、清除浮动的用法?
1****)添加额外标签
在浮动元素末尾添加一个空的标签例如
,其他标签br等亦可。优点:通俗易懂,容易掌握
缺点:可以想象通过此方法,会添加多少无意义的空标签,有违结构与表现的分离。
2)父元素设置 overflow:hidden
通过设置父元素overflow值设置为hidden;在IE6中还需要触发 hasLayout ,例如 zoom:1;
优点:不存在结构和语义化问题,代码量极少
缺点:内容增多时候容易造成不会自动换行导致内容被隐藏掉,无法显示需要溢出的元素;
**3)父元素设置 overflow:auto **属性
同样IE6需要触发hasLayout,演示和3差不多
优点:不存在结构和语义化问题,代码量极少
缺点:多个嵌套后,firefox某些情况会造成内容全选;IE中 mouseover 造成宽度改变时会出现最外层模块有滚动条等,firefox早期版本会无故产生focus等。
**4)使用:after **伪元素
需要注意的是 :after是伪元素,不是伪类(某些CSS手册里面称之为“伪对象”),很多闭合浮动大全之类的文章都称之为伪类,不过csser要严谨一点,这是一种态度。由于IE6-7不支持:after,使用 zoom:1触发 hasLayout。
优点:结构和语义化完全正确,代码量居中
缺点:复用方式不当会造成代码量增加
10.html元素的id跟class什么区别
id和class是网页中两个通用属性,他们协同工作使整个页面丰富多彩,当我们为一个元素定义样式时,二者都可用,但有区别?
- 1、在css样式表中书写时,id选择符前缀应加"#",class选择符前缀应加"."
- 2、id属性在一个页面中书写时只能使用一次,而class可以反复使用
- 3、id作为元素标签用于区分不同结构和内容,而class作为一个样式,可以应用到任何结构和内容当中去
- 4、布局上的一般原则:id先确定结构和内容再为它定义样式。而class正好相反,是先定义样式,然后在页面中根据不同需求把样式应用到不同结构和内容上
- 5、目前浏览器都允许同一个页面出现多个相同属性值的id,一般情况能正常显示,不过当javascript通过id来控制元素时就会出错
- 6、在实际应用中,class常被用到文字版块和页面修饰上,而id多被用在宏伟布局和设计包含块,或包含框的样式。
** 12. 为什么要使用Div+CSS布局 形式与内容分离 **
- 大大减少页面代码,提高页面浏览速度 结构清晰,有利于SEO 缩短改版时间, 布局更方便 一次设计,多次使用 20. Block元素的特点是什么?哪些元素默认为Block元素 总是在新行上开始; 高度,行高以及顶和底边距都可控制; 宽度缺省是它的容器的100%,除非设定一个宽度。 24、请写出超链接的顺序或者你在初始样式中的链接方法(要求默认无下划线,鼠标经过有下划线)
L-V-H-A (:link 选择器用于选取未被访问的链接。:visited 选择器对指向已访问页面的链接设置样式,:hover 选择器用于设置鼠标指针浮动到链接上时的样式,:active选择器用于设置点击链接时的样式。)
a:link { text-decoration:none; }
a:hover
13.address不是html5新增的标签,而是在HTML4.01中就已经存在了,用于可定义一个地址或者文档作者或拥有者的联系信息。而article、section、time标签是html5新增的语义化标签,具体代表啥含义,咋用法就不多说了,可查看官方文档或一些html5技术论坛的相关说明。
14.JS库:
1. jquery.js
2. zepto.js ----jquery的精简版,专门用于手机上的,但是zepto主体默认是没有触摸组件的,触摸的js需要在其官网额外下载。
3.iscroll.js ---主要用于移动端网站和移动app页面的。常见的上拉刷新,下拉加载它都有,我没有用过,但盆友推荐过
15.前端框架:
1.响应式(UI框架为主):
1(1).Bootstrap:国际品质、名声持久;ui样式和组件,基本的都有,比如按钮、轮播、图片等等。样式中规中矩(但是我们可以自己写CSS改变样式对不对)
1(2). frozenUi:FrozenUI提供的CSS组件是目前QQ会员前端开发组所用的通用样式库。
遵循手Q样式规范,基本样式使用离线包的方式减少请求,并提供快速接入的方案。
FrozenUI提供的一系列JavaScript插件,更优雅地在移动端上呈现更灵动的动画效果。
FrozenJS 是针对移动端开发的 js 组件库,其依赖 zepto.js 和 FronzenUI。
FrozenJS 的所有组件均以 zepto 的插件的形式存在。
1(3). amazeui : 也叫‘妹子UI’,我个人觉得:就ui样式上和组件上来说,中规中矩,常用的都有。但是js和CSS文件体积也不小。就产生时间上来说,不如bootstrap历史悠久,就开发团队上来说,不如前2者有名。我目前完!全!没发现它比bootstrap更好的地方,如果能用bootstrap做的网站,我肯定不会用amazeui来做。
16.session 和cookie区别
Session状态是保存在Server端的文件或者数据库中,每个Session是由Session Id来识别, 为了使客户端能够识别它自己,Session ID必须有Server端来创建然后发送到客户端,当客户端向Server端发送请求时,也需要发送Session ID.
如果Cookie没有用来保存Session ID, 那么Session会在浏览器关闭的时候失效, 或者用户通过连接到其他URL来打断POST或者query string传递,也就是说,session在用户离开这个站点的时候就会失效。
1、session保存在服务器,客户端不知道其中的信息;cookie保存在客户端,服务器能够知道其中的信息。
2、session中保存的是对象,cookie中保存的是字符串。
3、session不能区分路径,同一个用户在访问一个网站期间,所有的session在任何一个地方都可以访问到。而cookie中如果设置了路径参数,那么同一个网站中不同路径下的cookie互相是访问不到的。
17.jquery自带了trim方法:
$.trim(``" abc "``) ;
自己写方法:
function
trim(str) {
return
str.replace(/(^\s+)|(\s+$)/g, ``""``);
}
trim(``" abc "``) ``// =abc
18.append after区别
append() & prepend()实在元素内插入内容(该内容变成该元素的子元素或节点),after() & before()是在元素的外面插入内容(其内容变成元素的兄弟节点)。
三者区别
1. html()取得第一个匹配元素的内容,简单来说就是所取得的标签所包含的所有东西。
2.text():取得所有匹配元素的内容,结果是由所有匹配元素包含的文本内容组合起来的文本
19.disabled问题
disabled 属性的作用是禁用
readonly 属性为只读,但没有禁用
通过表单提交,拥有disabled属性的表单元素处理页面是获取不到其值的,而readonly则可以。
20.get post区别
2. get是把参数数据队列加到提交表单的ACTION属性所指的URL中,值和表单内各个字段一一对应,在URL中可以看到。post是通过HTTP post机制,将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。
3. 对于get方式,服务器端用Request.QueryString获取变量的值,对于post方式,服务器端用Request.Form获取提交的数据。
4. get传送的数据量较小,不能大于2KB。post传送的数据量较大,一般被默认为不受限制。但理论上,IIS4中最大量为80KB,IIS5中为100KB。
5. get安全性非常低,post安全性较高。但是执行效率却比Post方法好。
建议:
1、get方式的安全性较Post方式要差些,包含机密信息的话,建议用Post数据提交方式;
2、在做数据查询时,建议用Get方式;而在做数据添加、修改或删除时,建议用Post方式;
21.CSS Sprites优缺点
优点
1.利用CSS Sprites能很好地减少网页的http请求,从而大大的提高页面的性能,这也是CSS Sprites最大的优点,也是其被广泛传播和应用的主要原因;
2.CSS Sprites能减少图片的字节,曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。
3.解决了网页设计师在图片命名上的困扰,只需对一张集合的图片上命名就可以了,不需要对每一个小元素进行命名,从而提高了网页的制作效率。
4.更换风格方便,只需要在一张或少张图片上修改图片的颜色或样式,整个网页的风格就可以改变。维护起来更加方便。
缺点
诚然CSS Sprites是如此的强大,但是也存在一些不可忽视的缺点,如下:
1.在图片合并的时候,你要把多张图片有序的合理的合并成一张图片,还要留好足够的空间,防止板块内出现不必要的背景;这些还好,最痛苦的是在宽屏,高分辨率的屏幕下的自适应页面,你的图片如果不够宽,很容易出现背景断裂;
2.CSS Sprites在开发的时候比较麻烦,你要通过photoshop或其他工具测量计算每一个背景单元的精确位置,这是针线活,没什么难度,但是很繁琐;幸好腾讯的鬼哥用ADOBE AIR开发了一个CSS Sprites 样式生成工具,虽然还有一些使用上的不灵活,但是已经比photoshop测量来的方便多了,而且样式直接生成,复制,拷贝就OK!
** 22.script标签放置位置**
一般script标签会被放在头部或尾部。头部就是里面,尾部一般指里[4-5]。
将script放在里,浏览器解析HTML,发现script标签时,会先下载完所有这些script,再往下解析其他的HTML。讨厌的是浏览器在下载JS时,是不能多个JS并发一起下载的。不管JS是不来来自同一个host,浏览器最多只能同时下载两个JS,且浏览器下载JS时,就block掉解析其他HTML的工作[1]。
将script放在头部,会让网页内容呈现滞后,导致用户感觉到卡。所以yahoo建议将script放在尾部,这样能加速网页加载。
将script放在尾部的缺点,是浏览器只能先解析完整个HTML页面,再下载JS。而对于一些高度依赖于JS的网页,就会显得慢了。所以将script放在尾部也不是最优解,最优解是一边解析页面,一边下载JS。
所以[2]提出了一种更modern的方式:使用async和defer。80%的现代浏览器都认识async和defer属性[3],这两个属性能让浏览器做到一边下载JS(还是只能同时下载两个JS),一边解析HTML。他的优点不是增加JS的并发下载数量,而是做到下载时不block解析HTML。
- 带async属性的script会异步执行,只要下载完就执行,这会导致script2.js可能先于script1.js执行(如果script2.js比较大,下载慢)。defer就能保证script有序执行,script1.js先执行,script2.js后执行。
弹性盒子
-webkit-align-self: flex-start;
align-self: flex-start;
flex-direction: row | row-reverse | column | column-reverse|rtl
内容对齐(justify-content)属性应用在弹性容器上,把弹性项沿着弹性容器的主轴线(main axis)对齐。justify-content 语法如下:
justify-content: flex-start | flex-end | center | space-between | space-around
order
24.对WEB标准以及W3C的理解与认识
答:标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外 链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件,容易维 护、改版方便,不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性。 ,Javascript的事件流模型都有什么?
- “事件冒泡”:事件开始由最具体的元素接受,然后逐级向上传播
- “事件捕捉”:事件由最不具体的节点先接收,然后逐级向下,一直到最具体的
- “DOM事件流”:三个阶段:事件捕捉,目标阶段,事件冒泡
this是函数运行时自动生成的一个内部对象,只能在函数内部使用,但总指向调用它的对象。通过以下几个例子加深对this的理解。(1)作为函数调用
var name = 'Jenny';
function person() {
return this.name;
}
console.log(person()); //Jenny
上面这个例子在全局作用域中调用person(),此时的调用对象为window,因此this指向window,在window中定义了name变量,因此this.name相当于window.name,为Jenny。(2)作为对象的方法调用
var obj = {
name: 'Danny',
person: function() {
return this.name;
}
};
console.log(obj.person()); //Danny
在这个例子中,person()函数在obj对象中定义,调用时是作为obj对象的方法进行调用,因此此时的this指向obj,obj里面定义了name属性,值为Danny,因此this.name = "Danny"。(3)作为构造函数调用作为构造函数调用和普通函数调用的区别是,构造函数使用new关键字创建一个实例,此时this指向实例对象。
function person() {
return new person.prototype.init();
}
person.prototype = {
init: function() {
return this.name;
},
name: 'Brain'
};
console.log(person().name); //undefined
这是一个比较复杂的例子,涉及到了原型。首先,创建构造函数person,为函数重新定义原型,在原型上定义了两个方法init和name,其中init返回this.name。调用person函数的name属性,发现返回的是undefined,为什么不是Brain呢?我们看,调用person,返回person.prototype.init()的一个实例,假设返回的这个实例名为a,那么此时的this指向的就是a,a作为person.prototype.init()的一个实例,那么所有定义在person.prototype.init()中的方法等都可以被a调用,但是name属性定义在person的原型中,而非init函数中,因此返回undefined。(4)apply和call使用apply()和call()可以改变调用函数的对象,第一个参数为改变后调用这个函数的对象,其中apply()的第二个参数为一个数组,call的第二个参数为每个参数。
function person() {
return this.name;
}
var obj = {
name: 'Jenny',
age: 18
};
console.log(person.apply(obj)); //Jenny
使用apply函数改变了调用person的对象,是在obj对象下面调用person,不再是在window对象下调用了,因此this指向obj,this.name = "Jenny";