干货,2016最新的WEB前端开发工程师面试题(CSS部分)2网页前端/web开发工程师

/ 厦门大学经济学院网页前端/web开发工程师 / 2017-04-08

WEB前端开发,WEB前端开发工程师,汇鱼人才

1、li与li之间有看不见的空白间隔是什么原因引起的?有什么解决办法?

行框的排列会受到中间空白(回车/空格)等的影响,因为空格也属于字符,这些空白也会被应用样式,占据空间,所以会有间隔,把字符大小设为0,就没有空格了。

 

2为什么要初始化CSS样式。

- 因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

 

- 当然,初始化样式会对SEO有一定的影响,但鱼和熊掌不可兼得,但力求影响最小的情况下初始化。

 

最简单的初始化方法: * {padding: 0; margin: 0;} (强烈不建议)

 

淘宝的样式初始化代码:

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }

body, button, input, select, textarea { font:12px/1.5tahoma, arial, /5b8b/4f53; }

h1, h2, h3, h4, h5, h6{ font-size:100%; }

address, cite, dfn, em, var { font-style:normal; }

code, kbd, pre, samp { font-family:couriernew, courier, monospace; }

small{ font-size:12px; }

ul, ol { list-style:none; }

a { text-decoration:none; }

a:hover { text-decoration:underline; }

sup { vertical-align:text-top; }

sub{ vertical-align:text-bottom; }

legend { color:#000; }

fieldset, img { border:0; }

button, input, select, textarea { font-size:100%; }

table { border-collapse:collapse; border-spacing:0; }

 

3absolutecontaining block(容器块)计算方式跟正常流有什么不同?

无论属于哪种,都要先找到其祖先元素中最近的 position 值不为 static 的元素,然后再判断:

1、若此元素为 inline 元素,则 containing block 为能够包含这个元素生成的第一个和最后一个 inline box padding box (margin, border 外的区域) 的最小矩形;

2、否则,则由这个祖先元素的 padding box 构成。

如果都找不到,则为 initial containing block

 

补充:

1. static(默认的)/relative:简单说就是它的父元素的内容框(即去掉padding的部分)

2. absolute: 向上找最近的定位为absolute/relative的元素

3. fixed: 它的containing block一律为根元素(html/body),根元素也是initial containing block

 

4css定义的权重

以下是权重的规则:标签的权重为1class的权重为10id的权重为100,以下例子是演示各种定义的权重值:

 

/*权重为1*/

div{

}

/*权重为10*/

.class1{

}

/*权重为100*/

#id1{

}

/*权重为100+1=101*/

#id1 div{

}

/*权重为10+1=11*/

.class1 div{

}

/*权重为10+10+1=21*/

.class1 .class2 div{

}

 

如果权重相同,则最后定义的样式会起作用,但是应该避免这种情况出现

 

5如果需要手动写动画,你认为最小时间间隔是多久,为什么?(阿里)

多数显示器默认频率是60Hz,即1秒刷新60次,所以理论上最小间隔为1/601000ms 16.7ms

 

6display:inline-block 什么时候会显示间隙?(携程)

移除空格、使用margin负值、使用font-size:0letter-spacingword-spacing

 

7什么是Cookie 隔离?(或者说:请求资源的时候不要让它带cookie怎么做)

如果静态文件都放在主域名下,那静态文件请求的时候都带有的cookie的数据提交给server的,非常浪费流量,

所以不如隔离开。

 

因为cookie有域的限制,因此不能跨域提交请求,故使用非主要域名的时候,请求头中就不会带有cookie数据,

这样可以降低请求头的大小,降低请求时间,从而达到降低整体请求延时的目的。

 

同时这种方式不会将cookie传入Web Server,也减少了Web Servercookie的处理分析环节,

提高了webserverhttp请求的解析速度。

 

8什么是CSS 预处理器 / 后处理器?

- 预处理器例如:LESSSassStylus,用来预编译Sassless,增强了css代码的复用性,

  还有层级、mixin、变量、循环、函数等,具有很方便的UI组件模块化开发能力,极大的提高工作效率。

 

- 后处理器例如:PostCSS,通常被视为在完成的样式表中根据CSS规范处理CSS,让其更有效;目前最常做的

  是给CSS属性添加浏览器私有前缀,实现跨浏览器兼容性的问题。

 

想了解更多关于WEB前端开发工程师的内容敬请关注汇鱼人才



公众号,微信

汇鱼网海峡创乐汇
汇鱼网海峡创乐汇