1.前端页面有哪三层构成，分别是什么?作用是什么?
结构层 Html 表示层 CSS 行为层 js。
2.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?
Trident内核：IE,MaxThon,TT,The World,360,搜狗浏览器等。[又称MSHTML]
Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等
Presto内核：Opera7及以上。 [Opera内核原为：Presto，现为：Blink;]
Webkit内核：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]
3.请描述一下 cookies，sessionStorage 和 localStorage 的区别？
cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。
cookie数据始终在同源的http请求中携带（即使不需要），记会在浏览器和服务器间来回传递。
sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
存储大小：
cookie数据大小不能超过4k。
sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
有期时间：
localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
sessionStorage 数据在当前浏览器窗口关闭后自动删除。
cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
4.HTML5 中的一些有趣的新特性：
1.用于绘画的 canvas 元素
2.用于媒介回放的 video 和 audio 元素
3.对本地离线存储的更好的支持
4.新的特殊内容元素，比如 article、footer、header、nav、section
5.新的表单控件，比如 calendar、date、time、email、url、search
5.行内元素有哪些?块级元素有哪些?CSS的盒模型?
1.块级元素：div p h1 h2 h3 h4 form ul
2.行内元素: a b br i span input select
3.Css盒模型:内容，border ,margin，padding
6.CSS引入的方式有哪些? link和@import的区别是?
1.内联 内嵌 外链 导入
2.区别 ：同时加载
前者无兼容性，后者CSS2.1以下浏览器不支持
Link 支持使用javascript改变样式，后者不可
7.CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先级高?
1.基本可以分为通配选择器，标签选择器，类选择器，ID选择器，简单属性选择，具体属性选择，根据部分属性值选择，特定属性选择，从结构上来分还有后代选择器，子元素选择器，相邻兄弟选择器以及伪类。
2.可以的有 font-size font-family color
不可以的有 border padding margin background-color width height等
3.行内样式优先级Specificity值为1,0,0,0，高于外部定义。
外部定义指经由或或标签定义的规则标签定义的规则；
标签定义的规则；
!important声明的Specificity值最高；
Specificity值一样的情况下，按CSS代码中出现的顺序决定，后者CSS样式居上；
由继续而得到的样式没有specificity的计算，它低于一切其他规则(比如全局选择符*定义的规则)。
用!important可以改变优先级别为最高，其次是style对象，然后是id > class >tag ，另外在同级样式按照申明的顺序后出现的样式具有高优先级。
8.垂直居中设置
1.使用position:absolute（fixed）,设置left、top、margin-left、margin-top的属性;
2.利用position:fixed（absolute）属性，margin:auto这个必须不要忘记了;
3.利用display:table-cell属性使内容垂直居中;
4.使用css3的新属性transform:translate(x,y)属性;
5.使用:before元素;
9.写出几种IE6 BUG的解决方法
1.双边距BUG float引起的 使用display
2.3像素问题 使用float引起的 使用dislpay:inline -3px
3.超链接hover 点击后失效 使用正确的书写顺序 link visited hover active
4.Ie z-index问题 给父级添加position:relative
5.Png 透明 使用js代码 改
6.Min-height 最小高度 ！Important 解决’
7.select 在ie6下遮盖 使用iframe嵌套
8.为什么没有办法定义1px左右的宽度容器（IE6默认的行高造成的，使用over:hidden,zoom:0.08 line-height:1px）
10.介绍一下CSS的盒子模型
1.有两种， IE 盒子模型、标准 W3C 盒子模型；标准 W3C 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。
IE 盒子模型的范围也包括 margin、border、padding、content，和标准 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 pading。
2.盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border).
11.CSS3有哪些新特性？
CSS3实现圆角（border-radius:8px），阴影（box-shadow:10px），@Font-face(字体)
对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）,css3多列布局（multi-column layout）动画（animation）
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜
增加了更多的CSS选择器 多背景 rgba,
12.简述html语义化标签
用正确的标签做正确的事情。
13.CSS display:none和visibility:hidden的区别
visibility:hidden隐藏，但在浏览时保留位置
display:none视为不存在，且不加载
14.CSS清除浮动的几种方法
1、【.clr{clear:both;}】，设置了clear属性的元素，其上边框会紧贴着浮动元素的margin-bottom边界位置渲染，忽略其margin-top设置
2、空标签清浮动：【.clr{clear:both;height:0;overflow:hidden;}】，不推荐。
3、伪类after清浮动：【.clr:after{content:" ";clear:both;display:block;height:0;visibility:hidden;line-height:0;} .clr{zoom:1}】。
4、使用【display:table】。
5、使用overflow除visible，类似于激发haslayout。
6、使用浮动父元素清浮动。
15.SASS或是Less区别
1.编译环境不一样
2.变量符不一样，Less是@，而Scss是$，而且变量的作用域也不一样。
3.输出设置，Less没有输出设置，Sass提供4中输出选项：nested, compact, compressed 和 expanded。
4.Sass支持条件语句，可以使用if{}else{},for{}循环等等。而Less不支持。
5. 引用外部CSS文件
scss引用的外部文件命名必须以_开头, 如下例所示:其中_test1.scss、_test2.scss、_test3.scss文件分别设置的h1 h2 h3。文件名如果以下划线_开头的话，Sass会认为该文件是一个引用文件，不会将其编译为css文件.
6.Sass和Less的工具库不同
Sass有工具库Compass, 简单说，Sass和Compass的关系有点像Javascript和jQuery的关系,Compass是Sass的工具库。在它的基础上，封装了一系列有用的模块和模板，补充强化了Sass的功能。
Less有UI组件库Bootstrap,Bootstrap是web前端开发中一个比较有名的前端UI组件库，Bootstrap的样式文件部分源码就是采用Less语法编写。
作者：西瓜炒苦瓜
链接：https://www.jianshu.com/p/99e857b96c52
來源：
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。