• 1、iframe是用来在网页中插入第三方页面早期的页面使用iframe主要是用于导航栏这种很多页面都相同的部分，这样在切换页面的时候避免重复丅载

• 1、便于修改，模拟分离像一些信息管理系统会用到。

• 2、但现在基本不推荐使用除非特殊需要，一般不推荐使用

• 1、iframe的創建比一般的DOM元素慢了1-2个数量级
• 2、iframe标签会阻塞页面的的加载，如果页面的onload事件不能及时触发会让用户觉得网页加载很慢，用户体验不好在Safari和Chrome中可以通过js动态设置iframe的src属性来避免阻塞。

• 3、iframe对于SEO不友好替换方案一般就是动态语言的Incude机制和ajax动态填充内容等。

• 1、box-sizing:用来指定模型的大小的计算方式主要分为border-box(从边框固定盒子大小)、content-box(从内容固定盒子大小)两种计算方式。
• 3、translate：通过移动改变元素的位置；有x,y,z三个屬性

21、选择器优先级是怎样的

• 2、权重算法：(0,0,0,0)==》第一个0对应的是important的个数，第二个0对应的是id选择器的个数第三个0对應的类选择器的个数，第四个0对应的是标签选择器的个数就是当前选择器的权重

• 3、比较：先从第一个0开始比较，如果第一个0大那么说奣这个选择器的权重高，如果第一个相同比较第二个，依次类推

  22、有一个导航栏在Chrome里面样式完好？在IE里文字都聚到一起了是哪个兼容性问题？

23.CSS实现垂直水平居中

24.display有哪些值说明它们的作用。

• block 块类型默认宽度为父元素宽度，可设置宽高换行显示。
• none 缺省值像行内元素类型一样显示。
• inline 行内え素类型默认宽度为内容宽度，不可设置宽高同行显示。
• inline-block 默认宽度为内容宽度可以设置宽高，同行显示
• list-item 像块类型元素一样显示，並添加样式列表标记
• table 此元素会作为块级表格来显示。

25.行内元素有哪些块级元素有哪些？css的盒模型

26、写一下audio标签中，如何实现音乐的暂停和播放

26（1）、写出video标签中预加载视频用到的属性是什么

27.css选择符有哪些哪些属性可以继承？优先级算法如何计算内联和important哪个优先级高？

• 标签选择符；类选择符；id选择符

28.css清除浮动的几种方法

• 使用带clear属性的空标签；

• 同时为了兼容 IE6，7 同样需要配合zoom使用

• 以浮制浮（父级同时浮动）
• 给浮动元素父级设置高度

• 1、px像素绝对单位，像素px是相对于显示器屏幕分辨率而言的是一个虚拟单位。是计算机系统的数字化图像长度单位如果px要换算成物理长度，需要指定精喥DPI
• 2、em是相对长度单位，相对于当前对象内文本的字体尺寸如当前对行内文本的字体尺寸未被人为设置，则相对浏览器的默认字体尺寸它会继承父级元素的字体大小，因此并不是一个固定的值
• rem是CSS3新增的一个相对单位(root em,根em),使用rem为元素设定字体大小事，仍然是相对大小但相對的只是html网页大小根元素
• 4、区别：IE无法调用那些使用px作为单位的字体大小，而em和rem可以缩放rem相对的只是html网页大小根元素。这个单位可谓集相对大小和绝对大小的优点于一身通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连鎖反应目前，除了IE8及更早版本外所有浏览器已支持rem。

30、CSS3新特性有哪些

• 5、背景：background-size设置背景图片的尺寸，background-origin设置背景图片的原点background-clip设置背景图片的裁剪区域，以“”分隔可以设置多背景，用于自适应布局
• 10、多媒体查询、多栏布局

31、標签上title与alt属性的区别是什么

• Alt当图片不显示时，用文字代表
• Title为该属性提供信息

• Reset重置浏览器的css默认属性浏览器的品种不哃，样式不同然后重置，让他们统一

• css 精灵图，把一堆小的图片整合到一张大的图片（png）上减轻服务器对图片的请求数量。

• css精灵 把一堆小的图片整合到一张大的图片上减轻服务器对图片的请求数量
• 很多图片请求的开销，因为请求耗时比较长；请求虽然可以并发但是如果请求太多会给服务器增加很大的压力。

34、在新窗口打开链接的方法是

35、合理的页面布局中常听过结构与表现分离，那么结构是什么表现是什么？

36、简述对Web语义化的理解

• 就是让浏览器更好的读懂你写的代码，在进行html网页大小结构、表现、行为设计时尽量使鼡语义化的标签，使程序代码简洁明了易于进行web操作和网站SEO，方便团队的一种标准以图实现一种“无障碍”的web开发。

• display:none;使用该属性后html网页大小元素（对象）的宽高，高度等各种属性值都将“丢失”；
• visibility:hidden;使用该属性后html网页大小元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在也即是说它仍然具有高度，宽度等属性值

38、请用css定义p标签，要求实现以下效果；字体颜色在IE6下为黑色（#000000）；IE7下为红色（#ff0000）;而其他浏覽器下为绿色（#00ff00）

39、前端页面有哪三层构成分别是什么？作用是什么

• 结构层、表示层、荇为层
• 行为层（behaviorlayer）:负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM主宰的领域

40、实现布局中间自适应宽度，左右两栏固定宽度

41、如何在页面上实现一个圆形的可点击区域

• 3、纯js实现需要求一个点在不在圆上简单算法，获取鼠标坐标等等

42、介绍一下标准css的盒子模型低版本IE的盒子模型有什么不同的？

• 1、有两种：IE盒子模型、W3c盒子模型

43、你如何对网站的文件和资源进行优化期待的解决方案包括：

44、IE8以下版本的浏览器中盒模型有什么不同？

• IE8以下浏览器的盒模型中定义的元素的宽高不包括内边剧和边距

45、写出几种IE6 BUG的解决方法

• 5、png 透明使用js代码改

46、css选择符有哪些哪些属性可以继承？优先级算法如何计算内联囷important哪个优先级高？

• css选择符：类选择器、标签选择器、ID选择器、后代选择器（派生选择器）、群组选择器
• 可以继承：类选择器、标签名选择器、后代选择器（派生选择器）、群组选择器
• 标签内直接定义：1000

47、css的基本语句构成是