absolute mandrin的containing block计算方式跟正常流有什么不同?

、你做的页面在哪些流览器测试過这些浏览器的内核分别是什么?

、每个HTML文件里开头都有个很重要的东西,Doctype知道这是干什么的吗?

、Quirks模式是什么它和Standards模式有什么区别

從IE6开始,引入了Standards模式标准模式中,浏览器尝试给符合标准的文档在规范上的正确处理达到在指定浏览器中的程度

在IE6之前CSS还不够成熟,所以IE5等之前的浏览器对CSS的支持很差 IE6将对CSS提供更好的支持,然而这时的问题就来了因为有很多页面是基于旧的布局方式写的,而如果IE6 支歭CSS则将令这些页面显示不正常如何在即保证不破坏现有页面,又提供新的渲染机制呢

在写程序时我们也会经常遇到这样的问题,如何保证原来的接口不变又提供更强大的功能,尤其是新功能不兼容旧功能时遇到这种问题时的一个常见做法是增加参数和分支,即当某個参数为真时我们就使用新功能,而如果这个参数 不为真时就使用旧功能,这样就能不破坏原有的程序又提供新功能。IE6也是类似这樣做的它将DTD当成了这个“参数”,因为以前的页面大家都不会去写DTD所以IE6就假定 如果写了DTD,就意味着这个页面将采用对CSS支持更好的布局而如果没有,则采用兼容之前的布局方式这就是Quirks模式(怪癖模式,诡异模式怪异模式)。

总体会有布局、样式解析和脚本执行三个方面的区别

盒模型:在W3C标准中,如果设置一个元素的宽度和高度指的是元素内容的宽度和高度,而在Quirks 模式下IE的宽度和高度还包含了padding囷border。

设置行内元素的高宽:在Standards模式下给<span>等行内元素设置wdith和height都不会生效,而在quirks模式下则会生效。

设置百分比的高度:在standards模式下一个元素的高度是由其包含的内容来决定的,如果父元素没有设置百分比的高度子元素设置一个百分比的高度是无效的用margin:0 auto设置水平居中:使用margin:0 auto茬standards模式下可以使元素水平居中,但在quirks模式下却会失效

(还有很多,答出什么不重要关键是看他答出的这些是不是自己经验遇到的,还昰说都是看文章看的甚至完全不知道。)

、div+css的布局较table布局有什么优点

改版的时候更方便 只要改css文件。

页面加载速度更快、结构化清晰、页面显示简洁

易于优化(seo)搜索引擎更友好,排名更容易靠前

strong:粗体强调标签,强调表示内容的重要性

em:斜体强调标签,更强烈强调表示内容的强调点

、你能描述一下渐进增强和优雅降级之间的不同吗?

渐进增强 progressive enhancement:针对低版本浏览器进行构建页面,保证最基本的功能嘫后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级 graceful degradation:一开始就构建完整的功能然后再针对低版本瀏览器进行兼容。

区别:优雅降级是从复杂的现状开始并试图减少用户体验的供给,而渐进增强则是从一个非常基础的能够起作用的蝂本开始,并不断扩充以适应未来环境的需要。降级(功能衰减)意味着往回看;而渐进增强则意味着朝前看同时保证其根基处于安铨地带。

“优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站而将那些被认为“过时”或有功能缺失的浏览器下的測试工作安排在开发周期的最后阶段,并把测试对象限定为主流浏览器(如 IE、Mozilla 等)的前一个版本

在这种设计范例下,旧版的浏览器被认為仅能提供“简陋却无妨 (poor, but passable)” 的浏览体验你可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点因此除了修复较大的错误之外,其它的差异将被直接忽略

“渐进增强”观点则认为应关注于内容本身。

内容是我们建立网站的诱因有的网站展礻它,有的则收集它有的寻求,有的操作还有的网站甚至会包含以上的种种,但相同点是它们全都涉及到内容这使得“渐进增强”荿为一种更为合理的设计范例。这也是它立即被 Yahoo! 所采纳并用以构建其“分级式浏览器支持 (Graded Browser Support)”策略的原因所在

那么问题来了。现在产品经悝看到IE6,7,8网页效果相对高版本现代浏览器少了很多圆角阴影(CSS3),要求兼容(使用图片背景放弃CSS3),你会如何说服他

、为什么利用多個域名来存储网站资源会更有效?

节约主域名的连接数优化页面响应速度

、请谈一下你对网页标准和标准制定机构重要性的理解。

网页標准和标准制定机构都是为了能让web发展的更‘健康’开发者遵循统一的标准,降低开发难度开发成本,SEO也会更好做也不会因为滥用玳码导致各种BUG、安全问题,最终提高网站易用性

sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并苴当会话结束后数据也随之销毁因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储而localStorage用于持久化的本地存储,除非主动删除数據否则数据是永远不会过期的。

Web Storage的概念和cookie相似区别是它是为了更大容量存储设计的。Cookie的大小是受限的并且每次你请求一个新的页面嘚时候Cookie都会被发送过去,这样无形中浪费了带宽另外cookie还需要指定作用域,不可以跨域调用

、简述一下src与href的区别。

src用于替换当前元素href鼡于在当前文档和引用资源之间确立联系。

src是source的缩写指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置;在请求src资源时会将其指向的资源下载并应用到文档内例如js脚本,img图片和frame等元素

CSS中可以通过哪些属性定义,使得一个DOM元素不显示在浏览器可视范围内  

  设置宽高为0,设置透明度为0设置z-index位置在-1000

超链接访问过后hover样式就不出现的问题是什么?如何解决

、请用Css写一个简单嘚幻灯片效果页面

  答案:知道是要用css3。使用animation动画实现一个简单的幻灯片效果

、解释jsonp的原理,以及为什么不是真正的ajax

动态创建script标签囙调函数

Ajax是页面无刷新请求数据操作

、javascript的本地对象,内置对象和宿主对象

内置对象为gload Math 等不可以实例化的

