Web前端知识汇编收集A

1.目前最主流的浏览器有哪五大款?

 　　分别是 IE、Firefox、Chrome、Safari、Opera。

2.至少说出四大浏览器内核?

• 1.Trident内核,也称IE内核。
• 2.Webkit内核。
• 3.Gecko内核。
• 4.Presto内核。
• 5.Blink内核

3. display:none与visibility:hidden 的区别是什么？

• 前者隐藏对应的元素但不挤占该元素原来的空间。
• 后者隐藏对应的元素并且挤占该元素原来的空间。

4. CSS 中 link 和@import 的区别是什么?

•   link 属于 html 标签,而@import 是 CSS 中提供的语法规则 ,link是HTML提供的标签,在页面加载的时候,link 会同时被加载,而@import 引用的 CSS 会在页面加载完成后才会加载引用的 CSS
•   @import是 CSS2.1 才有的语法,只有在 IE5 以上才可以被识别,而 link 是 html 标签,不存在浏览器兼容性问题
•   Link 引入样式的权重大于@import 的引用（@import 是将引用的样式导入到当前的页面中）

5.行内元素和块级元素的具体区别是什么？行内元素的 padding 和 margin 可设置吗？

• 块级元素(block)特性:总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示;宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制.
• 内联元素(inline)特性:和相邻的内联元素在同一行.
• 宽度(width)、高度(height)、内边距的 top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变(也就是padding和margin 的    left 和 right 是可以设置的),就是里面文字或图片的大小.

6.浏览器默认天生的 inline-block 元素（拥有内在尺寸,可设置高宽,但不会自动换行）,有哪些？

   <input> 、<img> 、<button> 、<textarea> 、<label>

7.在HTML5中提供了最新哪些本地存储方法?

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

8.前端页面有哪三层构成,分别是什么？作用是什么？

• A.结构层：由 HTML 或 XHTML 之类的标记语言负责创建,仅负责语义的表达。解决了页面“内容是什么”的问题。
• B.表示层：由CSS负责创建,解决了页面“如何显示内容”的问题。
• C.行为层：由脚本负责。解决了页面上“内容应该如何对事件作出反应”的问题。

9.请阐述table的缺点

• A.太深的嵌套,比如table>tr>td>h3,会导致搜索引擎读取困难,而且,最直接的损失就是大大增加了冗余代码量。
• B.灵活性差,比如要将tr设置border等属性,是不行的,得通过td
• C.代码臃肿,当在table中套用table的时候,阅读代码会显得异常混乱
• D.混乱的colspan与rowspan,用来布局时,频繁使用他们会造成整个文档顺序混乱。
• E.table需要多次计算才能确定好其在渲染树中节点的属性,通常要花3倍于同等元素的时间。
• F.不够语义

10.iframe的优缺点？

优点：

• A.解决加载缓慢的第三方内容如图标和广告等的加载问题
• B.iframe无刷新文件上传
• C.iframe跨域通信

缺点：

• A.iframe会阻塞主页面的Onload事件
• B.无法被一些搜索引擎索引到
• C.页面会增加服务器的http请求
• D.会产生很多页面,不容易管理

11.一个页面上有大量的图片[大型电商网站],加载很慢,你有哪些方法优化这些图片的加载,给用户更好的体验?

• A.图片懒加载,滚动到相应位置才加载图片。
• B.图片预加载,如果为幻灯片、相册等,将当前展示图片的前一张和后一张优先下载。
• C.使用CSS sprite,SVG sprite,Iconfont、Base64等技术,如果图片为css图片的话。
• D.如果图片过大,可以使用特殊编码的图片,加载时会先加载一张压缩的特别厉害的缩略图,以提高用户体验。

12.Flash、Ajax各自的优缺点,在使用中如何取舍？

Flash：

• A.Flash适合处理多媒体、矢量图形、访问机器
• B.对CSS、处理文本上不足,不容易被搜索

Ajax：

• A.Ajax对CSS、文本支持很好,支持搜索
• B.多媒体、矢量图形、机器访问不足

共同点：

• A. 与服务器的无刷新传递消息
• B. 可以检测用户离线和在线状态
• C. 操作DOM

13.页面布局有哪几种技术手段?

• 标准流布局
• 浮动定位布局
• 相对定位布局
• 绝对定位布局
• 表格布局
• 弹性盒子(Flexbox)布局
• 网格布局(Gird)

14.box-sizing、transition、translate分别是什么？

1. box-sizing:用来指定模型的大小的计算方式。主要分为border-box(从边框固定盒子大小)、content-box(从内容固定盒子大小)两种计算方式。
2. transition:当前元素只要有"属性"发生变化时,可以平滑的进行过渡。通过transition-propety设置过渡属性；transition-duration设置过渡时间；transition-timing-function设置过渡速度；transition-delay设置过渡延时。
3. translate：通过移动改变元素的位置；有x,y,z三个属性。
4. opacity 作用于元素以及元素内的所有内容（包括文字）的透明度。
5. rgba() 只作用于元素自身的颜色或其背景色,子元素不会继承透明效果。

15. rgba() 和 opacity 的透明效果有什么不同？

• opacity 作用于元素以及元素内的所有内容（包括文字）的透明度。
• rgba() 只作用于元素自身的颜色或其背景色,子元素不会继承透明效果。

16. css 属性 content 有什么作用？

    content属性专门应用在 before/after 伪元素上,用于在元素内部的前面或后面插入额外内容或样式。

17.什么是 FOUC(Flash of Unstyled Content)？ 如何来避免 FOUC？

