Front End Developer Questions 前端开发人员问题（二）CSS 后续

问题来源：http://markyun.github.io/2015/Front-end-Developer-Questions/

31、视差滚动效果，如何给每页做不同的动画？（回到顶部，向下滑动要再次出现，和只出现一次分别
怎么做？）
答：视差滚动（Parallax Scrolling）就是这样的效果之一。这种技术通过在网页向下滚动的时候，控

制背景的移动速度比前景的移动速度慢来创建出令人惊叹的3D效果。
原理：（1）CSS3实现
优点：开发时间短、性能和开发效率比较好，缺点是不能兼容到低版本的浏览器
（2）jquery实现
通过控制不同层滚动速度，计算每一层的时间，控制滚动效果。
优点：能兼容到各个版本的，效果可控性好
缺点：开发起来对制作者要求高
（3）插件实现方式
例如：parallax-scrolling，兼容性十分好

32、::before 和 :after中双冒号和单冒号 有什么区别？解释一下这2个伪元素的作用。
答：（1）单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素
在css2之前用的是单冒号，之后css3使用时双冒号。目前除了IE外不兼容双冒号，其他的浏览器兼容双

冒号，建议还是使用单冒号。
（2）：：before就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素。并不存在与dom之

中，只存在在页面之中。同理，after是在主体内容之后显示的。

33、如何修改chrome记住密码后自动填充表单的黄色背景 ？
答：这黄色背景是chrome会默认给自动填充的input表单加上input：-webkit-autofill私有属性
input：-webkit-autofill{
background-color : #FAFFBD ;
background-image : none ;
color : #000
}
第一种情况：input文本框是纯色背景的
可以对input：-webkit-autofill使用足够大的纯色内阴影来覆盖input输入框的黄色背景
input:-webkit-autofill{
-webkit-box-shadow:0 0 0px 1000px white inset;
border：1px solid #ccc ！important;
}
除了chrome默认定义的background-color，background-image，color不能用!important提升其优先级

以外，其他的属性均可使用!important提升其优先级
第二种情况：input文本框使用背景图片
1、图片不复杂可以使用第一种情况解决，纯色内阴影覆盖
2、使用js实现;存在一个问题是使用js方法会导致提交表单的时候无法将value值传过去。
3、使用form标签上的关闭自动填充功能：autocomplete="off"

34、你对line-height是如何理解的？
答：行高是指一行文字的高度，具体说是两行文字间基线的距离。
css中起高度作用的因该是height和line-height，一个没有定义height属性，最终其表现作用一定是

line-height。
单行文本垂直居中：把line-height值设置为height一样大小的值可以实现单行文字的垂直居中，其实

也可以把height删除。
多行文本垂直居中：需要设置display属性为inline-block。

35、设置元素浮动后，该元素的display值是多少？（自动变成display:block）
答：display：block
IE出现双边框的原因：浮动元素的浮动方向与margin的方向一致会出现双边框。
解决bug：（1）给浮动元素添加一个display：inline
（2）给IE6写一个hack，其值为正常值的一半。

36、怎么让Chrome支持小于12px 的文字？
答：方法一：首先取消浏览器自动调整功能。
.classstyle{ -webkit-text-size-adjust:none; font-size:9px; } （现在无效）
方法二：现在可以使用css3里的一个属性：transform：scale（）
p{font-size:10px;-webkit-transform:scale(0.8);}//0.8是缩放比例

37、让页面里的字体变清晰，变细用CSS怎么做？（-webkit-font-smoothing: antialiased;）
答：-webkit-font-smoothing在window系统下没有起作用，但是在IOS设备上起作用
-webkit-font-smoothing：antialiased是最佳的，灰度平滑。

38、font-style属性可以让它赋值为“oblique” oblique是什么意思？
答：在css规范中这么描述的，让一种字体表示为斜体（oblique），如果没有这样样式，就可以使用

italic。oblique是一种倾斜的文字，不是斜体。

39、position:fixed;在android下无效怎么处理？
答：在head头中加入<meta name="viewport" content="width=device-width, initial-scale=1.0,

maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>

40、如果需要手动写动画，你认为最小时间间隔是多久，为什么？（阿里）
答：多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms

41、display:inline-block 什么时候会显示间隙？(携程)类似于13题
答：（1）有空格时候会有间隙 解决：移除空格
（2）margin正值的时候 解决：margin使用负值
（3）使用font-size时候 解决：font-size:0、letter-spacing、word-spacing

42、overflow: scroll时不能平滑滚动的问题怎么处理？
答：（1）高度尺寸不确定的时候，使用：overflow-y：scroll;
（2）高度尺寸确定的，要么没有滚动条，要么直接出现，不会出现跳动。
（3）css3计算calc和vw单位巧妙实现滚动条出现页面不跳动：
.wrap-outer {
margin-left: calc(100vw - 100%);
}
或.wrap-outer {
padding-left: calc(100vw - 100%);
}
首先，.wrap-outer指的是居中定宽主体的父级，如果没有，创建一个
然后，calc是css3的计算
100vw是浏览器的内部宽度，而100%是可用宽度，不含滚动条
calc（100vw-100%）是浏览器的滚动条的宽度