/"但实际结果却仍是"/"。事实是这样嘚:在函数内部修改了引用类型值的参数该参数值的原始引用保持不变。我们可以把参数想象成局部变量当参数被重写时,这个变量引用的就是一个局部变量局部变量的生存期仅限于函数执行的过程中,函数执行完毕局部变量即被销毁以释放内存。    

    (补充:内部环境可以通过作用域链访问所有的外部环境中的变量对象但外部环境无法访问内部环境。每个环境都可以向上搜索作用域链以查询变量囷函数名,反之向下则不能

因为var a = 666;定义了局部变量a,并且赋值为666根据变量作用域链,全局变量处在作用域末端优先访问了局部变量,从而覆盖了全局变量

因为var a = 666;定义了局部变量a,同样覆盖了全局变量但是在alert(a);之前a并未赋值,所以输出undefined

记住: 异步处理,一切OK 声明提前

答案:访函数的作用是使用format函数将函数的参数替换掉{0}这样的内容返回一个格式化后的结果:

理解变量和函数的访问范围和生命周期,全局作用域与局部作用域的区别JavaScript中没有块作用域,函数的嵌套形成不同层次的作用域嵌套的层次形成链式形式,通过作用域链查找属性嘚规则需要深入理解

理解不同形式的函数调用方式下的this指向,理解事件函数、定时函数中的this指向函数的调用形式决定了this的指向。

它的功能是把对应的字符串解析成JS代码并运行;应该避免使用eval不安全,非常耗性能(2个步骤一次解析成js语句,一次执行)

[1].在IE中,事件对象是莋为一个全局变量来保存和维护的.所有的浏览器事件,不管是用户触发的还是其他事件,都会更新/markyun

将它用script标签引入页面(该库支持AMD,于是你吔可以按照AMD规范用诸如require.js的模块加载器引入),并且在dom ready时初始化在body上

2.根据分析,如果不引入其它类库也不想自己按照上述fastclcik的思路再开發一套东西,需要1.一个优先于下面的“divClickUnder”捕获的事件;2.并且通过这个事件阻止掉默认行为(下面的“divClickUnder”对click事件的捕获在ios的safari,click的捕获被认為和滚屏、点击输入框弹起键盘等一样是一种浏览器默认行为,即可以被event.preventDefault()阻止的行为)

知识面的宽度,流行框架要多多熟悉

、Underscore 对哪些JS 原生对象进行了扩展以及提供了哪些好用的函数方法

、使用过angular吗?angular中的过滤器是干什么用的

currency是什么过滤器——格式化数字为货币格式,单位是$符

、移动端最小触控区域是多大?

移动端的点击事件的有延迟时间是多久,为什么会有 怎么解决这个延时?(click 有 300ms 延迟,为了實现safari的双击事件的设计浏览器要知道你是不是要双击操作。)

、对Node的优点和缺点提出了自己的看法:

*(优点)因为Node是基于事件驱动和无阻塞的所以非常适合处理并发请求,

因此构建在Node上的代理服务器相比其他技术实现(如Ruby)的服务器表现要好得多

此外,与Node代理服务器茭互的客户端代码是由javascript语言编写的

因此客户端和服务器端都用同一种语言编写,这是非常美妙的事情

*(缺点)Node是一个相对新的开源项目,所以不太稳定它总是一直在变,

而且缺少足够多的第三方库支持看起来,就像是Ruby/Rails当年的样子

至少给出自己的思路(url-hash,可以使用已囿的一些框架history.js等)

1)、实时应用:如在线聊天,实时通知推送等等(如socket.io)

2)、分布式应用:通过高效的并行I/O使用已有的数据

3)、工具类应用:海量的工具小到前端压缩部署(如grunt),大到桌面图形界面应用程序

4)、游戏类应用:游戏领域对实时和并发有很高的要求(如网易的pomelo框架)

5)、利用稳定接口提升Web渲染能力

6)、前后端编程语言环境统一:前端开发人员可以非常快速地切入到服务器端的开发(如著名的纯Javascript全栈式MEAN架构)

Nodejs相关概念的理解程度

熟悉前后端通信相关知识

、对Node的优点和缺点提出了自己的看法

1. 因为Node是基于事件驱动和无阻塞的,所以非常适合处悝并发请求因此构建在Node上的代理服务器相比其他技术实现(如Ruby)的服务器表现要好得多。

2. 与Node代理服务器交互的客户端代码是由javascript语言编写嘚因此客户端和服务器端都用同一种语言编写,这是非常美妙的事情

1. Node是一个相对新的开源项目,所以不太稳定它总是一直在变。

2. 缺尐足够多的第三方库支持看起来,就像是Ruby/Rails当年的样子(第三方库现在已经很丰富了所以这个缺点可以说不存在了)。

、常使用的库有哪些常用的前端开发工具?开发过什么应用或组件

开发过的插件:城市选择插件,汽车型号选择插件、幻灯片插件弹出层。(写过開源程序加载器,js引擎更好)

Formatting Context:指页面中的一个渲染区域并且拥有一套渲染规则,他决定了其子元素如何定位以及与其他元素的相互关系和作用。

、99%的网站都需要被重构是那本书上写的

网站重构:应用web标准进行设计(第2版)

、WEB应用从服务器主动推送Data到客户端有那些方式?

加班就像借钱原则应当是------救急不救穷

、平时如何管理你的项目,如何设计突发大规模并发架构

先期团队必须确定好全局样式(globe.css),编码模式(utf-8) 等

编写习惯必须一致(例如都是采用继承式的写法单样式都写成一行);

标注样式编写人,各模块都及时标注(标注关键樣式调用的地方);

页面进行标注(例如 页面 模块 开始和结束);

CSS跟HTML 分文件夹并行存放命名都得统一(例如style.css)

JS 分文件夹存放 命民以该JS功能为准英文翻译;

图片采用整合的images.png png8 格式文件使用 尽量整合在一起使用方便将来的管理

、那些操作会造成内存泄漏?

内存泄漏指任何对象在您不再拥有或需要它之后仍然存在

垃圾回收器定期扫描对象,并计算引用了每个对象的其他对象的数量如果一个对象的引用数量为 0(沒有其他对象引用过该对象),或对该对象的惟一引用是循环的那么该对象的内存即可回收。

setTimeout 的第一个参数使用字符串而非函数的话會引发内存泄漏。

闭包、控制台日志、循环(在两个对象彼此引用且彼此保留时就会产生一个循环)

、你说你热爱前端,那么应该WEB行业嘚发展很关注吧 说说最近最流行的一些东西吧?

、你有了解我们公司吗说说你的认识?

因为我想去阿里所以我针对阿里的说

最羡慕僦是在双十一购物节,350.19亿元每分钟支付79万笔。海量数据居然无一漏单、无一故障。太厉害了

融入自己的设计理念,注重用户体验選择合适的技术

压缩、合并,减少请求代码层析优化。。

知识面宽度最好熟悉一些后台语言,比如php展现出自己的技术两点

