47、什么叫优雅降级和渐进增强?
(1)优雅降级: Web站点在所有新式浏览器中都能正常工作,如果用户使用的是老式浏览器,则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题,针对不同版本的IE的hack实践过优雅降级了,为那些无法支持功能的浏览器增加候选方案,使之在旧式浏览器上以某种形式降级体验却不至于完全失效.
(2)渐进增强: 从被所有浏览器支持的基本功能开始,逐步地添加那些只有新式浏览器才支持的功能,向页面增加无害于基础浏览器的额外样式和功能的。当浏览器支持时,它们会自动地呈现出来并发挥作用。
48、你有哪些性能优化的方法?
(1)减少http请求次数:CSS Sprites, JS、CSS源码压缩、图片大小控制合适;网页Gzip,CDN托管,data缓存 ,图片服务器。
(2)前端模板 JS+数据,减少由于HTML标签导致的带宽浪费,前端用变量保存AJAX请求结果,每次操作本地变量,不用请求,减少请求次数
(3)用innerHTML代替DOM操作,减少DOM操作次数,优化javascript性能。
(4)当需要设置的样式很多时设置className而不是直接操作style。
(5)少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。
(6)避免使用CSS Expression(css表达式)又称Dynamic properties(动态属性)。
(7)图片预加载,将样式表放在顶部,将脚本放在底部 加上时间戳。
49、为什么要初始化CSS样式?
因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
50、谈谈你对CSS中刻度的认识?
1、特殊值0可以省略单位。例如:margin:0px可以写成margin:0
2、一些属性可能允许有负长度值,或者有一定的范围限制。如果不支持负长度值,那应该变换到能够被支持的最近的一个长度值。
3、长度单位包括:相对单位和绝对单位。
(1)相对长度单位有: em, ex, ch, rem, vw, vh, vmax, vmin
(2)绝对长度单位有: cm, mm, q, in, pt, pc, px
(3)绝对长度单位:1in = 2.54cm = 25.4 mm = 72pt = 6pc = 96px
(4)文本相对长度单位:em、rem(CSS3)
(5)相对长度单位是相对于当前对象内文本的字体尺寸,如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。(相对父元素的字体大小倍数)
51、请你说说box-sizing属性的的用法?
设置或检索对象的盒模型组成模式
(1)box-sizing:content-box: padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和,即 ( Element width = width + border + padding,但占有页面位置还要加上margin ) 此属性表现为标准模式下的盒模型。
(2)box-sizing:border-box: padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值,即使定义有border和padding也不会改变对象的实际宽度,即 ( Element width = width ) 此属性表现为怪异模式下的盒模型。
52、浏览器标准模式和怪异模式之间的区别是什么?
在“标准模式”(Standards Mode) 页面按照 HTML 与 CSS 的定义渲染,而在“怪异模式”(Quirks Mode)就是浏览器为了兼容很早之前针对旧版本浏览器设计、并未严格遵循 W3C 标准的网页而产生的一种页面渲染模式。浏览器基于页面中文件类型描述的存在以决定采用哪种渲染模式;如果存在一个完整的`DOCTYPE`则浏览器将会采用标准模式,而如果它缺失则浏览器将会采用怪异模式。
强烈建议阅读加深理解:[怪异模式(Quirks Mode)对 HTML 页面的影响](http://www.ibm.com/developerworks/cn/web/1310_shatao_quirks/),这里列下浏览器标准模式和怪异模式的区别:
(1)盒模型:
在怪异模式下,盒模型为IE盒模型而非标准模式下的W3C
盒模型:在 IE 盒模型中,
box width = content width + padding left + padding right + border left + border right,
box height = content height + padding top + padding bottom + border top + border bottom。
而在 W3C 标准的盒模型中,box 的大小就是 content 的大小。
(2)图片元素的垂直对齐方式:
对于`inline`元素和`table-cell`元素,在 IE Standards Mode 下 vertical-align 属性默认取值为`baseline`。而当`inline`元素的内容只有图片时,如`table`的单元格`table-cell`。在 IE Quirks Mode 下,`table`单元格中的图片的 `vertical-align` 属性默认为`bottom`,因此,在图片底部会有几像素的空间。
(3)`<table>`元素中的字体:
CSS 中,描述`font`的属性有`font-family`,`font-size`,`font-style`,`font-weigh`,上述属性都是可以继承的。而在 IE Quirks Mode 下,对于`table` 元素,字体的某些属性将不会从`body`或其他封闭元素继承到`table`中,特别是 `font-size`属性。
(4)内联元素的尺寸:
在 IE Standards Mode 下,non-replaced inline 元素无法自定义大小,而在 IE Quirks Mode 下,定义这些元素的`width`和`height` 属性,能够影响该元素显示的大小尺寸。
(5)元素的百分比高度:
a、CSS 中对于元素的百分比高度规定如下,百分比为元素包含块的高度,不可为负值。如果包含块的高度没有显式给出,该值等同于“auto”(即取决于内容的高度)。所以百分比的高度必须在父元素有声明高度时使用。
b、当一个元素使用百分比高度时,在 IE Standards Mode 下,高度取决于内容的变化,而在 Quirks Mode 下,百分比高度则被正确应用。
(6)元素溢出的处理:
在 IE Standard Mode 下,`overflow`取默认值 `visible`,即溢出可见,这种情况下,溢出内容不会被裁剪,呈现在元素框外。而在 Quirks Mode 下,该溢出被当做扩展`box`来对待,即元素的大小由其内容决定,溢出不会被裁剪,元素框自动调整,包含溢出内容。