前端面试汇总-HTML&CSS

1、HTML5新增内容

• 1、语义化标签
• 2、音频、视频标签
• 3、canvas画图
• 4、拖拽
• 5、webWork：为js引擎创造多线程环境。
• 6、WebStorage：浏览器缓存
• 7、WebSocket：基于当前TCP连接的一种全双工通讯服务。

2、说说盒模型

• 1、标准盒模型：width = content
• 2、怪异盒模型 ：width = border + padding + content

3、css3新增属性

• transform：平移、旋转、切割、倾斜
• transition：过渡
• animation：动画

4、弹性盒模型

Flex阮一峰

5、为什么语义化

• 1、HTML结构清晰。
• 2、代码可读性较好
• 3、 无障碍阅读
• 4、. 有利于SEO。
• 5、 移动设备能够更完美的展现网页（对css支持较弱的设备）。
• 6、 便于团队维护和开发。

6、sessionStorage、localStorage有什么区别

• sessionStorage：浏览器会话关闭，缓存数据就会清除。
• localStorage：除非手动清除，否则永久保存。

7、css有那些选择器

• 1、通配符选择器：*
• 2、类选择器：.
• 3、元素选择器：div
• 4、ID选择器：#
• 5、群组选择器：p ， li
• 6、派生选择器
  • 后代选择器 ul li
  • 子类选择器 ul > li
  • 兄弟选择器 ：h1 + title
• 7、属性选择器：[]
• 8、伪类选择器：a:hover

8、css选择器的权重

import！> 行内样式 > id > 类选择器 > 元素选择器

9、如何是元素隐藏

display：none或者visiblility：hidden或者opacity:0;
区别：

• display：none元素不会再DOM中。
• visiblility和opacity的元素存在DOM树中，只是隐藏了。

10、重回和回流

1、重绘：页面DOM树结构没有改变，而只是css属性的变化。
2、回流：DOM树结构发生了变化导致DOM树的重新绘制。
重绘不一定引起回流，回流一定会导致重绘。

11、DOM树如何生成的

首先会更具你的HTML文档生成一个HTML树，在更具CSS文件绘制一个CSSTree，两个结合形成layoutTree，浏览器会根据layoutTree形成一个renderTree并渲染到页面就形成了DOMTree

12、行内元素、块元素有哪些

• 行内元素：a、span、i、img、select、b
• 块元素：div、ul、li、h1-h6、p、table

13、常见的浏览器内核

• webkit内核：chrome（Blink）、safari。
• Trident内核：IE、火狐。

浏览器引擎分为：渲染引擎和js引擎。渲染引擎主要赋值取得网页内容、整理讯息、计算页面显示。JS引擎解析JavaScript语言，执行JavaScript来实现对页面的动态操作。