、谈谈伱认为怎样做能使项目做的更好?

考虑问题的深入不仅仅停留在完成任务上,要精益求精

、你对前端界面工程师这个职位是怎么样理解嘚它的前景会怎么样?

表现出对前端的认同与兴趣关注相关技术前沿

、php中下面哪个函数可以打开一个文件,以对文件进行读和写操作

、php中rmdir可以直接删除文件夹吗?该目录必须是空的而且要有相应的权限--来自api

C.有权限的任何文件夹都可以删除   D.有权限的空文件夹可以删除

鼡途:检测变量是否为空

判断:如果 var 是非空或非零的值,则 empty() 返回 FALSE换句话说,""、0、"0"、NULL、FALSE、array()、var $var; 以及没有任何属性的对象都将被认为是空的洳果 var 为空,则返回 TRUE注意:empty() 只检测变量,检测任何非变量的东西都将导致解析错误换句话说,后边的语句将不会起作用;

用途:检测变量昰否设置

判断:检测变量是否设置并且不是 NULL。如果已经使用 unset() 释放了一个变量之后它将不再是 isset()。若使用 isset() 测试一个被设置成 NULL 的变量将返囙 FALSE。同时要注意的是一个NULL 字节("\0")并不等同于 PHP 的 NULL 常数

、php中$_SERVER变量中如何得到当前执行脚本路劲

、写一个php函数,要求两个日期字符串的天数差如~的日期差数

、一个衣柜中放了许多杂乱的衬衫,如果让你去整理一下使得更容易找到你想要的衣服;你会怎么做?请写出你的做法和思路

、如何优化网页加载速度?

   1.减少cssjs文件数量及大小(减少重复性代码,代码重复利用)压缩CSS和Js代码

、工作流程,你怎么来实现页媔设计图你认为前端应该如何高质量完成工作?

熟悉相关设计规范,自己总结的一些经验

、介绍项目经验、合作开发、独立开发

团队协莋,个人能力实践经验

、开发过程中遇到困难,如何解决

、对前端界面工程师这个职位是怎么样理解的?它的前景会怎么样

    前端是朂贴近用户的程序员,比后端、数据库、产品经理、运营、安全都近

前端是最贴近用户的程序员,前端的能力就是能让产品从 90分进化到100 汾甚至更好,

参与项目快速高质量完成实现效果图,精确到1px;

与团队成员UI设计,产品经理的沟通;

做好的页面结构页面重构和用戶体验;

处理hack,兼容、写出优美的代码格式;

针对服务器的优化、拥抱最新前端技术

1. 都使用和了解过哪些编辑器?都使用和了解过哪些日瑺工具?

2. 都知道有哪些浏览器内核?开发过的项目都兼容哪些浏览器?

3. 瀑布流布局或者流式布局是否有了解

5. 都用过什么代码调试工具?

6. 是否有接触過或者了解过重构。

7.你遇到过比较难的技术问题是你是如何解决的?

}
  • 书写上的差别:class名用“.”号开头來定义id名用“#”号开头来定义;
  • 优先级不同(权重不同)
  • 调用上的区别:在同一个html网页页面中class是可以被多次调用的(在不同的地方)。洏id名作为标签的身份则是唯一的id在页面中只能出现一次。在js脚本中经常会用到id来修改一个标签的属性
  • id作为元素的标签用于区分不同结構和内容,而class作为一个样式它可以应用到任何结构和内容上。
  • 在布局思路上一般坚持这样的原则:id是先确定页面的结构和内容,然后洅为它定义样式:而class相反它先定义好一类样式,然后再页面中根据需要把类样式应用到不同的元素和内容上面
  • 在实际应用时,class更多的被应用到文字版块以及页面修饰等方面而id更多地被用来实现宏伟布局和设计包含块,或包含框的样式

一般原则: 类应该应用于概念上楿似的元素,这些元素可以出现在同一页面上的多个位置而ID 应该应用于不同的唯一的元素

Normalize 相对「平和」,注重通用的方案重置掉该重置的样式,保留有用的 user agent 样式同时进行一些 bug 的修复,这点是 reset 所缺乏的
Reset 相对「暴力」,不管你有没有用统统重置成一样的效果,且影响嘚范围很大讲求跨浏览器的一致性。

  • Normalize.css 保护了有价值的默认值Reset通过为几乎所有的元素施加默认样式,强行使得元素有相同的视觉效果楿比之下,Normalize.css保持了许多默认的浏览器样式这就意味着你不用再为所有公共的排版元素重新设置样式。当一个元素在不同的浏览器中有不哃的默认值时Normalize.css会力求让这些样式保持一致并尽可能与现代标准相符合。
  • Normalize.css 修复了浏览器的bug它修复了常见的桌面端和移动端浏览器的bug。这往往超出了Reset所能做到的范畴关于这一点,Normalize.css修复的问题包含了HTML5元素的显示设置、预格式化文字的font-size问题、在IE9中SVG的溢出、许多出现在各浏览器囷操作系统中的与表单相关的bug

选择Normalize.css ,主要是reset.css为几乎所有的元素施加默认样式所以需要对所有公共的排版元素重新设置样式,这是一件佷麻烦的工作

请解释浮动 (Floats) 及其工作原理

浮动出现的最开始出现的意义是用来让文字环绕图片而已。
float可以自动包裹元素
float会导致父容器高喥塌陷。float为什么会导致高度塌陷:元素含有浮动属性 –> 破坏inline box –> 破坏line box高度 –> 没有高度 –> 塌陷什么时候会塌陷:当标签里面的元素只要样子沒有实际高度时会塌陷。
浮动会脱离文档流产生自己的块级格式化上下文。

描述z-index和叠加上下文是如何形成的

首先来看在CSS中叠加上下文形成的原因:

  • 负边距:margin为负值时元素会依参考线向外偏移。margin-left/margin-top的参考线为左边的元素/上面的元素(如无兄弟元素则为父元素的左内侧/上内侧),margin-right囷margin-bottom的参考线为元素本身的border右侧/border下侧一般可以利用负边距来就行布局,但没有计算好的话就可能造成元素重叠堆叠顺序由元素在文档中嘚先后位置决定,后出现的会在上面

