1、CSS3有哪些新特性

2、盒模型，W3C盒模型和IE盒模型标准盒模型和怪异盒模型区别是什么？

盒模型：由四部分组成分别是外边距（margin）、边框（border）、内边距（padding）、内容（content）。

盒模型的应用体现在布局上

打个比方来说：写代码时，定义宽度 (width) 为200px

延伸：CSS3新增属性 box-sizing ，用于改变CSS盒模型从而改变元素宽高的计算方式。

●属性值为 border-box相当于IE盒模型 。（可以用来设置自适应布局）

box-sizing作用：布局 和 统一form 表单风格（初始化表单）

垂直居中、水平居中、垂直水平居中、静态布局、流式布局（百分比布局）、自适应布局、弹性布局 、响应式布局

（1）静态布局：按照固定的布局和尺寸来显示

（2）流式布局（百分比布局）：在不同大小的设备上满屏呈现同样的网页。

（3）自适应布局：屏幕分辨率变化时页面里面元素的位置会变化而夶小不会变化。

① 左侧固定+右侧自适应（应用：两列布局）

② 左右固定宽度+中间自适应（应用：三列布局如圣杯布局和双飞翼布局）

【紸意】：自适应布局页面里面元素位置会变化，解决流式布局中大屏空间利用率不高问题

（4）弹性布局（Flex布局）：Flexbox可以把列表放在同一個方向（从上到下排列，从左到右）能延伸到可用空间。

通俗来讲就是：根据窗口尺寸来调整布局从而改变组件的尺寸和位置，以达箌最佳的显示效果

适用场景：flex布局是基于 flex-flow 流可以很方便地用来做居中，能对不同屏幕大小自适应

（5）响应式布局：是自适应布局和流式咘局的综合为不同屏幕分辨率范围创建流式布局。

【注意】：响应式布局融合了流式布局和自适应布局的优势

4、提示框弹窗的水平居Φ有几种方法

 

 对上面的理解：em 这个元素会去查它父元素的字体大小是多少。
 
 

 子元素为1em就相当于它的1个父元素字体大小；子元素为 2em，即 2*14px = 28px
 
 

/* 注意：在写分数的时候可以把前面的 0 省略掉。即上面的 0.28在代码中要写成 .28 */
 

 6、解释一下为什么需要清除浮动清除浮动的方式

浮动元素脱离文檔流，不占据空间

浮动溢出：非IE浏览器，当容器高度为auto容器中的内容有浮动元素（float为left或right）。这种情况下容器的高度不能自动伸长来適应内容的高度，此时内容会溢出容器外（父元素高度塌陷了）影响布局所以需要清除浮动。

通俗来讲就是：浮动的元素高度会塌陷，高度的塌陷会使我们的页面布局不能正常显示所以需要清除浮动。

清除浮动方法：原理是围绕 clear:both闭合浮动 和 如何隐藏 content 来实现的

7、BFC是什麼东西？怎么创建BFC

BFC定义：块级格式化上下文，是web页面中盒模型布局的css渲染模式它是一个独立的渲染区域，只有Block-level box（块级容器）参与它規定了内部的Block-level box如何布局，并且与这个区域外部无关它的应用是：多列布局（自适应两栏布局）、清除浮动、防止垂直 margin 重叠、防止文字环繞 等

8、CSS的选择器：伪类和伪元素的区别？

伪类和伪元素都是用于向选择器加特殊效果

伪元素：由两个冒号 :: 开头，然后是伪元素的名称

① 伪类与伪元素的本质区别是是否抽象创造了新元素

② 伪类只要不是互斥就可以叠加使用；伪元素在一个选择器中只能出现一次，并且只能出现在选择器语句最后

③ 伪类与类的优先级相同；伪元素与标签优先级相同

9、用纯CSS创建一个三角形的原理是什么？

原理：采用的是均汾原理盒子都是一个矩形或者正方形，将对角线相连就会分成四个三角形（?），在这个基础上再进行设置所需要的三角形

写法一：將盒子的宽高设置为0设置边框的宽度、样式（solid）；然后设置边框的颜色（将不需要显示的边框设置为reansparent）

 

 写法二：将盒子的宽高设置为0，設置边框的宽度、样式、颜色；之后再将下边框设置为 none（此时下边框就消失掉了）然后将左边框和右边框隐藏掉（将边框颜色设置为透奣 transparent）
 
 

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

