1、前端页面有哪三层构成，分别是什么?作用是什么
结构层Html：主要指DOM节点；
样式（表示）层CSS：主要是指页面渲染；
脚本（行为）层JS：主要指页面动画效果。
2、行内和块级元素
块级元素占一行，垂直方向排列，可设置宽高、内外边距；
行内元素可水平方向排列，不能包含块级元素，宽高设置无效、内外边距上下无效。
3、语义化——用正确的标签做正确的事情。
1） 页面结构清晰
2） 有利于SEO
3） 方便其他设备解析
4） 便于团队开发和维护，更具可读性
4、页面导入样式时，使用link和@import有什么区别？
5、href与src的区别
Href——链接。
指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。
Src——替换。
指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。 这也是为什么将js脚本放在底部而不是头部。
6、标签上title与alt属性的区别是什么?
Alt 当图片不显示时用文字代表。
Title 鼠标悬停时提示信息
7、CSS选择符
id选择器#
类选择器.
标签选择器div, h1, p
相邻选择器h1+p（选择某元素后面紧邻着的元素）
普通兄弟选择器 h1 ~ p（选择有同一父元素的某元素后面p元素）
子选择器ul > li
后代选择器li a
通配符选择器 * 选择某元素下的所有元素
属性选择器a[rel =“external”]）
伪类选择器a: hover，li:nth-child。
继承:
可继承的样式： font-size; font-family; color; text-indent; UL;LI;DL;DD;DT;
不可继承的样式：border padding margin width height 优先级:
优先级就近原则，样式定义最近者为准; * 载入样式以最后载入的定位为准;
!important > 内联> id > class > tag|伪类|属性选择>伪对象>继承
8、position 的值的定位区别：
1）absolute——绝对定位，脱离文档流定位。
2）fixed——绝对定位，脱离文档流定位，相对于浏览器窗口，fixed元素与浏览器窗口之间的距离是不变的。
3）relative——相对定位，相对于其在普通流中的位置进行定位。
4）static——默认值，正常文档流
9、浮动
1.浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。
2.浮动元素引起的问题和解决办法
父元素的高度无法被撑开，影响与父元素同级的元素 与浮动元素同级的非浮动元素会跟随其后 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构
3.清除浮动
1）空标签清除浮动：clear：both，但增加了无意义标签
2）给包含浮动元素的父标签添加css属性overflow：auto; zoom:1。zoom:1用于兼容IE6。
3）父元素 after 伪对象清除浮动
10、居中
块级元素居中
块级元素内容居中
1）模拟 table
2）Flex布局：display:flex;justify-content:center(水平);align-items: center;(竖直)(支持Chroime，Firefox，IE9+);
行内元素内容居中方案
1）水平居中： text-align:center；
2）垂直居中：
1.父元素高度确定的单行文本（内联元素）：height = line-height；
2.父元素高度确定的多行文本（内联元素）:
a:父元素设置display:table；
b:子元素设置 display:table-cell ， vertical-align:middle；
11、cookies & localStorage & sessionStorage
Web Storage 的好处：
1） api 接口使用方便
2） 支持事件通知机制，可以将数据更新的通知发送给监听者
3） 减少网络流量：一旦数据保存在本地后，就可以避免再向服务器请求数据，因此减少不必要的数据请求，减少数据在浏览器和服务器间不必要地来回传递。
4） 快速显示数据：性能好，从本地读数据比通过网络从服务器获得数据快得多，本地数据可以即时获得。再加上网页本身也可以有缓存，因此整个页面和数据都在本地的话，可以立即显示。
5） 临时存储：很多时候数据只需要在用户浏览一组页面期间使用，关闭窗口后数据就可以丢弃了，这种情况使用sessionStorage非常方便。
12、解释css sprites，如何使用。
Css 精灵 把一堆小的图片整合到一张大的图片上，减轻服务器对图片的请求数量
13、CSS盒子模型
元素的内容（content），内边距（padding），边框（border），边距（margin）四个部分一起构成css中元素的盒模型。
1）标准W3C盒模型：一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)；
先做鞋，后做盒 多用于pc content 部分不包含其他部分
2）怪异（IE）盒模型：一个块的总宽度= width + margin(左右)（即width已经包含了padding和border值）；
先做盒，后做鞋 多用于移动端box-sizing: border-box
14、CSS引入的方式有哪些?
内联 内嵌 外链 导入
优先级
1）理论上：行内>内嵌>链接>导入
2）实际上：就近原则，内嵌、链接、导入在同一个文件头部，谁离相应的代码近，谁的优先级高
15、px、em、rem、vh、vw、vmin、vmax
1）px：相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
2）em：相对长度单位。相对于父元素的字体尺寸，若上面父元素未设置，则相对于浏览器的默认字体尺寸。
3）rem：相对长度单位。r’是“root”的缩写，相对于根元素的字体大小。
4）vh and vw：相对于视口的高度和宽度：1vh 等于1/100的视口高度，1vw 等于1/100的视口宽度
5）vmin and vmax：关于视口高度和宽度两者的最小值或者最大值。