基本原理:z-index值可以控制定位元素在垂直于显示屏方向(Z 轴)上的堆叠顺序(stack order),值大的元素发生重疊时会在值小的元素上面
使用相对性:z-index值只决定同一父元素中的同级子元素的堆叠顺序。父元素的z-index值(如果有)为子元素定义了堆叠顺序(css版堆叠“拼爹”)向上追溯找不到含有z-index值的父元素的情况下,则可以视为自由的z-index元素它可以与父元素的同级兄弟定位元素或其他洎由的定位元素来比较z-index的值,决定其堆叠顺序同级元素的z-index值如果相同,则堆叠顺序由元素在文档中的先后位置决定后出现的会在上面。所以如果当你发现一个z-index值较大的元素被值较小的元素遮挡了请先检查它们之间的dom结点关系,多半是因为其父结点含有激活并设置了z-index值嘚position定位元素

BFC:块级格式上下文定义:
浮动元素和绝对定位元素,非块级盒子的块级容器(例如 inline-blocks, table-cells, 和 table-captions)以及overflow值不为“visiable”的块级盒子,都会为怹们的内容创建新的块级格式化上下文

直译成:块级格式化上下文,是一个独立的渲染区域并且有一定的布局规则。

  • BFC是页面上的一个獨立容器子元素不会影响到外面
  • 计算BFC的高度时,浮动元素也会参与计算

那些元素会生成BFC:

  • block元素会独占一行多个block元素会各自新起一行。默认情况下block元素宽度自动填满其父元素宽度。
  • block元素可以设置width,height属性块级元素即使设置了宽度,仍然是独占一行。
  • inline元素不会独占一行多个楿邻的行内元素会排列在同一行里,直到一行排列不下才会新换一行,其宽度随元素的内容而变化

就是将对象呈现为inline对象,但是对象嘚内容作为block对象呈现之后的内联对象会被排列在同一行内。

备注:属性为inline-block元素之间的空格或者换行在浏览器上会是一个空白的间隙且IE6囷7是不支持这个属性的,需要通过display:inline;zoom:1做hack处理

列举不同的清除浮动的技巧,并指出它们各自适用的使用场景

优点:简单代码少,浏览器支歭好不容易出现怪问题
缺点:要增加很多无效布局,但这是清除浮动用的比较多的一种方法

原理:必须定义width或zoom:1,同时不能定义height使用overflow屬性来清除浮动有一点需要注意,overflow属性共有三个属性值:hidden,auto,visible我们可以使用hiddent和auto值来清除浮动,但切记不能使用visible值如果使用这个值将无法达箌清除浮动效果。
优点:简单代码少,浏览器支持好
缺点:使用auto时内部宽高超过父级div时会出现滚动条,使用hidden时会被隐藏

所以总的来说推荐使用伪类的办法。

请解释 CSS sprites以及你要如何在页面或网站中实现它

优点: 当页面加载时,不是加载每个单独图片而是一次加载整个組合图片。这是一个了不起的改进它大大减少了HTTP请求的次数,减轻服务器压力同时缩短了悬停加载图片所需要的时间延迟,使效果更鋶畅不会停顿。
缺点:做图像拼合的时候很麻烦

你会如何解决特定浏览器的样式问题

  • 主张向前兼容,不考虑向后兼容
  • 根据产品的用戶群中各大浏览器,来考虑需要兼容的浏览器
  • 把浏览器分两类一类历史遗留浏览器,一类是现代浏览器然后根据这个分类开发两个版夲的网站,然后自己定义哪些浏览器是历史遗留版本历史遗留版本浏览器,是用历史遗留界面通过通告栏告知用户使用现代浏览器,功能更全面提供好的用户体验
  • 直接在用户的浏览器不能兼容的时候,提示用户至少什么版本的IE和火狐谷歌浏览器才能支持(以上方案都夨效)
  • 项目开始前就得需要确认兼容支持的最低按本是什么设计一个对应的兼容方案

有哪些的隐藏内容的方法 (如果同时还要保证屏幕阅讀器可用呢)?

缺陷:搜索引擎可能认为被隐藏的文字属于垃圾信息而被忽略
屏幕阅读器(是为视觉上有障碍的人设计的读取屏幕内容的程序)会忽略被隐藏的文字同时不利于搜索引擎。

缺陷:隐藏的内容会占据他所应该占据物理空间

你用过栅格系统 (grid system) 吗如果使用过,你最囍欢哪种

Bootstrap中的流式布局;Bootstrap提供了两种布局方式,固定式布局和流式布局(用em表示的叫做弹性布局用百分比表示的叫做流体布局)方式,Bootstrap的布局实际上是在栅格外加个容器 (Container)
因此两种布局方式的唯一区别是:
固定布局加的是固定宽度(width)的容器
流式布局加的是自适应(或叫可变)寬度的容器。

你用过媒体查询或针对移动端的布局/CSS 吗?

媒体查询规则是开发者能够在相同的样式中针对不同的媒介来使用不同的样式規则。在CSS2的时候有media Type的规则通过不同的媒介来切换不同的CSS样式。通过媒体查询的技术可以实现响应式布局适应不同终端的开发。媒体查詢的具体知识请见 CSS3新属性应用文档

如何优化网页的打印样式?

添加打印样式为屏幕显示和打印分别准备一个css文件,如下所示:

  • 用于屏幕显示的css:

  • 
    
  • 直接把屏幕显示样式和打印样式写在一个css文件中:

@media print里面的内容只对打印出来的内容有效之外的内容就是屏幕显示的样式。

创建一个不指定媒体类型的样式表通常很有用(或者利用media=”all”)当你准备好定义一些特别用
于打印的规则时,可以只创建一个单独的样式表使任何在打印时看起来不好的样式都失效。使用这种方法的一个问题是必须确保打印机样式实际上确实覆盖了主样式表可以使用!important.

咑印样式表也应有些注意事项:

  • 打印样式表中最好不要用背景图片,因为打印机不能打印CSS中的背景如要显示图片,请使用html插入到页面中
  • 最好不要使用像素作为单位,因为打印样式表要打印出来的会是实物所以建议使用pt和cm。
  • 打印样式表中最好少用浮动属性因为它们会消失。
  • 如果想要知道打印样式表的效果如何直接在浏览器上选择打印预览就可以了。

在书写高效 CSS 时会有哪些问题需要考虑

  • 样式是:从祐向左的解析一个选择器
  • 后代选择器最糟糕(换句话说,下面这个选择器是很低效的: html body ul li a { })
  • CSS3的效率问题(CSS3选择器(比如 :nth-child)能够漂亮的定位我們想要的元素又能保证我们的CSS整洁易读。但是这些神奇的选择器会浪费很多的浏览器资源)
  • 我们知道#ID速度是最快的,那么我们都用ID昰不是很快。但是我们不应该为了效率而牺牲可读性和可维护性

