自己总结的html+css试题

今天药忘吃喽~ 2022-06-07 13:47 3122阅读 0赞

**1.Doctype作用? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?**

（1）<!DOCTYPE> 声明位于文档中的最前面，处于 <html> 标签之前。告知浏览器的解析器，用什么文档类型 规范来解析这个文档。

（2）严格模式的排版和 JS 运作模式是以该浏览器支持的最高标准运行。

（3）在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。

（4）DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

**2.行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？**

（1）CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，

比如div默认display属性值为“block”，成为“块级”元素；

span默认display属性值为“inline”，是“行内”元素。

（2）行内元素有：a b span input select strong（强调的语气）

块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p

（3）知名的空元素：

**3.CSS的盒子模型有几种？各有什么特点？**

（1）两种，IE 盒子模型、标准 W3C 盒子模型；

（2）标准盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border).

IE盒模型：content部分包含了 border 和 pading;

**4.link 和@import 的区别是?**

（1）link属于HTML标签，而@import是CSS提供的;

（2）页面被加载的时，link会同时被加载，而@import会等CSS被加载完再加载;

（3）import只在IE5以上才能识别，而link是HTML标签，无兼容问题;

（4）link方式的样式的权重 高于@import的权重.

**5.CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新增伪类有那些？**

1.id选择器（ \# myid）

2.类选择器（.myclassname）

3.标签选择器（div, h1, p）

4.相邻选择器（h1 + p）

5.子选择器（ul < li）

6.后代选择器（li a）

7.通配符选择器（ \* ）

8.属性选择器（a\[rel = "external"\]）

9.伪类选择器（a: hover, li: nth - child）

可继承： font-size font-family color, UL LI DL DD DT;

不可继承 ：border padding margin width height ;

优先级就近原则，样式定义最近者为准;

载入样式以最后载入的定位为准;

优先级为:

!important >  id > class > tag

important 比内联优先级高

CSS3新增伪类举例：

p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。

p:last-of-type  选择属于其父元素的最后 <p> 元素的每个 <p> 元素。

p:only-of-type  选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。

p:only-child    选择属于其父元素的唯一子元素的每个 <p> 元素。

p:nth-child(2)  选择属于其父元素的第二个子元素的每个 <p> 元素。

:enabled、:disabled 控制表单控件的禁用状态。

:checked，单选框或复选框被选中。

**6.如何居中div,如何居中一个浮动元素?**

给div设置一个宽度，然后添加margin:0 auto属性

div\{width:200px;margin:0 auto;\}

居中一个浮动元素