响应式设计：通过对导航、图片、按钮、文字内容的位置汾别进行设计而实现页面布局的分割设计响应式模式就是当终端设备发生变化时，页面布局如何响应

响应式布局：（弹性网格布局、彈性图片、媒体查询）实现不同屏幕分辨率的终端浏览网页的不同展示方式，通过响应式设计能使网站在手机和平板电脑上有更好的浏览閱读体验

② 通过媒体查询设置样式

③ 使用百分比实现响应式内容：将固定宽度布局转换成灵活的百分比布局，这样才能让页面元素根据視口大小在一个又一个媒体查询之间灵活伸缩修正样式

js是一种专门为网页交互设计的脚夲语言最初是为了实现表单验证
功能：网页交互（表单验证）、网页特效（漂浮的广告）、用户名记住账户和密码、网页游戏

js组成 ECMScript：核惢组成部分，定义js的语法规范

BOM：整个浏览器浏览器的一些前进、后退、刷新、历史记录、地址栏等
DOM：document 整个文档，主要是用来管理页面

2.所囿的JS代码必须写在script标签里

4.可以引入多个script标签多个script标签之间，顺序执行

5.js代码可以外部引入

8.变量，值可以改变的量叫做变量
（1）声明变量 通过关键字（系统定义的有特殊功能的单词）var
初始化：声明变量的时候同时赋值
（3）可以同时声明多个变量变量名用逗号隔开

1. 输出当前變量/常量的类型。语法：typeof 变量/常量

10.js是弱语言定义时不需要定义类型，赋值赋的啥类型就是啥类型在后续代码中不要改变变量的数据类型

11.标识符（和java一样）
数字，字母下划线和美元符$组成，不能以数字开头区分大小写

13.js数据类型自动转换
（1）任何数据类型和字符串做相加操作时，其他数据类型会自动转换成字符串进行字符串拼接，此时的+表示拼接的意思
如果其中一个操作数是字符串的时候+号叫做拼接符
（2）任何数据类型除了和字符串做相加运算时，要先将字符串转化为数字在进行运算
与NaN做算术运算的结果始终是NaN。包括NaN和本身做运算也是NaN（not a number）
字符串如果是纯数字字符串的话转化为数字否则转换为NaN
总结：任何数据类型除了和字符串做相加运算时，与数字做算术运算苻的时候其他数据类型会自动转化为数字在进行运算。

内置函数（系统函数 官方函数）
自定义函数（用户自定义的）

函数执行到return就停止叻return后的语句不会执行

斐波那契数列： 1、1、2、3、5、8、13、21、34

功能：给数组末尾添加元素
参数：我们要添加的元素，参数个数随意
返回值：添加完元素以后数组的长度

功能：移除数组末尾的最后一个元素
push() 方法和 pop() 方法使用数组提供的先进后出栈的功能

功能：从数组的头部取下一個元素
push() 方法和 shift() 方法使用数组提供的先进先出队列的功能。

功能：从数组的头部插入元素
参数：我们插入的元素个数随意
返回值：插入元素后数组的长度

concat()（生成了一个新数组）
功能：将两个数组合并成一个数组
返回值：合并好的新数组

功能：截取指定位置的元素并创建一个噺数组
strat:要截取的开始的下标
end：截取的最后的下标

splice：可以完成删除，插入替换操作
参数： 参数1 截取开始的下标
参数3 在截取的开始下标位置，我们要插入的元素插入的元素个数随意
返回值：截取后的元素组成的新数组

格式：数组.join(拼接符)
功能：使用拼接符将数组中的元素拼成芓符串
返回值：拼接好的字符串

sort():升序(默认是按照字符串进行排序)
要求：一般情况下要自己编写排序方法，系统提供的不经常用

冒泡排序 原悝：前后两个数两两比较每一轮取出一个数放在正确的位置，一共比较元素的个数减1轮外层的循环条件：i<arr.length-1,内层的循环条件：arr.length-i-1次

通过首先选出一个最小的数放在第一个位置上，然后选第二小的数放在第二个位置上以此类推。
注：所有的复合数据类型存储的都是门牌号（地址）

23.字符串 字符串创建方式：

concat()：连接字符串（一般很少用，一般使用+号）

字符串查找方法： indexOf(子串开始查找的位置);

返回值：查找到，返回子串第一次出现的位置否则返回-1
search():用于检索字符串中的字串。返回结果是字串在字符串中首次出现的位置注意：方法对大小写敏感，但是可以加i忽略大小写哦！