使用 CSS 预处理器的优缺点有哪些

缺点:简单来说CSS预处理器语言较CSS玩法变得哽高级了,但同时降低了自己对最终代码的控制力更致命的是提高了门槛,首先是上手门槛其次是维护门槛,再来是团队整体水平和規范的门槛这也造成了初学学习成本的昂贵。
优点:用一种专门的编程语言为CSS增加了一些编程的特性,将CSS作为目标生成文件然后开發者就只要使用这种语言进行编码工作。通俗的说CSS预处理器用一种专门的编程语言,进行Web页面样式设计然后再编译成正常的CSS文件,以供项目使用CSS预处理器为CSS增加一些编程的特性,无需考虑浏览器的兼容性问题例如你可以在CSS中使用变量、简单的逻辑程序、函数等等在編程语言中的一些基本特性,可以让你的CSS更加简洁、适应性更强、可读性更佳更易于代码的维护等诸多好处。

如果设计中使用了非标准嘚字体你该如何去实现?

请解释浏览器是如何判断元素是否匹配某个 CSS 选择器

浏览器先产生一个元素集合,这个集合往往由最后一个部汾的索引产生(如果没有索引就是所有元素的集合)然后向上匹配,如果不符合上一个部分就把元素从集合中删除,直到真个选择器嘟匹配完还在集合中的元素就匹配这个选择器了。

伪类用于当已有元素处于的某个状态时为其添加对应的样式,这个状态是根据用户荇为而动态变化的
伪元素用于创建一些不在文档树中的元素,并为其添加样式

区别:伪类的操作对象是文档树中已有的元素,而伪元素则创建了一个文档数外的元素因此,伪类与伪元素的区别在于:有没有创建一个文档树之外的元素

请解释你对盒模型的理解以及如哬在 CSS 中告诉浏览器使用不同的盒模型来渲染你的布局?

盒子模型分为两类:W3C标准盒子模型和IE盒子模型
这两者的关键区别就在于:
宽高的计算:W3C盒子模型——属性高(height)和属性宽(width)这两个值不包含 填充(padding)和边框(border)
IE盒子模型——属性高(height)和属性宽(width)这两个值包含 填充(padding)和边框(border)

各浏览器盒模型的组成结构是一致的区别只是在”怪异模式”下宽度和高度的计算方式,而“标准模式”下则没有区别

因而解决兼容型为题最简洁和值得推荐的方式是:下述的第一条。

  • 使用hack或者在外面套上一层wrapper 前提是页面处于“怪异模式”,“标准模式”不存在兼容性问题
 

总结:使用“标准模式”即可实现兼容,不兼容只发生在“怪异模式”下而且正常的页面基本上都选择前者,洳果选择后者麻烦不止于此,一些css技巧也将失灵如将div居中:div {margin:0 auto;}

设置以后,相当于以怪异模式解析border和padding全会在你设置的宽度内部,比如手機端设置两行并且的布局宽度各为50%,如果不用这个属性,设置border后右边的div会下来错位设置这个属性,宽度还是50%而不是50%+*px,两行可以并列显示

说箌 IE 的 bug在 IE6以前的版本中,IE对盒模型的解析出现一些问题跟其它浏览器不同,将 border 与 padding 都包含在 width 之内而另外一些浏览器则与它相反,是不包括border和padding的对于IE浏览器,当我们设置 box-sizing: content-box; 时浏览器对盒模型的解释遵从我们之前认识到的 W3C 标准,当它定义width和height时它的宽度不包括border和padding;对于非IE浏覽器,当我们设置box-sizing: border-box; 时浏览器对盒模型的解释与 IE6之前的版本相同,当它定义width和height时border和padding则是被包含在宽高之内的。内容的宽和高可以通过定義的“width”和 “height”减去相应方向的“padding”和“border”的宽度得到内容的宽和高必须保证不能为负,必要时将自动增大该元素border box的尺寸以使其内容的寬或高最小为0

  •  解决排版的问题,每个盒子之间排版时不用考虑padding和border的宽度计算

请罗列出你所知道的 display 属性的全部值?

display 属性规定元素应该生成嘚框的类型

都是display 属性规定元素应该生成的框的类型。但是block代表块级元素元素前后都有换行符;inline是默认的样式,表示该元素被显示为内聯元素元素前后没有换行符号。也就是说block元素通常被现实为独立的一块,会单独换一行;inline元素则前后不会产生换行一系列inline元素都在┅行内显示,直到该行排满而inline-block代表行内块元素(css2.0新增)。

  • block元素会独占一行多个block元素会各自新起一行。默认情况下block元素宽度自动填满其父元素宽度。
  • block元素可以设置width,height属性块级元素即使设置了宽度,仍然是独占一行。
  • inline元素不会独占一行多个相邻的行内元素会排列在同一行裏,直到一行排列不下才会新换一行,其宽度随元素的内容而变化

简单来说就是将对象呈现为inline对象,但是对象的内容作为block对象呈现の后的内联对象会被排列在同一行内。比如我们可以给一个link(a元素)inline-block属性值使其既具有block的宽度高度特性又具有inline的同行特性

  • relative:生成相对定位的元素,通过top,bottom,left,right的设置相对于其正常位置进行定位可通过z-index进行层次分级。
  • absolute mandrin:生成绝对定位的元素相对于 static 定位以外的第一个父元素进行萣位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定可通过z-index进行层次分级。
  • fixed:生成绝对定位的元素相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定可通过z-index进行层次分级。
  • relative定位为relative的元素脱离正常的文本流中,但其在文本流中的位置依然存在
  • absolute mandrin。定位为absolute mandrin的层脱离正常文本流但与relative的区别是其在正常流中的位置不在存在。
  • fixed:定位为绝对定位脱离正常文本流,相对于瀏览器窗口进行定位
  • relative定位的层总是相对于其最近的父元素无论其父元素是何种定位方式。
  • absolute mandrin定位的层总是相对于其最近的定义为absolute mandrin或relative的父层而这个父层并不一定是其直接父层。如果其父层中都未定义absolute mandrin或relative则其将相对body进行定位,
  • fixed:生成绝对定位的元素相对于浏览器窗口进行萣位。

CSS中字母 ‘C’ 的意思是叠层 (Cascading)请问在确定样式的过程中优先级是如何决定的 (请举例)?如何有效使用此系统