.div \{

Width:500px ; height:300px;//高度可以不设

Margin: -150px 0 0 -250px;

position:relative;相对定位

background-color:pink;//方便看效果

left:50%;

top:50%;

**7.浏览器的内核分别是什么? 经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧 ？**

1. IE浏览器的内核Trident、 Mozilla的Gecko、google的WebKit、Opera内核Presto；

2.浏览器默认的margin和padding不同。解决方案是加一个全局的 \*\{margin:0;padding:0;\}来统一。

IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin 比设置的大。

浮动ie产生的双倍距离 \#box\{ float:left; width:10px; margin:0 0 0 100px;\}

这种情况之下IE会产生20px的距离，解决方案是在float的标签样式控制中加入 — —\_display:inline;将其转化为行内属性。(\_这个符号只有ie6会识别)渐进识别的方式，从总体中逐渐排除局部。

3.首先，巧妙的使用“\\9”这一标记，将IE游览器从所有情况中分离出来。

接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。

.bb\{

background-color:\#f1ee18;/\*所有识别\*/

.background-color:\#00deff\\9; /\*IE6、7、8识别\*/

+background-color:\#a200ff;/\*IE6、7识别\*/

\_background-color:\#1e0bd1;/\*IE6识别\*/

4.IE下,可以使用获取常规属性的方法来获取自定义属性,

解决方法:统一通过getAttribute()获取自定义属性.

IE下,even对象有x,y属性,但是没有pageX,pageY属性;

Firefox下,event对象有pageX,pageY属性,但是没有x,y属性.

（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。

Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,

可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决.

超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不在具有hover  和active了解决方法是改变CSS属性的排列顺序:

L-V-H-A :  a:link \{\} a:visited \{\} a:hover \{\} a:active \{\}

**8.css属性那些有继承性？哪些没有？**

有继承性的属性：color ,font-size,font-weight

没有继承性的属性：border,width,height

**9.如果孩子都为浮动，父类会没有高度，如何解决**

解决方法：(1)给父类设置相应的高度

(2)创建一个孩子对象，设置清除浮动

(3) 设置父类为overflow：hidden

(4)用before和after动态添加

**10.visibility和display 的隐藏有什么区别？**

display隐藏对象，会清空面积；visibility隐藏对象还会占有以前的面积

**11.伪类的写作顺序？**

hover必须在link、visited之后，active必须在hover之后

Link,visited,hover,active

**12.border和outline的区别**

1.outlinte显示在border之外

2.border会占像素，outline没有面积

3.outline低版本浏览器不支持

**13.iframe的缺点？如何解决？**

1.iframe会影响页面的onload（加载）事件

2.iframe和主页共享连接池，而浏览器对相同域的链接有限制，所以影响页面的并行加载

解决：使用时通过js动态调用给iframe添加src路径，可以避免以上两个问题

**14.html5\\CSS3有哪些新特性、移除了那些元素？**

1.语意化更好的内容元素，比如 article、footer、header、nav

表单控件，date、time、email、url

CSS3实现圆角，阴影，对文字加特效，增加了更多的CSS选择器， 多背景

2.center，font,u，frame，frameset

**15.你怎么来实现页面设计图，你认为前端应该如何高质量完成工作? 一个满屏 品 字布局 如何设计？**

1.首先划分成头部、body、脚部.......

实现效果图是最基本的工作，精确到2px；

与设计师，产品经理的沟通和项目的参与

做好的页面结构，页面重构和用户体验

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

针对服务器的优化、支持 HTML5标签。

<style>

\*\{padding: 0;margin: 0;\}

.header\{width: 100%;height: 300px;background-color: red;\}

.left,.right\{width: 50%;float: left;height: 300px;\}

.left\{background-color: green;\}

.right\{background-color: yellow;\}

</style>

**16.常使用的库有哪些？常用的前端开发工具？开发过什么应用或组件？**

1.使用率较高的框架有jQuery、YUI、Prototype、Dojo、Ext.js、Mootools等。尤其是jQuery，超过91%。

轻量级框架有Modernizr、underscore.js、backbone.js、Raphael.js等。

（理解这些框架的功能、性能、设计原理）

2. WebStorm 、Eclipse、IETester、Photoshop、PhpStorm、MySQL。

3。 城市选择插件，汽车型号选择插件、幻灯片插件。弹出层。（写过开源程序，加载器，js引擎更好）

**17.列出display的值，说明他们的作用。position的值， relative和absolute定位原点是？**

1.block 象块类型元素一样显示。

none 缺省值。向行内元素类型一样显示。

inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。

list-item 象块类型元素一样显示，并添加样式列表标记。

2.absolute生成绝对定位的元素，相对于static以外的父元素进行定位。

fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。

relative生成相对定位的元素，相对于其正常位置进行定位。

static  默认值。没有定位，忽略top, bottom, left, right声明。

inherit 规定从父元素继承 position 属性的值。

**18.页面重构怎么操作？**

编写 CSS、让页面结构更合理化，提升用户体验，实现良好的页面效果和提升性能。

**19.如何理解语义化？**

html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；

在没有样式CCS情况下也以一种文档格式显示，并且是容易阅读的。

搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。

使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

**20.为什么要初始化CSS样式？如何初始化？**

1.因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。

2.最简单的初始化方法就是： \* \{padding: 0; margin: 0;\} （不建议）

淘宝的样式初始化：

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td \{ margin:0; padding:0; \}

body, button, input, select, textarea \{ font:12px/1.5tahoma, arial, \\5b8b\\4f53; \}

h1, h2, h3, h4, h5, h6\{ font-size:100%; \}

address, cite, dfn, em, var \{ font-style:normal; \}

code, kbd, pre, samp \{ font-family:couriernew, courier, monospace; \}

small\{ font-size:12px; \}

ul, ol \{ list-style:none; \}

a \{ text-decoration:none; \}

a:hover \{ text-decoration:underline; \}

sup \{ vertical-align:text-top; \}

sub\{ vertical-align:text-bottom; \}

legend \{ color:\#000; \}

fieldset, img \{ border:0; \}

button, input, select, textarea \{ font-size:100%; \}

table \{ border-collapse:collapse; border-spacing:0; \}

Img\{border:none\}

**21.描述一段语义的html代码吧**

HTML5中新增加的很多标签（如：<article>、<nav>、<header>和<footer>等）就是基于语义化设计原则

例如：<div id="header">

<h2>专注Web前端技术< /h2>

</div>

**22.语义 HTML 具有哪些特性？**

文字包裹在元素中，用以反映内容。例如：

段落包含在 <p> 元素中。

顺序表包含在<ol>元素中。

从其他来源引用的大型文字块包含在<blockquote>元素中。

HTML 元素不能用作语义用途以外的其他目的。例如：

<h1>包含标题，但并非用于放大文本。

<blockquote>包含大段引述，但并非用于文本缩进。

空白段落元素 ( <p></p> ) 并非用于跳行。

文本并不直接包含任何样式信息。例如：

不使用 <font> 或 <center> 等格式标记。

类或 ID 中不引用颜色或位置。

**23.什么叫优雅降级和渐进增强？**

优雅降级：Web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题，针对不同版本的IE的hack实践过优雅降级了,为那些无法支持功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降级体验却不至于完全失效.

渐进增强：从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能,向页面增加无害于基础浏览器的额外样式和功能的。当浏览器支持时，它们会自动地呈现出来并发挥作用。

**24.web标准网站有那些优点？**

（1） Web标准网站结构和布局分离，使网站的访问和维护更加容易

（2） Web标准网站结构，布局以及页面访问都标准化，使网站能在更多的web标准设备中访问，兼容性更好

（3） Web标准网站语义化更好，语义化的XHTML不仅对用户友好，对搜索引擎也友好。

**25.<img>中alt和tittle的区别?**

alt：图片显示不出来了就提示alt

title：鼠标划过图片显示的提示

**26.你是如何优化网页的？**

1.在书写HTML代码的时候，遵循标签语义化的要求，根据标签的语义性进行选择，如布局使用div、标题使用h系列标签、段落使用p标签等。

2.HTML代码要合理嵌套，一般情况下，行元素当中不能包含块元素，除了段落、标题类型的块元素当中，既能够包含块元素，也能够包含行元素，而段落或标题类的块元素只能够包含文字或行元素。table元素只能够直接包含thead、tbody、tfoot、caption等元素；ul/ol元素只能直接包含li元素；dl元素当中只能直接包含dt和dd元素；form表单当中只能直接包含filedset和legend，不能直接包含input元素。

3.使用外部引入样式表和JS行为代码，实现结构、样式和行为的相分离，降低模块间的耦合度。

4.CSS规则命名中，一律采用小写加中划线的方式，不使用下划线或大写字母，命名采用更简明有语义的英文单词进行组合，进行合理的缩写

5.CSS代码的书写顺序遵循CSS样式的渲染顺序：显示属性-自身属性-文本属性-其他

6.在上线之前进行CSS文件压缩

7.在CSS代码当中，尽量的规避掉不同浏览器的兼容问题，如果实在避免不了，也需要进行合理解决，同时尽可能的少使用hack

8.尽量不在代码中出现没有意义的空标签，对于可以采用空标签清除浮动的代码，可以用其他方法解决，如after伪元素

9.使用背景图合并技术，将多张背景图合并到一张图片上，从而降低页面与服务器之间的请求次数。

10.权衡嵌套层级以及扩展性等多个方面后，在适当位置使用三层嵌套技术。

11.合理的填写html文件中的title、meta等内容，合理书写a标签的title、img标签的title和alt，提升网站的SEO

12.制作网站中的404页面

13.合理控制JS文件的引入位置，提升网站的加载速度。

14.避免class与id重名，对于id名遵循小驼峰命名法。

15.利用对象命名空间、匿名函数、协同命名等方法，尽量避免团队合作时产生的命名冲突。

16.合理利用window.onload或jquery中的$(document).ready，尽量避免全局作用域被污染。

17.合理书写代码注释

18.对于功能类似的代码，进行函数的封装，可以使用面向对象的书写方法，提升代码的复用性和扩展性。

19.合理利用图片预加载和图片懒加载。

20.在DOM节点相关操作上进行优化，如利用变量存储查找到的元素，从而防止每次查找时进行页面重绘、利用文档碎片等。

21.jQuery等插件的合理引用，处理常见的浏览器兼容问题，在标签查找方式上，采用更快的查找方法，如id>标签名>类名的查找。

22.对于AJAX的异步加载，提供加载的相关提醒。

23.在js代码上线之前，后台人员进行相应的JS代码压缩**。**

**27.除了前端以外还了解什么其它技术么？你最最厉害的技能是什么？**

C，c++，java，php，asp等

**28.平时如何管理你的项目，如何设计突发大规模并发架构**

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

编写习惯必须一致（例如都是采用继承式的写法，单样式都写成一行）；

标注样式编写人，各模块都及时标注（标注关键样式调用的地方）；

页面进行标注（例如 页面 模块 开始和结束）；

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

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

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

**29.你说你热爱前端，那么应该WEB行业的发展很关注吧？ 说说最近最流行的一些东西吧**

Node.js、Mongodb、npmM、MVVM、MEAN

**30.移动端（比如：Android IOS）怎么做好用户体验？**

提高浏览器访问速度，做响应式布局，内容要简单明了，做网页语义化和优化等

**31.xhtml和html有什么区别？**

HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言  
最主要的不同：  
XHTML 元素必须被正确地嵌套。  
XHTML 元素必须被关闭。  
标签名必须用小写字母。  
XHTML 文档必须拥有根元素。

**32.解释css sprites，如何使用。**  
Css 精灵 把一堆小的图片整合到一张大的图片上，减轻服务器对图片的请求数量

**33.清除浮动的几种方式，各自的优缺点**

1.使用空标签清除浮动 clear:both，会增加无意义的标签  
2.使用overflow:auto，空标签元素清除浮动,使用zoom:1用于兼容IE  
3.是用afert伪元素清除浮动(用于非IE浏览器)

4.使用overflow:hidden，IE低版本不兼容

**34.一个网站制作完成之后，在发布之前，我们会对页面进行测试，测试内容主要包括哪几个方面?**

页面效果是否美观  
链接是否完好  
页面功能（如验证、交互等）是否正确  
测试不同浏览器的兼容性

**35.你都有用过什么布局？瀑布流布局或者流式布局是否有了解？**  
定宽布局：浮动法，定位法，转化表格法

变宽布局：等比变宽，单列固定，优化浮动

瀑布流：多列布局流布局：伸缩盒子旧（弹性盒模型），伸缩盒子新（流布局）

36.**是否有接你使用那些版本管理系统，比如Git，SVN等？**

用过，svn是版本控制器，可以管理代码，不让代码错误覆盖

**37.你常用的开发环境是怎样的？比如操作系统，文本编辑器，浏览器，及其他工具等**

操作系统：xp，window7，window8，window10

硬件环境：4G内存，500G硬盘，i5cpu

文本编辑器：WebStorm，PhpStorm，myeclipse

浏览器：IE，火狐，谷歌，苹果，欧朋

其他工具:Photoshop，IETester，MySQL，截图工具

**38.你能描述一下你制作一个网页的工作流程吗？**

1.美工做图片

2.收集资料（文字、图片、音频、视屏）

3.网上搜集调查

4.色彩搭配，版块布局，风格主题

5.定尺寸，画版块，填充主要内容

6.定义页面内容

7.用户的体验性，动画的制作

8.用户审核

**39.你更喜欢在哪个浏览器下进行开发？**

IE：属于傻瓜式兼容

谷歌：兼用css3属性比较多

**40.你对前端界面工程师这个职位是怎么样理解的？它的前景会怎么样？**

说出前端的工作内容，畅想未来工作

**41.谈谈你认为怎样做能是项目做的更好？**

例如：

了解客户需求

有很好的设计流程

掌握web前端知识

调整页面兼容性，或者设置响应式页面

优化网页，提高加载速度

设置友好的客户体验性等

**42.如何提高用户的体验性？**

提高浏览器加载速度

能让用户点击的，就不要设计敲键盘

设置友情链接，可以访问外部网站

设置站内搜索，可以关键字查询

页面之间有很好的关联性

可以设置论坛或在线交流问用户解答等

1、在视觉上：设计风格符合目标客户的审美习惯，保持整个站点的视觉一致性，针对目标客户的审美 喜好，进行分析，从而确定网站的总体设计风格。可以从网站LOGO、页面布局、页面色彩、页面大小 、图标使用、广告位、动画效果等方面呈现给用户视听上的体验与舒适性。

2、在操作上：表单提交、按钮设置、点击提示、错误提示、意见反馈、在线搜索、新开窗口、等方面 呈现给用户操作上的体验，强调易用/可用性。

3、在体验上：会员交流、售后反馈、邮件/短信问候、网站地图等方面呈现给用户心理上的体验，强调 友好性

4、在信任感上：联系方式准确有效的地址、电话等联系方式，便于查找。从服务热线、法律声明、帮 助中心、公司介绍、服务保障等方面呈现给用户的信任体验，强调可靠性。

做好用户体验照顾目标受众的需要，分析他们的需要和行业特征。用户体验做好了，客户的粘性就增加了，也会给企业带来利益。

**43.一个页面上有大量的图片，加载很慢，你有哪些方法优化这些图片的加载**

1、使用Sprites图片技术

它将一个页面涉及到的所有零星图片都包含到一张大图中去，然后利用CSS技术展现出来。这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了，可以减少了整个网页的图片大小，并且利用CSSSprites能很好地减少网页的http请求，从而大大的提高页面的性能。

2、压缩文本和图片

压缩技术如gzip可以有效减少页面加载的时间。压缩率都可以在大小70%左右。虽然文本压缩用得比较多，但图片的压缩就比较随意，很多都是直接上传，其实还有很大的压缩空间。

3、延迟显示可见区域外的内容

为了确保用户可以更快地看见可见区域的网页可以延迟加载或展现可见区域外的内容，为了避免页面变形，可以使用占位符标签制定正确的高度和宽度。比如WP的jQueryImage LazyLoad插件就可以在用户停留在第一屏的时候，不加载任何第一屏以下的图片信息，只有当用户把鼠标往下滚动的时候，这些图片才开始加载。这样很明显提升可见区域的加载速度，提高用户体验。

4、确保功能图片优先加载

先加载图片再加载其它，会使用户体验感好。但速度不会提升

5、图片格式优化

不恰当的图像格式是一种极为常见的减慢加载速度的罪魁祸首。正确的图片格式可以让图片缩小数倍，如果保存为最佳格式。可以节省大量带宽，减少处理时间时间，大大加快页面加载速。

6、使用 Progressive JPEGs

ProgressiveJPEGs图片是JPEG格式的一个特殊变种，名为“高级JPEG”。在创建高级JPEG文件时，数据是这样安排的：在装入图像时，开始只显示一个模糊的图像，随着数据的装入，图像逐步变得清晰。它相当于交织的GIF格式的图片。

**44.get和post的区别？**

get:会在地址栏里显示传值信息，不安全；针对中文乱码解决能力较差;传值数量有限

post:相对安全,针对中文乱码解决较强，传值数量较多

**45.Src和href的区别？**

href表示超文本引用，表示与页面有关联的，在link和a等元素使用，src便是来源地址，是页面上必不可少的一部分，是引入，在img，iframe上引用

**46.****重绘和重排的区别**

重排（重构/回流/reflow）：当渲染树中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建, 这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候。

重绘（repaint或redraw）：当盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来之后，浏览器便把这些原色都按照各自的特性绘制一遍，将内容呈现在页面上。重绘是指一个元素外观的改变所触发的浏览器行为，浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。

**重排必定会引发重绘，但重绘不一定会引发重排**

引发重排

1、页面渲染初始化；(无法避免)

2、添加或删除可见的DOM元素；

3、元素位置的改变，或者使用动画；

4、元素尺寸的改变——大小，外边距，边框；

5、浏览器窗口尺寸的变化（resize事件发生时）；

6、填充内容的改变，比如文本的改变或图片大小改变而引起的计算值宽度和高度的改变；

7、取某些元素属性：（offsetLeft/Top/Height/Width,　clientTop/Left/Width/Height,　scrollTop/Left/Width/Height,width/height,getComputedStyle(),currentStyle(IE))

重绘发生的情况：

重绘发生在元素的可见的外观被改变，但并没有影响到布局的时候。比如，仅修改DOM元素的字体颜色（只有Repaint，因为不需要调整布局）  
**优化：**

1、浏览器自己的优化：浏览器会维护1个队列，把所有会引起回流、重绘的操作放入这个队列，等队列中的操作到了一定的数量或者到了一定的时间间隔，浏览器就会flush队列，进行一个批处理。这样就会让多次的回流、重绘变成一次回流重绘。

2、我们要注意的优化：我们要减少重绘和重排就是要减少对渲染树的操作，则我们可以合并多次的DOM和样式的修改。并减少对style样式的请求。

（1）直接改变元素的className

（2）display：none；先设置元素为display：none；然后进行页面布局等操作；设置完成后将元素设置为display：block；这样的话就只引发两次重绘和重排；

（3）不要经常访问浏览器的flush队列属性；如果一定要访问，可以利用缓存。将访问的值存储起来，接下来使用就不会再引发回流；

（4）使用cloneNode(true or false) 和 replaceChild 技术，引发一次回流和重绘；

（5）将需要多次重排的元素，position属性设为absolute或fixed，元素脱离了文档流，它的变化不会影响

到其他元素；

（6）如果需要创建多个DOM节点，可以使用DocumentFragment创建完后一次性的加入document；

（7）尽量不要使用table布局。  
**47.****px****和em和rem的区别**

px 实际上就是像素，用px设置字体大小时，比较稳定和精确。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。px的缺点是其不能适应浏览器缩放时产生的变化，因此一般不用于响应式网站。  
    em 就是根据基准来缩放字体的大小,是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

rem 相对于根元素 <html> ，这样就意味着，我们只需要在根元素确定一个参考值。rem是CSS3新增的一个相对单位（root em，根em）。

rem特点

rem 相对单位，相对于根元素 <html> ;

相对大小和绝对大小的优点于一身;

修改根元素就成比例地调整所有字体大小;

避免字体大小逐层复合的连锁反应.

**48.****什么是BFC?**

BFC全称为块格式化上下文(Block Formatting Context) 。

产生影响：

根元素或其它包含它的元素

浮动元素 (元素的 float 不是 none)

绝对定位元素 (元素具有 position 为 absolute 或 fixed)