43、有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度。
答：（1）height：calc（100%-100px）
（2）absolute positioning：外层position：relative；
百分百自适应元素 position: absolute; top: 100px; bottom: 0; left: 0

44、png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过webp？
答：（1）png是便携式网络图片（Portable Network Graphics）是一种无损数据压缩位图文件格式，

优点是：压缩比高，色彩好。 大多数地方都可以用。
（2）jpg是一种针对相片使用的一种失真压缩方法，是一种破坏性的压缩，在色调及颜色平滑变化做的

不错。在www上，被用来储存和传输照片的格式。
（3）gif是一种位图文件格式，以8位色重现真色彩的图像。可以实现动画效果时候

webp格式
是谷歌在2010年推出的图片格式，压缩率只有jpg的2/3，大小比png小了45%，缺点是压缩的时间更久了

。兼容性不好，目前谷歌和opera支持。

45、什么是Cookie 隔离？（或者说：请求资源的时候不要让它带cookie怎么做）还是不懂。。。。。
答：Cookie隔离问题，同一个网页,多个RemoteWebDriver会共享同一个Cookie。比如想要并行登陆并执

行操作，这样是不行的。

46、style标签写在body后与body前有什么区别？
答：页面加载自上而下 当然是先加载样式。

47、css属性overflow属性定义溢出元素内容区的内容会如何处理
参数是scroll时候，必会出现滚动条。
参数是auto时候，子元素内容大于父元素时出现滚动条。
参数是visible时候，溢出的内容出现在父元素之外。
参数是hidden时候，溢出隐藏。

48、响应事件
onclick鼠标点击某个对象
onfocus获取焦点
onblur 失去焦点
onmousedown冒个鼠标被按下

49、flash和js通过什么类如何交互?
Flash提供了ExternalInterface接口与JavaScript通信，ExternalInterface有两个方法，call和

addCallback，call的作用是让Flash调用js里的方法，addCallback是用来注册flash函数让js调用。

50、元素的alt和title有什么异同？
这两个属性是有些重复了。在不同浏览器里面表现有些不同。在alt和title同时设置的时候，alt作为

图片的替代文字出现，title是图片的解释文字。

51、html5标签
<audio> 标签定义声音，比如音乐或其他音频流。
<canvas> 标签定义图形，比如图表和其他图像。<canvas> 标签只是图形容器，您必须使用脚本来绘制

图形。 <article>标签定义外部的内容。比如来自一个外部的新闻提供者的一篇新的文章，或者来自

blog 的文本，或者是来自论坛的文本。亦或是来自其他外部源内容。
<menu> 标签定义命令的列表或菜单。<menu> 标签用于上下文菜单、工具栏以及用于列出表单控件和命

令。
command 元素表示用户能够调用的命令。<command> 标签可以定义命令按钮，比如单选按钮、复选框或

按钮。只有当 command 元素位于 menu 元素内时，该元素才是可见的。否则不会显示这个元素，但是

可以用它规定键盘快捷键。

52、浏览器中使用js跨域获取数据
只要 协议 、 域名 、 端口 有任何一个 不同, 都被当作是 不同 的域。

53、有效的javascript变量定义规则
第一个字符必须是一个字母、下划线（_）或一个美元符号（$）；其他字符可以是字母、下划线、美元

符号或数字。

54、javascript系统方法
parseFloat方法：该方法将一个字符串转换成对应的小数
escape方法： 该方法返回对一个字符串编码后的结果字符串
eval方法：该方法将某个参数字符串作为一个JavaScript执行
NaN,即非数值（Not a Number）是一个特殊的数值，这个数值用来表示一个本来要返回数值的操作数未

返回数值的情况（这样就不会抛出错误了）。isNaN（）函数，而任何不能被转换为数值的值都会导致

这个函数返回true。

55、HTML的Doctype和严格模式与混杂模式
对于 HTML 4.01 文档，
包含严格 DTD 的 DOCTYPE 常常导致页面以标准模式呈现。
包含过度 DTD 和 URI 的 DOCTYPE 也导致页面以标准模式呈现。
但是有过度 DTD 而没有 URI 会导致页面以混杂模式呈现。
DOCTYPE 不存在或形式不正确会导致 HTML 和 XHTML 文档以混杂模式呈现。

56、JavaScript中 call和apply的描述
call（）方法和apply（）方法的作用相同，他们的区别在于接收参数的方式不同。在使用call（）方

法时，传递给函数的参数必须逐个列举出来。使用apply（）时，传递给函数的是参数数组。
function add(c, d){
return this.a + this.b + c + d;
}
var o = {a:1, b:3};
add.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16
add.apply(o, [10, 20]); // 1 + 3 + 10 + 20 = 34

57、阐述一下CSS sprities？
它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入

的图片就不会像以前那样一幅一幅地慢慢显示出来了。
利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背

景定位，background-position可以用数字精确的定位出背景图片的位置。
利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这也是CSS Sprites最大

的优点，也是其被广泛传播和应用的主要原因；
CSS Sprites能减少图片的字节，曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字

节总和。所以C错误
解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元

素进行命名，从而提高了网页的制作效率。
更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护

起来更加方便。

下一篇是Front End Developer Questions 前端开发人员问题（三）javascript