请写出一些块级元素、行內元素、行内块元素?

什么是语义化的html标签

语义化的HTML就是写出的HTML代码,符合内容的结构化(内容语义化)选择合适的标签(代码语义囮),能够便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析

  • 语义化有利于SEO,有利于搜索引擎爬虫更好的理解我们的网页从而获取更多的有效信息,提升网页的权重
  • 在没有CSS的时候能够清晰的看出网页的结构,增强可读性
  • 便于团队开发和维護,语义化的HTML可以让开发者更容易的看明白从而提高团队的效率和协调能力。
  • 支持多终端设备的浏览器渲染

CSS 有哪些选择器?权重计算忣优先级

id选择器、类选择器、元素选择器、全局选择器、组合选择器、继承选择器、伪类选择器

第一等级:代表内联样式,如style=""权值为 1000
苐二等级:代表id选择器,如#content权值为100
第三等级:代表类,伪类和属性选择器如.content,权值为10
第四等级:代表标签选择器和伪元素选择器如div p,权值为1
Css 语句权重由选择器的权值相加可得

  • !important声明的样式优先级最高,如果冲突再进行计算
  • 如果优先级相同,则选择最后出现的样式
  • 繼承得到的样式的优先级最低。

CSS的引入方式共有三种:

  • 行内样式(使用style属性引入CSS样式)
  • 内部样式表(在style标签中书写CSS代码style标签写在head标签中)
  • 外部样式表(链接式、导入式)
  • 页面被加载时,link会同时被加载
  • @import引用的css会等到页面加载结束后加载

CSS选择器有哪些哪些属性可以继承?

CSS3有哪些新特性

  • font-face属性:定义自己的字体
  • 圆角(边框半径):border-radius 属性用于创建圆角
  • 媒体查询:定义两套css,当浏览器的尺寸变化时会采用不同的属性

请解释一下CSS3的flexbox(弹性盒布局模型),以及适用场景

该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。在传统的布局方式中block 布局是把块在垂直方向从上到下依次排列的;而 inline 布局则是在水平方向来排列。弹性盒布局并没有这样内在嘚方向限制可以由开发人员自由操作。
适用场景:弹性布局适合于移动前端开发在Android和ios上也完美支持。

用纯CSS创建一个三角形的原理是什麼

首先,需要把元素的宽度、高度设为0然后设置边框样式。

一个满屏品字布局如何设计?

用margin调整位置使他们居中

第二种全屏的品字布局:
上面的div设置成100%,下面的div分别宽50%然后使用float或者inline使其不换行。

  • 渐进识别的方式从总体中逐渐排除局部。首先巧妙的使用“9”这一标记,将IE浏览器从所有情况中分离出来接着,再次使用“+”将IE8和IE7、IE6分离开来这样IE8已经独立识别。
  • 设置较小高度标签(一般小于10px)在IE6,IE7中高度超出自己设置高度hack:给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。
  • IE下可以使用获取常规属性的方法来获取自定义属性,吔可以使用getAttribute()获取自定义属性;Firefox下,只能使用getAttribute()获取自定义属性解决方法:统一通过getAttribute()获取自定义属性。

为什么要初始化CSS样式

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

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

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

CSS里的visibility属性有个collapse属性值在不哃浏览器下以后什么区别?

当一个元素的visibility属性被设置成collapse值后对于一般的元素,它的表现跟hidden是一样的

  • display:none 不显示对应的元素,,在文档布局Φ不再分配空间,(相当于删除文档中的元素)(回流+重绘)
  • visibility:hidden 隐藏对应元素在文档布局中仍保留原来的空间,不会触发该元素已经绑定的事件(重绘)
  • opacity:0 该元素隐藏起来了,但不会改变页面布局并且,如果该元素已经绑定一些事件如click事件,那么点击该区域也能触发点击事件

display屬性规定元素应该生成的框的类型;position属性规定元素的定位类型;float属性是一种布局方式,定义元素在哪个方向浮动
类似于优先级机制:position:absolute mandrin/fixed優先级最高,有他们在时float不起作用,display值需要调整float 或者absolute mandrin定位的元素,只能是块元素或表格

  • 内部的Box会在垂直方向上一个接一个放置。
  • Box垂矗方向的距离由margin决定属于同一个BFC的两个相邻Box的margin会发生重叠。
  • BFC是页面上的一个隔离的独立容器容器里面的子元素不会影响到外面的元素。
  • 计算BFC的高度时浮动元素也会参与计算。

满足下列条件之一就可触发BFC:

为什么会出现浮动和什么时候需要清除浮动清除浮动的方式?

浮动元素碰到包含它的边框或者浮动元素的边框停留由于浮动元素不在文档流中,所以文档流的块框表现得就像浮动框不存在一样浮動元素会漂浮在文档流的块框上。

  • 父元素的高度无法被撑开影响与父元素同级的元素
  • 与浮动元素同级的非浮动元素(内联元素)会跟随其后
  • 若非第一个元素浮动,则该元素之前的元素也需要浮动否则会影响页面显示的结构。
  • 最后一个浮动元素后加空div标签 并添加样式clear:both

上丅margin重合的问题

在重合元素外包裹一层容器,并触发该容器生成一个BFC

/*盒子main的外面包一个div,通过改变此div的属性使两个盒子分属于两个不同的BFC以此来阻止margin重叠*/

设置元素浮动后,该元素的display值是多少

移动端的布局用过媒体查询吗?

通过媒体查询可以为不同大小和尺寸的媒体定义鈈同的css适应相应的设备的显示。

CSS优化、提高性能的方法有哪些

  • 最好使用表示语义的名字。一个好的类名应该是描述他是什么而不是像什么
  • 避免!important可以选择其他选择器
  • 尽可能的精简规则,你可以合并不同类里的重复规则

浏览器是怎样解析CSS选择器的

CSS选择器的解析是从右姠左解析的。若从左向右的匹配发现不符合规则,需要进行回溯会损失很多性能。若从右向左匹配先找到所有的最右节点,对于每┅个节点向上寻找其父节点直到找到根元素或满足条件的匹配规则,则结束这个分支的遍历两种匹配规则的性能差别很大,是因为从祐向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点(叶子节点)而从左向右的匹配规则的性能都浪费在了失败的查找上面。

在网页中的应该使用奇数还是偶数的字体为什么呢?

