目录
3.CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？CSS 选择符有哪些？
5.解释盒模型宽高值得计算方式，边界塌陷，负值作用，box-sizing概念？
8.BFC（Block Formatting Context） 是什么？应用？
12.左右固定中间自适应 三栏布局（圣杯、双飞翼、弹性盒子...）
13.静态布局、自适应布局、流式布局、响应式布局、弹性布局（rem、em）
14.less、sass、 stylus分别都有哪些优缺点？
十、子级中有设置position，则父级overflow失效
1.html5有哪些新特性、移除了哪些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？HTML5是构建web内容的一种语言描述方式，在08年正式发布，12年已形成了稳定的版本。
H5新特性有：
语义标签、增强型表单、Canvas绘图、地理定位、SVG绘图、拖放API、WebWorker、WebStorage、WebSocket
移除了：
1、显现层元素：basefont 、big、center、font、s、strike、tt、u
2、性能较差元素：frame、frameset、noframes
处理h5新标签的浏览器兼容性问题：
方法一 :
1、使用静态资源的html5shiv包
<!--[if lt IE9]>
<script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->方法二：
IE6/IE7/IE8支持通过document方法产生的标签，利用这一特性让这些浏览器支持HTML5新标签
如何区分HTML和HTML5：
1，文档的类型声明不同
HTML的代码很长。而H5的声明代码很简单
2，在语义结构方面
HTML：没有结构语义化标签（通俗来讲就是不方便阅读，没有告诉你哪里是头，哪里是尾）
H5：添加了许多具有语义化的标签，使代码解构清晰，提高了代码的可读性。
2.行内元素和块级元素的区别？什么是重绘和回流？
行内元素：
共占一行，与其他行内元素并排，不能设置宽高，默认的宽度就是文字的宽度，行内元素只能嵌套包括自己在内的所有行内元素；a/b/i/u/em/strong/font/del/strike/span
块级元素：
独占一行，不能与其他任何元素并列，可以设置宽h/p/ul/ol/li/dl/dd/dt/table/caption/tr/th/td/tbody/tfoot/thead/div
回流：
当渲染树中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)。
重绘：
当渲染树中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，则就称为重绘。
区别：
回流必将引起重绘，而重绘不一定会引起回流。比如：只有颜色改变的时候就只会发生重绘而不会引起回流
当页面布局和几何属性改变时就需要回流
3.CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？CSS 选择符有哪些？
1.id选择器（#id）
2.类选择器（.class）
3.标签选择器（div，h1，p）
4.相邻选择器（h1 + p）
5.子选择器（ul > li）
6.后代选择器（li a）
7.通配符选择器（ * ）
8.属性选择器（a[title]）
9.伪类选择器（a:hover，li:nth-child）
优先级算法如何计算？
1.优先级就近原则，同权重情况下样式定义最近者为准；
2.载入样式以最后载入的定位为准；
3.!important > id > class > tag；
4.important 比 内联优先级高，但内联比id要高；
1、第一等：代表内联样式，如: style=””，权值为1000。
2、第二等：代表ID选择器，如：#content，权值为0100。
3、第三等：代表类，伪类和属性选择器，如.content，权值为0010。
4、第四等：代表类型选择器和伪元素选择器，如div p，权值为0001。
5、通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。
6、继承的样式没有权值。
4.CSS3有哪些新特性？
word-wrap 文字换行
text-overflow 超过指定容器的边界时如何显示
text-decoration 文字渲染
text-shadow文字阴影
gradient渐变效果
transition过渡效果 transition-duration：过渡的持续时间
transform拉伸，压缩，旋转，偏移等变换
animation动画
5.解释盒模型宽高值得计算方式，边界塌陷，负值作用，box-sizing概念？
在盒模型中，有个问题免不了存在，边界塌陷。两个盒子垂直方向设置外边距，会造成便捷塌陷，只保留一个，哪个值大保留哪个。
注意：
浮动元素和绝对定位元素不会发生边界坍塌
只有块级元素的垂直方向才存在margin合并的问题，再说一下margin负值向内部缩减，正值向外。
6.简述flex布局
flex弹性布局，可以简便、完整、响应式地实现各种页面布局, 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）
flex-direction：决定主轴的方向
row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。
flex-wrap：换行
nowrap（默认）：不换行。
wrap：换行，第一行在上方。
wrap-reverse：换行，第一行在下方。
flex-flow：flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
justify-content：水平对齐方式
flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
align-items：垂直对齐方式
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
7.css 隐藏元素有哪几种方法？
css隐藏元素方法
display:none
Jquery：show(),hide(),toggle()方法就是通过改变display的值来实现变化效果的。
visibility:hidden：
和display:none的区别在于，元素在页面消失后，占据的空间依旧会保留着，但是display:none不会，所以它只会导致浏览器重绘而不会回流，因此，visibility:hidden适用于那些元素隐藏后不希望页面布局发生变化的场景；
opacity:0 (透明度，元素本身不会隐藏，会引起重绘)
overflow:hidden
position: absolute： 把元素脱离文档流移出视觉区域，既不会影响布局，又能让元素保持可以操作。应用该属性后，主要就是通过控制方向（top,left,right,bottom），达到一定的值，离开当前页面。
clip-path（不常用）
position定位有哪些？
1、static（静态定位，不脱流）
2、flex（固定定位，脱流）
3、relative （相对定位，不脱流）
4、absolute（绝对定位，脱流）
5、sticky（粘性定位）
8.BFC（Block Formatting Context） 是什么？应用？
是一个独立的渲染区域，通俗点BFC就是页面上的一个隔离的独立容器，容器里面的元素布局不受外界影响，同时也不会影响到外面的元素。
那么我们可以通过CSS为元素设置一些属性，来触发BFC,常用的方式有：
Float值不为none
Postion值不为relative和static
Overflow值为auto scroll和hidden
display值为inline-block
通过这几种方式，我们可以使用BFC来：
1、防止margin重叠2、清楚内部浮动3、消除文本环绕做出自适应两栏布局：
9.解释下浮动和它的工作原理？清除浮动的方法（4种）
浮动为该元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。
浮动引起的问题：
父元素的高度无法被撑开，影响与父元素同级的元素
与浮动元素同级的非浮动元素（内联元素）会紧跟其后
若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构
清除浮动的方法：
1, 添加额外标签
在浮动元素末尾添加一个空的标签，
<div style="clear:both"></div>优点：通俗易懂，容易掌握
缺点：可以想象通过此方法，会添加多少无意义的空标签，有违结构与表现的分离，在后期维护中将是噩梦。
2, 使用 br标签和其自身的 html属性
<br clear="all" />优点：比空标签方式语义稍强，代码量较少
缺点：同样有违结构与表现的分离，不推荐使用
3, 父元素设置 overflow：hidden
优点：不存在结构和语义化问题，代码量极少
缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素；overflow:hidden会导致中键失效。
4、父元素设置 overflow：auto 属性。同样IE6需要触发hasLayout，演示和3差不多
优点：不存在结构和语义化问题，代码量极少
缺点：多个嵌套后，firefox某些情况会造成内容全选；IE中 mouseover 造成宽度改变时会出现最外层模块有滚动条等，firefox早期版本会无故产生focus等。
5,使用:after 伪元素
需要注意的是 :after是伪元素（Pseudo-Element），不是伪类（某些CSS手册里面称之为“伪对象”），很多清除浮动大全之类的文章都称之为伪类，不过csser要严谨一点，这是一种态度。由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。
.clearfix:after {content:" "; display:block; visibility:hidden; clear:both; }
.clearfix { *zoom:1; }
优点：结构和语义化完全正确,代码量居中
缺点：复用方式不当会造成代码量增加
10.什么是外边距重叠？重叠的结果是什么？
外边距不重叠的情况：
1）水平margin永远不会重合
2）设置了overflow属性(visible除外)的元素和它的子元素之间的margin不会重叠
3）设置了绝对定位（position:absolute）的盒模型，垂直margin不会被重叠，和子元素之间也不重叠
4）设置了display:inline-block的元素，垂直margin不会重叠，和子元素之间也不重叠
5）根元素(如HTML)与body的margin不会重叠
防止外边距重叠的方法：
1）元素绝对定位position:absolute;一般用在内层元素
2）内层元素加float:left;或display:inline-block;
3）外层元素用padding增加边距
4）外层元素设置overflow:hidden;
5）内层元素透明边框border:1px solid transparent;
11.如何让一个盒子水平垂直居中
1、 如何让一个盒子水平垂直居中
①定位：（常用方法,推荐）
position:absolute;
position:relative;
left:值;
top:值;
②display:table-cell;
③外边距：margin-left:值;
margin-top:值;
④margin:auto;（不兼容低版本的IE浏览器）
⑤弹性盒模型：display:flex;
justify-content:conter;
align-itens:center;
⑥用transform的属性translate平移，不仅能实现绝对居中同样的效果，也支持联合可变高度方式使用。
使用top:50%; left:50%;时，是以盒子的左上角为原点定位，是左上角的原点居中，但是元素本身并不居中。
transform：translate(-50%，-50%):分别向左向上移动自身长宽的50%，使其位于中心。
transform: translate(-50%,-50%)导致的像素模糊问题解决办法：
/** 这 0.5px加或者减都可以 */
transform: translat(calc(-50% + 0.5 px), calc(-50% + 0.5 px))；
⑦用calc计算
12.左右固定中间自适应 三栏布局（圣杯、双飞翼、弹性盒子...）
圣杯布局：
缺点：当面板的main部分比两边的子面板宽度小的时候，布局就会乱掉。
双飞翼布局:
与圣杯布局很像，也是全部往左浮动，但是在内容div里再嵌套一个div，设置子div的margin为左右div预留位置，左右div只设置margin负值即可实现。
相似点：
1.给main设置width: 100%，占满窗口，从而自适应。
2.为了形成在一行三栏布局，给三个方块都加上浮动float: left;（注意清除浮动，因为浮动会导致父元素高度塌陷）
3.利用负margin-left把三个方块拉到一行，margin-left负多少就是往左移动多少，左边需要相对父元素的-100%，移到父元素的最左边，右边只需要移动本身宽度的负值，即可在最右边。
区别：
1.双飞翼布局给主面板添加了一个父标签用来通过margin给子面板腾出空间。
2.圣杯采用的是padding，而双飞翼采用的margin，解决了圣杯布局的问题。
3.双飞翼布局不用设置相对布局，以及对应的left和right值。
flex布局
思路：顺着主轴依次放3列，内容在最前，通过order控制显示顺序，通过flex-grow让中间占据全部剩余空间，通过flex-basis设置左、右div的宽度。
缺点：兼容性。
13.静态布局、自适应布局、流式布局、响应式布局、弹性布局（rem、em）
静态布局（Static Layout）
即传统Web设计，对于PC设计一个Layout，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分；
对于移动设备，单独设计一个布局，使用不同的域名如wap.或m.。
自适应布局（Adaptive Layout）
自适应布局（Adaptive）的特点是分别为不同的屏幕分辨率定义布局。布局切换时页面元素发生改变，但在每个布局中，页面元素不随窗口大小的调整发生变化。
你可以把自适应布局看作是静态布局的一个系列。
流式布局（Liquid Layout）
流式布局（Liquid）的特点（也叫"Fluid") 是页面元素的宽度按照屏幕进行适配调整，主要的问题是如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。
响应式布局（Responsive Layout）
分别为不同的屏幕分辨率定义布局，同时，在每个布局中，应用流式布局的理念，即页面元素宽度随着窗口调整而自动适配。
可以把响应式布局看作是流式布局和自适应布局设计理念的融合
弹性布局（rem/em布局）
包裹文字的各元素的尺寸采用em/rem做单位，可以使包裹文字的元素随着文字的缩放而缩放；而页面的主要划分区域的尺寸仍使用百分数或px做单位。
css 中的 px 是css设置自己大小，元素长宽的单位
浏览器中em和px关系是 **16px** = **1em**
rem是根据根节点，也就是html默认字体大小来设置大小的。所以改变了html根节点字体大小，em的默认值也会改变。向上面html设置为12px，那么**1rem=12px**了
rem不是子节点继承父节点大小，而是所有的节点都继承html节点，所有当html节点设置成10px时候，所有整个页面1rem就等于10px了
1.静态布局：
布局特点：宽高固定
2.自适应布局：
布局特点：不同分辨率下，页面元素位置变化，大小不变
实现方法:针对不同分辨率创建对应的样式表，使用 @media 媒体查询给不同尺寸的设备切换不同的样式
缺点：IE8及以下不支持媒体查询；只能兼容主流分辨率
3.流式布局（百分比布局）:
布局特点：不同的分辨率下显示相同的排版；高度固定，宽度自适应
实现方法:网页中主要区域的尺寸使用百分比；
缺点：大屏幕上元素被拉长，但是文字，高度还是固定大小，不协调
经典流式布局：左侧固定，右侧自适应；两侧固定，中间自适应
4.弹性布局（rem/em布局）：
布局特点：页面元素宽度，高度，字体大小会跟着屏幕大小缩放
实现方法:使用js监听当前屏幕大小，设置html的字体大小
缺点：IE678不兼容；需要计算；
5.响应式布局：一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本
布局特点：每个屏幕分辨率下面会有一个布局样式，即元素位置和大小都会变，响应式设计的目标是确保一个页面在所有终端上（各种尺寸的PC、手机、手表等等）都能显示出令人满意的效果
实现方法：媒体查询(css3中的Media Query)+流式布局
媒介查询：通过不同的媒介类型和条件定义样式表规则，媒介查询让CSS可以更精确作用于不同的媒介类型和同一媒介的不同条件。
优点：适应pc和移动端
1.面对不同分辨率设备灵活性强
2.能够快捷解决多设备显示适应问题
缺点：要匹配足够多的屏幕大小，工作量大，设计也需要多个版本
1.会出现隐藏无用的元素
2.加载时间加长
14.less、sass、 stylus分别都有哪些优缺点？
15.说一下在IE（IE6）中常见的几个兼容性问题
一、头文档所引起的怪异盒模型问题
产生条件：不设置文档声明，页面就会陷入怪异盒模型解析模式
解决方法：加入文档声明<!DOCTYPE html>
二、IE6下双边距BUG
产生条件：在IE6下，块元素有浮动有横向的margin，横向的margin值 会被放大成两倍浮动方向与margin方向一致时，该方向会出现双倍边距
解决方法：display:inline
三、图片间隙问题
产生条件：给父容器设置宽度后，图片会在原来基础上把父元素撑大3-5px
解决方法：1.给父元素添加font-size：0； 2.给图片添加display：block；
四、li的间距问题
产生条件：IE6浏览器 li标签设置宽高，且li里面的元素发生了浮动 解决方法：1. li不设置宽高；
2. li内部的标签不进行浮动
五、块状元素默认高度问题
产生条件：部分块状元素会有默认高度（一般为16px-18px之间） 解决方法： 1.给元素添加overflow:hidden; 2.font-size：0；
六、表单行高不一致
产生条件：一行中的文本输入框和按钮不在同一高度 解决办法：给表单元素添加float：left；并去掉默认边框border：0；
七、图片元素img下高度超出,出现多余空白
解决方法：1.设置img为display:block; 2.父级设置overflow:hidden;
八、左浮元素margin-bottom失效
解决方法：1.显示设置高度 2.父标签设置_padding-bottom代替子标签的margin-bottom 3.再放个标签让父标签浮动，子标签margin- bottom，即(margin-bottom与float不同时 作用于一个标签)
九、position下的left，bottom错位
解决方法：为父级(relative层)设置宽高或添加*zoom:1
十、子级中有设置position，则父级overflow失效
解决方法：为父级设置position:relative
十一、块元素中有文字及右浮动的行元素，行元素换行
解决方法：将行元素置于块元素内的文字前
十二、透明rgba与opacity
产生条件：IE6不支持此两种透明的设置方法 解决方法：使用IE6当中的滤镜filter替代掉， 如：opacity:0.6;filter:alpha(opacity=60)异盒模型问题
16.清空数组的方法
1.splice
var ary = [1,2,3,4];
ary.splice(0,ary.length);
console.log(ary); // 输出 []，空数组，即被清空了
2.length赋值为0
var ary = [1,2,3,4];
ary.length = 0;
console.log(ary); // 输出 []，空数组，即被清空了
3.赋值为[]
var ary = [1,2,3,4];
ary = []; // 赋值为一个空数组以达到清空原数组