• 前端开发人员问题三


    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

    文中有错误的地方希望指出,共同进步
  • 相关阅读:
    排序算法(06. 快速排序)
    webpack4.0(02.本地服务和html-webpack-plugin插件)
    HTTP状态码整理
    数据结构与算法考察的知识点
    webpack4.0(01.基础配置和初识)
    数据结构与算法简记--Trie树
    数据结构与算法简记--字符串匹配
    数据结构与算法简记--堆和堆排序
    推荐MarkDown编辑工具Typora--文本画流程图示例
    数据结构与算法简记--二叉树
  • 原文地址:https://www.cnblogs.com/wulinzi/p/8432505.html
Copyright © 2020-2023  润新知