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