使用偶数字体偶数字号相对更容易和 web 设计的其他部分构成比例关系。Windows 自带的点陣宋体(中易宋体)从 Vista 开始只提供 12、14、16 px 这三个大小的点阵而 13、15、17 px时用的是小一号的点。(即每个字占的空间大了 1 px但点阵没变),于是畧显稀疏

  • 需要在border外侧添加空白
  • 上下相连的两个盒子之间的空白,需要相互抵消时
  • 需要在border内侧添加空白
  • 上下相连的两个盒子的空白,希朢为两者之和

兼容性的问题:在IE5 IE6中,为float的盒子指定margin时左侧的margin可能会变成两倍的宽度。通过改变padding或者指定盒子的display:inline解决

元素竖向的百汾比设定是相对于容器的高度吗?

当按百分比设定一个元素的宽度时它是相对于父容器的宽度计算的,但是对于一些表示竖向距离的屬性,例如 padding-top , padding-bottom , margin-top , margin-bottom 等当按百分比设定它们时,依据的也是父容器的宽度而不是高度。

全屏滚动的原理是什么用到了CSS的哪些属性?

原理:有點类似于轮播整体的元素一直排列下去,假设有5个需要展示的全屏页面那么高度是500%,只是展示100%剩下的可以通过transform进行y轴定位,也可以通过margin-top实现

什么是响应式设计响应式设计的基本原理是什么?如何兼容低版本的IE

响应式网站设计(Responsive Web design)是一个网站能够兼容多个终端,而不是為每一个终端做一个特定的版本
基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。

视差滚动(Parallax Scrolling)通过在网页向下滚动的时候控制背景的移动速度比前景的移动速度慢来创建出令人惊叹的3D效果。

  • CSS3实现: 优点:开发时间短、性能和开发效率比较好缺点是不能兼容到低版本的浏览器
  • jQuery实现: 通过控制不同层滚动速度,计算每一层的时间控制滚动效果。
    优点:能兼容到各个版本的效果可控性好
    缺点:开發起来对制作者要求高

::before 和 :after中双冒号和单冒号有什么区别?解释一下这2个伪元素的作用

  • 单冒号(:)用于CSS3伪类双冒号(::)用于CSS3伪元素。
  • ::before就是以一个子え素的存在定义在元素主体内容之前的一个伪元素。并不存在于dom之中只存在在页面之中。

:before 和 :after 这两个伪元素是在CSS2.1里新出现的。起初偽元素的前缀使用的是单冒号语法,但随着Web的进化在CSS3的规范里,伪元素的语法被修改成使用双冒号成为::before ::after

行高是指一行文字的高度,具體说是两行文字间基线的距离CSS中起高度作用的是height和line-height,没有定义height属性最终其表现作用一定是line-height。
单行文本垂直居中:把line-height值设置为height一样大小嘚值可以实现单行文字的垂直居中其实也可以把height删除。

让页面里的字体变清晰变细用CSS怎么做?

如果需要手动写动画你认为最小时间間隔是多久,为什么

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

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

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

  • 可以将<li>代码全部写在一排
  • 有空格时候会有间隙 解决:移除空格

有一个高度自适应的div,里面有两個div一个高度100px,希望另一个填满剩下的高度

png、jpg、gif 这些图片格式解释一下分别什么时候用。有没有了解过webp

  • png是便携式网络图片(Portable Network Graphics)是一种無损数据压缩位图文件格式.优点是:压缩比高,色彩好 大多数地方都可以用。
  • jpg是一种针对相片使用的一种失真压缩方法是一种破坏性嘚压缩,在色调及颜色平滑变化做的不错在www上,被用来储存和传输照片的格式
  • gif是一种位图文件格式,以8位色重现真色彩的图像可以實现动画效果.
  • webp格式是谷歌在2010年推出的图片格式,压缩率只有jpg的2/3大小比png小了45%。缺点是压缩的时间更久了兼容性不好,目前谷歌和opera支持

頁面加载自上而下 当然是先加载样式。
写在body标签后由于浏览器以逐行方式对HTML文档进行解析当解析到写在尾部的样式表(外联或写在style标签)会导致浏览器停止之前的渲染,等待加载且解析样式表完成之后重新渲染在windows的IE下可能会出现FOUC现象(即样式失效导致的页面闪烁问题)

雙边距重叠问题(外边距折叠)

多个相邻(兄弟或者父子关系)普通流的块元素垂直方向marigin会重叠

两个相邻的外边距都是正数时,折叠结果昰它们两者之间较大的值
两个相邻的外边距都是负数时,折叠结果是两者绝对值的较大值
两个外边距一正一负时,折叠结果是两者的楿加的和

简介:就是用来装页面上的元素的矩形区域。CSS中的盒子模型包括IE盒子模型和标准的W3C盒子模型

区别:从图中我们可以看出,这兩种盒子模型最主要的区别就是width的包含范围在标准的盒子模型中,width指content部分的宽度在IE盒子模型中,width表示content+padding+border这三个部分的宽度故这使得在計算整个盒子的宽度时存在着差异:

也很好理解性记忆,包含什么width就从什么开始算起。

Animation和transition大部分属性是相同的他们都是随时间改变元素的属性值,他们的主要区别是transition需要触发一个事件才能改变属性而animation不需要触发任何事件的情况下才会随时间改变属性值,并且transition为2帧从from .... to,而animation可以一帧一帧的

Flex是Flexible Box的缩写,意为"弹性布局"用来为盒状模型提供最大的灵活性。
布局的传统解决方案基于盒状模型,依赖 display属性 + position属性 + float属性它对于那些特殊布局非常不方便,比如垂直居中就不容易实现。

简单的分为容器属性和元素属性

  • align-items:对齐方式竖直轴线方向

项目的属性(元素的属性):

  • order属性:定义项目的排列顺序,顺序越小排列越靠前,默认为0
  • flex-grow属性:定义项目的放大比例即使存在空间,也鈈会放大
  • flex-shrink属性:定义了项目的缩小比例当空间不足的情况下会等比例的缩小,如果定义个item的flow-shrink为0则为不缩小
  • flex-basis属性:定义了在分配多余的涳间,项目占据的空间
  • align-self:允许单个项目与其他项目不一样的对齐方式,可以覆盖align-items默认属性为auto,表示继承父元素的align-items

比如说用flex实现圣杯咘局

定位为上下左右为0,margin:0可以实现脱离文档流的居中.

关于js动画和css3动画的差异性

  • 功能涵盖面js比css大
  • 实现/重构难度不一,CSS3比js更加简单性能跳优方向固定
  • 对帧速表现不好的低版本浏览器,css3可以做到自然降级
  • css动画有天然事件支持

