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

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

3一、视差滚动效果，如何给每页作不一样的动画？（回到顶部，向下滑动要再次出现，和只出现一次分别
怎么作？）
答：视差滚动（Parallax Scrolling）就是这样的效果之一。这种技术经过在网页向下滚动的时候，控
制背景的移动速度比前景的移动速度慢来建立出使人惊叹的3D效果。
原理：（1）CSS3实现
优势：开发时间短、性能和开发效率比较好，缺点是不能兼容到低版本的浏览器
（2）jquery实现
经过控制不一样层滚动速度，计算每一层的时间，控制滚动效果。
优势：能兼容到各个版本的，效果可控性好
缺点：开发起来对制做者要求高
（3）插件实现方式
例如：parallax-scrolling，兼容性十分好

3二、::before 和 :after中双冒号和单冒号 有什么区别？解释一下这2个伪元素的做用。
答：（1）单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素
在css2以前用的是单冒号，以后css3使用时双冒号。目前除了IE外不兼容双冒号，其余的浏览器兼容双
冒号，建议仍是使用单冒号。
（2）：：before就是以一个子元素的存在，定义在元素主体内容以前的一个伪元素。并不存在与dom之
中，只存在在页面之中。同理，after是在主体内容以后显示的。

3三、如何修改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文本框使用背景图片
一、图片不复杂可使用第一种状况解决，纯色内阴影覆盖
二、使用js实现;存在一个问题是使用js方法会致使提交表单的时候没法将value值传过去。
三、使用form标签上的关闭自动填充功能：autocomplete="off"

3四、你对line-height是如何理解的？
答：行高是指一行文字的高度，具体说是两行文字间基线的距离。
css中起高度做用的因该是height和line-height，一个没有定义height属性，最终其表现做用必定是
line-height。
单行文本垂直居中：把line-height值设置为height同样大小的值能够实现单行文字的垂直居中，其实
也能够把height删除。
多行文本垂直居中：须要设置display属性为inline-block。

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

3六、怎么让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是缩放比例

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

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

3九、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

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

4二、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%）是浏览器的滚动条的宽度

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

4四、png、jpg、gif 这些图片格式解释一下，分别何时用。有没有了解过webp？
答：（1）png是便携式网络图片（Portable Network Graphics）是一种无损数据压缩位图文件格式，
优势是：压缩比高，色彩好。 大多数地方均可以用。
（2）jpg是一种针对相片使用的一种失真压缩方法，是一种破坏性的压缩，在色调及颜色平滑变化作的
不错。在www上，被用来储存和传输照片的格式。
（3）gif是一种位图文件格式，以8位色重现真色彩的图像。能够实现动画效果时候

webp格式
是谷歌在2010年推出的图片格式，压缩率只有jpg的2/3，大小比png小了45%，缺点是压缩的时间更久了
。兼容性很差，目前谷歌和opera支持。

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

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

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

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

4九、flash和js经过什么类如何交互?
Flash提供了ExternalInterface接口与JavaScript通讯，ExternalInterface有两个方法，call和
addCallback，call的做用是让Flash调用js里的方法，addCallback是用来注册flash函数让js调用。

50、元素的alt和title有什么异同？
这两个属性是有些重复了。在不一样浏览器里面表现有些不一样。在alt和title同时设置的时候，alt做为
图片的替代文字出现，title是图片的解释文字。

5一、html5标签
<audio> 标签订义声音，好比音乐或其余音频流。
<canvas> 标签订义图形，好比图表和其余图像。<canvas> 标签只是图形容器，您必须使用脚原本绘制
图形。 <article>标签订义外部的内容。好比来自一个外部的新闻提供者的一篇新的文章，或者来自
blog 的文本，或者是来自论坛的文本。亦或是来自其余外部源内容。
<menu> 标签订义命令的列表或菜单。<menu> 标签用于上下文菜单、工具栏以及用于列出表单控件和命
令。
command 元素表示用户可以调用的命令。<command> 标签能够定义命令按钮，好比单选按钮、复选框或
按钮。只有当 command 元素位于 menu 元素内时，该元素才是可见的。不然不会显示这个元素，可是
能够用它规定键盘快捷键。

5二、浏览器中使用js跨域获取数据
只要 协议 、 域名 、 端口 有任何一个 不一样, 都被看成是 不一样 的域。

5三、有效的javascript变量定义规则
第一个字符必须是一个字母、下划线（_）或一个美圆符号（$）；其余字符能够是字母、下划线、美圆
符号或数字。

5四、javascript系统方法
parseFloat方法：该方法将一个字符串转换成对应的小数
escape方法： 该方法返回对一个字符串编码后的结果字符串
eval方法：该方法将某个参数字符串做为一个JavaScript执行
NaN,即非数值（Not a Number）是一个特殊的数值，这个数值用来表示一个原本要返回数值的操做数未
返回数值的状况（这样就不会抛出错误了）。isNaN（）函数，而任何不能被转换为数值的值都会致使
这个函数返回true。

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

5六、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

5七、阐述一下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