• 当使用 @import 导入 CSS 时,会导致某些页面在 IE 出现奇怪的现象： 没有样式的页面内容显示瞬间闪烁,这种现象称为“文档样式短暂失效”,简称为FOUC。
• 产生原因：当样式表晚于结构性html加载时,加载到此样式表时,页面将停止之前的渲染。
• 等待此样式表被下载和解析后,再重新渲染页面,期间导致短暂的花屏现象。
• 解决方法：使用 link 标签将样式表放在文档 head。

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

1. 多个css合并,尽量减少HTTP请求。
2. 将css文件放在页面最上面。
3. 移除空的css规则。
4. 避免使用CSS表达式。
5. 选择器优化嵌套,尽量避免层级过深。
6. 充分利用css继承属性,减少代码量。
7. 抽象提取公共样式,减少代码量。
8. 属性值为0时,不加单位。
9. 属性值为小于1的小数时,省略小数点前面的0。
10. css雪碧图。

19. 在网页中的应该使用奇数还是偶数的字体？

　　在网页中的应该使用“偶数”字体：

• 偶数字号相对更容易和 web 设计的其他部分构成比例关系。
• 使用奇数号字体时文本段落无法对齐。
• 宋体的中文网页排布中使用最多的就是 12 和 14。

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

• 响应式设计就是网站能够兼容多个终端,而不是为每个终端做一个特定的版本。
• 基本原理是利用CSS3媒体查询,为不同尺寸的设备适配不同样式。
• 对于低版本的IE,可采用JS获取屏幕宽度,然后通过resize方法来实现兼容。

21. line-height三种赋值方式有何区别？(带单位、纯数字、百分比)

• 带单位:px 是固定值,而 em 会参考父元素 font-size 值计算自身的行高。
• 纯数字:会把比例传递给后代。例如,父级行高为 1.5,子元素字体为 18px,则子元素行高为 1.5 * 18 = 27px。
• 百分比:将计算后的值传递给后代。

22. margin和padding分别适合什么场景使用？

• 需要在border外侧添加空白,且空白处不需要背景（色）时,使用 margin。
• 需要在border内测添加空白,且空白处需要背景（色）时,使用 padding。

23. box-sizing 常用的属性有哪些？分别有什么作用？

• box-sizing: content-box; // 默认的标准(W3C)盒模型元素效果。
• box-sizing: border-box; // 触发怪异(IE)盒模型元素的效果。
• box-sizing: inherit; // 继承父元素 box-sizing 属性的值。

24. CSS选择器有哪些？

• id选择器 #id
• 类选择器 .class
• 标签选择器 div, h1, p
• 相邻选择器 h1 + p
• 子选择器 ul > li
• 后代选择器 li a
• 通配符选择器 *
• 属性选择器 a[rel='external']
• 伪类选择器 a:hover, li:nth-child

25.CSS哪些属性可以继承？哪些属性不可以继承？

• 可以继承的样式：font-size、font-family、color、list-style、cursor
• 不可继承的样式：width、height、border、padding、margin、background

26.CSS如何计算选择器优先？

• 相同权重,定义最近者为准：行内样式 > 内部样式 > 外部样式
• 含外部载入样式时,后载入样式覆盖其前面的载入的样式和内部样式
• 选择器优先级: 行内样式[1000] > id[100] > class[10] > Tag[1]
• 在同一组属性设置中,!important 优先级最高,高于行内样式

27.CSS3新增伪类有哪些？

•  :root 选择文档的根元素,等同于 html 元素
•  :empty 选择没有子元素的元素
•  :target 选取当前活动的目标元素
•  :not(selector) 选择除 selector 元素意外的元素
•  :enabled 选择可用的表单元素
•  :disabled 选择禁用的表单元素
•  :checked 选择被选中的表单元素
•  :after 在元素内部最前添加内容
•  :before 在元素内部最后添加内容
•  :nth-child(n) 匹配父元素下指定子元素,在所有子元素中排序第n
•  :nth-last-child(n) 匹配父元素下指定子元素,在所有子元素中排序第n,从后向前数
•  :nth-child(odd)
•  :nth-child(even)
•  :nth-child(3n+1)
•  :first-child
•  :last-child
•  :only-child
•  :nth-of-type(n) 匹配父元素下指定子元素,在同类子元素中排序第n
•  :nth-last-of-type(n) 匹配父元素下指定子元素,在同类子元素中排序第n,从后向前数
•  :nth-of-type(odd)
•  :nth-of-type(even)
•  :nth-of-type(3n+1)
•  :first-of-type
•  :last-of-type
•  :only-of-type
•  ::selection 选择被用户选取的元素部分
•  :first-line 选择元素中的第一行
•  :first-letter 选择元素中的第一个字符

 28.请列举几种隐藏元素的方法

• visibility: hidden; 这个属性只是简单的隐藏某个元素,但是元素占用的空间任然存在
• opacity: 0; CSS3属性,设置0可以使一个元素完全透明
• position: absolute; 设置一个很大的 left 负值定位,使元素定位在可见区域之外
• display: none; 元素会变得不可见,并且不会再占用文档的空间。
• transform: scale(0); 将一个元素设置为缩放无限小,元素将不可见,元素原来所在的位置将被保留
• <div hidden="hidden"> HTML5属性,效果和display:none;相同,但这个属性用于记录一个元素的状态
• height: 0; 将元素高度设为 0 ,并消除边框
• filter: blur(0); CSS3属性,将一个元素的模糊度设置为0,从而使这个元素“消失”在页面中

29.主流浏览器内核私有属性css前缀有哪些?

•  mozilla内核 (firefox,flock等)       -moz 
•  webkit内核(safari,chrome等)     -webkit                                                  
•  opera内核(opera浏览器)           -o                                                    
•  trident内核(ie浏览器)                 -ms