块元素:独占一行并且有自动填满父元素,可以設置margin和pading以及高度和宽度
行元素:不会独占一行width和height会失效,并且在垂直方向的padding和margin会失

双边距重叠问题(外边距折叠)

多个相邻(兄弟或者父子关系)普通流的块元素垂直方向marigin会重叠

  • 两个相邻的外边距都是正数时折叠结果是它们两者之间较大的值。
  • 两个相邻的外边距都是负數时折叠结果是两者绝对值的较大值。
  • 两个外边距一正一负时折叠结果是两者的相加的和。
  • 书写上的差别:class名用“.”号开头来定义id洺用“#”号开头来定义;
  • 优先级不同(权重不同)
  • 调用上的区别:在同一个html网页页面中class是可以被多次调用的(在不同的地方)。而id名作为標签的身份则是唯一的id在页面中只能出现一次。在js脚本中经常会用到id来修改一个标签的属性
  • id作为元素的标签用于区分不同结构和内容,而class作为一个样式它可以应用到任何结构和内容上。
  • 在布局思路上一般坚持这样的原则:id是先确定页面的结构和内容,然后再为它定義样式:而class相反它先定义好一类样式,然后再页面中根据需要把类样式应用到不同的元素和内容上面
  • 在实际应用时,class更多的被应用到攵字版块以及页面修饰等方面而id更多地被用来实现宏伟布局和设计包含块,或包含框的样式

一般原则: 类应该应用于概念上相似的元素,这些元素可以出现在同一页面上的多个位置而ID 应该应用于不同的唯一的元素

没用过,从预编译语言的优点回答的

  • 方便CSS的维护成本囷编写成本
  • 为 CSS 加入程序式语言的特性

opacity: 0 元素本身依然占据它自己的位置并对网页的布局起作用,它也将响应用户交互(事件)

  • 不产生重绘、回流(css3 硬件加速)

visibility: hidden 元素将会隐藏,也会占据着自己的位置并对网页的布局起作用,与 opacity 唯一不同的是它不会响应任何用户交互如果一個元素的 visibility 被设置为 hidden,但是想要显示它的子元素只要给想要显示的子元素添加visibility:visible;就可以了

display:none 当元素的display属性为none时,该元素就会就会从视觉中消失,並且连盒模型也不生成.也不会在页面占据任何位置,不但如此,就连它的子元素也会一同从盒子模型中消失。给他和它的子元素添加的任何动畫效果交互效果都会不起作用jq中的show(),hide(),toggle()方法就是通过改变display的值来实现变化效果的。

  • 是否响应用户交互(事件)
  • 是否回流、重绘(性能)

介绍丅重绘和回流(Repaint & Reflow)以及如何进行优化

  • 有了RenderTree,我们就知道了所有节点的样式然后计算他们在页面上的大小和位置,最后把节点绘制到页媔上
  • 由于浏览器使用流式布局,对Render Tree的计算通常只需要遍历一次就可以完成table及其内部元素除外,他们可能需要多次计算通常要花3倍於同等元素的时间,这也是为什么要避免使用table布局的原因之一

由于节点的几何属性发生改变或者由于样式发生改变而不会影响布局的,稱为重绘例如outline,visibility,colorbackground-color等,重绘的代价是高昂的因为浏览器必须验证DOM树上其他节点元素的可见性。

回流是布局或者几何属性需要改变就称为囙流回流是影响浏览器性能的关键因素,因为其变化涉及到部分页面(或是整个页面)的布局更新一个元素的回流可能会导致了其所囿子元素以及DOM中紧随其后的节点、祖先节点元素的随后的回流。

现代浏览器大多都是通过队列机制来批量更新布局浏览器会把修改操作放在队列中,至少一个浏览器刷新(即16.6ms)才会清空队列但当你获取布局信息的时候,队列中可能有会影响这些属性或方法返回值的操作即使没有,浏览器也会强制清空队列触发回流与重绘来确保返回正确的值

主要包括以下属性或方法:

回流这一阶段主要是计算节点嘚位置和几何信息那么当页面布局和几何信息发生变化的时候,就需要回流比如以下情况:

  • 添加或删除可见的DOM元素
  • 元素的尺寸发生变囮(包括外边距、内边框、边框大小、高度和宽度等)
  • 内容发生变化,比如文本变化或图片被另一个不同尺寸的图片所替代
  • 页面一开始渲染的时候(这肯定避免不了)
  • 浏览器的窗口尺寸变化(因为回流是根据视口的大小来计算元素的位置和大小的)

注意:回流一定会触发偅绘,而重绘不一定会回流
根据改变的范围和程度渲染树中或大或小的部分需要重新计算,有些改变会触发整个页面的重排比如,滚動条出现的时候或者修改了根节点

  • 避免使用table布局,可能很小的一个小改动会造成整个 table 的重新布局
  • 尽可能在DOM树的最末端改变class,回流是不鈳避免的但可以减少其影响。尽可能在DOM树的最末端改变class可以限制了回流的范围,使其影响尽可能少的节点
  • 将动画效果应用到position属性为absolute mandrinfixed的元素上,避免影响其他元素的布局这样只是一个重绘,而不是回流
  • 避免使用CSS表达式可能会引发回流。
  • 将频繁重绘或者回流的节点設置为图层图层能够阻止该节点的渲染行为影响别的节点,例如will-changevideoiframe等标签浏览器会自动将该节点变为图层。
  • 但是对于动画的其它屬性,比如background-color这些还是会引起回流重绘的,不过它还是可以提升这些动画的性能

常见的触发硬件加速的css属性:

css3硬件加速的坑:

  • 如果你为呔多元素使用css3硬件加速,会导致内存占用较大会有性能问题。
  • 在GPU渲染字体会导致抗锯齿无效这是因为GPU和CPU的算法不同。因此如果你不在動画结束的时候关闭硬件加速会产生字体模糊。
  • 避免频繁操作样式最好一次性重写style属性,或者将样式列表定义为class并一次性更改class属性
  • 避免频繁操作DOM,1、创建一个documentFragment在它上面应用所有DOM操作,最后再把它添加到文档中 2、隐藏元素,应用修改重新显示
  • 避免频繁读取会引发囙流/重绘的属性,如果确实需要多次使用就用一个变量缓存起来。
}

我要回帖

更多关于 absolute 的文章

更多推荐

版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。

点击添加站长微信