html，css，js面试题

html+CSS

1 介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？如何转换

标准盒子模型 = 内容 + 内边距 + 边框 + 外边距
ie 盒子模型 = 内容 + 外边距

2 CSS选择器有哪些？优先级顺序？哪些属性可以继承？

!important > 内嵌 》 id 》类 》标签名》通配符 》继承
!important 对继承过来的样式无效

3 DIV布局的三种方式？

常规流式布局：
元素按照自身HTML元素定义的位置显示（怎么写的怎么显示）
元素按照自身的常规显示特性显示
浮动布局：
左浮动 float:left;
右浮动 float:right;
定位布局：
静态定位：position:static;（默认值），不写position相当于写上position:static;以前没学定位的时候其实都是静态定位，元素在它原本的位置显示，即使加了top、left等也不起作用。
相对定位：position: relative;相对定位是相对于自身的原始位置进行平移，如果设置position：relative；表示相对定位。z-index:值越大越在上面
注意：z-index必须加在已经定位的元素上才起作用。
绝对定位： position: absolute;子容器相对于父容器的定位，如果没有父容器，则相对于body定位。

4 垂直居中几种方式有哪些？

单行文本: line-height = height
图片: vertical-align: middle;
absolute 定位: top: 50%;left: 50%;transform: translate(-50%, -50%);
flex弹性盒子: display:flex;
margin:auto(自由水平居中）

5 CSS3新增伪类有那些?

p:first-of-type 选择属于其父元素的首个元素
p:last-of-type 选择属于其父元素的最后元素
p:only-of-type 选择属于其父元素唯一的元素
p:only-child 选择属于其父元素的唯一子元素
p:nth-child(2) 选择属于其父元素的第二个子元素
:enabled :disabled 表单控件的禁用状态。
:checked 单选框或复选框被选中

这里有更多的css基础面试题

6 媒体查询的使用方法是什么

@media媒体类型and（媒体特性）{样式规则}

7 rem的原理是什么？

在做响应式布局的时候，通过调整HTML的字体大小，页面上所有使用rem单位的元素都会做相应的调整。

8 Animation与 Transition的异同是什么？

Animation与 Transition的功能相同，都是通过改变元素的属性值来实现动画效果的。它们的区别在于，使用 Transition的功能时只能用指定属性的开始值和结束值，然后在这两个属性值之间使用平滑过渡的方式实现动画效果，因此不能实现比较复杂的动画效果。

Animation功能通过定义多个关键帧，以及定义每个关键帧中元素的属性值来实现更为复杂的动画效果。

9 如何把一个元素旋转30°？

transform:rotate（30deg）；
-ms-transfornm:rotate （30deg）；/IE9/
-webkit-transform:rotate（30deg）；/* Safar1和 Chrome*/
-o-transform:rotate（30deg）；/* opera*/
-moz-transform:rotate（30deg）；/Firefox/

10 什么是响应式设计？

它是关于网页制作的过程中让不同的设备有不同的尺寸和不同的功能。响应式设计是让所有的人能在这些设备上让网站运行正常

11 HTML5 Canvas 元素有什么用？

Canvas 元素用于在网页上绘制图形，该元素标签强大之处在于可以直接在 HTML 上进行图形操作。

12 请用CSS实现：一个矩形内容，有投影，有圆角，hover状态慢慢变透明

.a {
         width: 200px;
         height: 100px;
         border-radius: 10px;
         box-shadow: 10px 10px 5px #888888;
         background-color: aqua;
         transition: 2s;
  }
​.a:hover {
      opacity: 0;
 }

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

width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid #ff0000;

14 BFC 是什么？

BFC是指浏览器中创建了一个独立的渲染区域，并且拥有一套渲染规则，他决定了其子元素如何定位，以及与其他元素的相互关系和作用。
会产生BFC的元素

1. 根元素
2. float属性不为none
3. position为absolute或fixed
4. display为inline-block, table-cell, table-caption, flex, inline-flex
5. overflow不为visible

15 href和src的区别

（1）使用href ，可以并行下载资源。这也是为什么建议使用 link 方式加载 CSS，而不是使用 @import 方式。
（2）当浏览器解析到src ，会同步阻塞下面代码，类似于将所指向资源替换到当前内容。这也是为什么建议把 js 脚本放在底部而不是头部的原因。

16 清除浮动的方式

1. 添加父标签，设置高度
2. 给受影响的标签添加 clear: both

17 常见兼容性问题？

浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。

Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,
可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决.

18 全屏滚动的原理是什么？用到了CSS的哪些属性？

原理：有点类似于轮播，整体的元素一直排列下去，假设有5个需要展示的全屏页面，那么高度是500%，只是展示100%，剩下的可以通过transform进行y轴定位，
也可以通过margin-top实现overflow：hidden；transition：all 1000ms ease；

19 网页从输入网址到渲染完成经历了哪些过程？

1. 输入网址；发送到DNS服务器，并获取域名对应的web服务器对应的ip地址；
2. 与web服务器建立TCP连接；
3. 浏览器向web服务器发送http请求；
4. web服务器响应请求，并返回指定url的数据（或错误信息，或重定向的新的url地址）；
5. 浏览器下载web服务器返回的数据及解析html源文件；
6. 生成DOM树，解析css和js，渲染页面，直至显示完成；

20 描述浏览器的渲染过程？DOM树和渲染树的区别？

解析 HTML 构建 DOM(DOM树)，并行请求 css/image/js，CSS 文件下载完成，开始构建 CSSOM(CSS树)，CSSOM 构建结束后 和 DOM 一起生成 Render Tree(渲染树)，根据Render tree进行节点信息计算（Layout），根据计算好的信息绘制整个页面（Painting）
补充
布局(Layout)：计算出每个节点在屏幕中的位置
显示(Painting)：通过显卡把页面画到屏幕上
DOM 树 和 渲染树 的区别：
DOM 树与 HTML 标签一一对应，包括 head 和隐藏元素
渲染树不包括 head 和隐藏元素，大段文本的每一个行都是独立节点，每一个节点都有对应的 css 属性

21 什么是浮动 它有什么特性?

浮动就是让元素可以向左或向右移动，浮动元素会从文档的正常流中脱离，但是他还是会影响布局，当一个元素浮动时，其他内容会“环绕”该元素
浮动元素会脱离标准流(脱标)
浮动的元素会一行内显示并且元素顶部对齐
浮动的元素会具有行内块元素的特性
浮动元素不会影响它前面的元素

22 相对定位和绝对定位各自有什么特点?

相对定位是相对于元素在文档中的初始位置，在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。

绝对定位是相对于元素最近的已定位的祖先元素，如果元素没有已定位的祖先元素，那么它的位置则是相对于最初的包含块（body），绝对定位与文档流无关，所以它们可以覆盖页面上其他的元素，可以通过z-index属性来控制这些层的对方顺序
定位采取的原则：子绝父相

23 CSS中可继承与不可继承属性有哪些?

一、无继承性的属性

1. display：规定元素应该生成的框的类型
2. 文本属性：
   vertical-align：垂直文本对齐
   text-decoration：规定添加到文本的装饰
   text-shadow：文本阴影效果
   white-space：空白符的处理
   unicode-bidi：设置文本的方向
3. 盒子模型的属性：width、height、margin、border、padding
4. 背景属性：background、background-color、background-image、background-repeat、
   background-position、background-attachment
5. 定位属性：float、clear、position、top、right、bottom、left、min-width、min-height、
   max-width、max-height、overflow、clip、z-index
6. 生成内容属性：content、counter-reset、counter-increment
7. 轮廓样式属性：outline-style、outline-width、outline-color、outline
8. 页面样式属性：size、page-break-before、page-break-after
9. 声音样式属性：pause-before、pause-after、pause、cue-before、cue-after、cue、playduring。

二、有继承性的属性

1. 字体系列属性
   font-family：字体系列
   font-weight：字体的粗细
   font-size：字体的大小
   font-style：字体的风格
2. 文本系列属性
   text-indent：文本缩进
   text-align：文本水平对齐
   line-height：行高
   word-spacing：单词之间的间距
   属性值 作用
   none 元素不显示，并且会从文档流中移除。
   block 块类型。默认宽度为父元素宽度，可设置宽高，换行显示。
   inline 行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。
   inline-block 默认宽度为内容宽度，可以设置宽高，同行显示。
   list-item 像块类型元素一样显示，并添加样式列表标记。
   table 此元素会作为块级表格来显示。
   inherit 规定应该从父元素继承display属性的值。
   letter-spacing：中文或者字母之间的间距
   text-transform：控制文本大小写（就是uppercase、lowercase、capitalize这三个）
   color：文本颜色
3. 元素可见性
   visibility：控制元素显示隐藏
4. 列表布局属性
   list-style：列表风格，包括list-style-type、list-style-image等
5. 光标属性
   cursor：光标显示为何种形态

24 为什么有时候用translate来改变位置而不是定位？

translate 是 transform 属性的⼀个值。改变transform或opacity不会触发浏览器重新布局（reflow）或重绘（repaint），只会触发复合（compositions）。⽽改变绝对定位会触发重新布局，进⽽触发重绘和复合。transform使浏览器为元素创建⼀个 GPU 图层，但改变绝对定位会使⽤到CPU。 因此translate()更⾼效，可以缩短平滑动画的绘制时间。 而translate改变位置时，元素依然会占据其原始空间，绝对定位就不会发⽣这种情况

JS

1 var、const 和 let 的主要区别是什么？

1. var 是 老旧的 es5 ， let 和 const 是es6 新增的
2. 用 let 和 const 声明的变量是块范围的；用 var 声明的变量是全局范围的或函数范围的。
3. var 、let变量初始化为未定义，可以使用， const 变量只能先定义再初始化。

2 this的指向分别有哪几种情况？

全局作用域中的函数：非严格模式下其内部this指向window
对象内部的函数：其内部this指向对象本身：
构造函数：其内部this指向生成的实例

3 简述localStorage与sessionStorage各自的特点

localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据。
localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。它的属性是只读的。
sessionStorage 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

4 什么是ajax? 它的优缺点是什么？

Ajax 是一种通过后台与服务器进行少量的数据交换，使页面实现异步更新。是一种创建交互式网页应用的网页开发技术。
优点： 异步请求响应快，用户体验好；页面无刷新、数据局部更新；按需取数据，减少了冗余请求和服务器的负担；
缺点： 异步回调问题、this指向问题、路由跳转back问题；对搜索引擎的支持比较弱，对于一些手机还不是很好的支持。

5 dom事件委托什么原理，有什么优缺点?

事件委托原理: 事件冒泡机制（把子元素的事件行为 委托给 父级元素执行优点）
优点:

1. 可以大量节省内存占用，减少事件注册
2. 可以实现当新增子对象时，无需再对其进行事件绑定

缺点:
如果把所有事件都用事件代理，可能会出现事件误判
补充:
鼠标移入事件 ：mouseenter 不冒泡 mouseover 冒泡
鼠标移出事件：mouseleave 不冒泡 mouseout 冒泡

6 什么是JS变量提升 与 块级作用域

变量提升：就是会把变量定义提升到当前作用域的最上面
块级作用域：JS 中作用域有：全局作用域、函数作用域。没有块作用域的概念。ES6中新增了块级作用域。块作用域由 { } 包括，if 语句和 for 语句里面的{ }也属于块作用域。在外边不能调用块作用域里边定义的变量.

7 同步和异步的区别?

同步: 下面代码会等待上面 同步代码执行完毕
异步: 下面代码不会等待上面异步代码执行完毕
同步：浏览器访问服务器请求，用户看得到页面刷新，重新发请求,等请求完，页面刷新，
新内容出现，用户看到新内容,进行下一步操作
异步：浏览器访问服务器请求，用户正常操作，浏览器后端进行请求。
等请求完，页面不刷新，新内容也会出现，用户看到新内容

8 document load事件 和 document ready事件 的区别

1. load是当页面所有资源全部加载完成后（包括DOM文档树，css文件，js文件，图片资源等），执行一个函数

问题：如果图片资源较多，加载时间较长，onload后等待执行的函数需要等待较长时间，所以一些效果可能受到影响

2. $(document).ready()是当DOM文档树加载完成后执行一个函数 （不包含图片，css等）所以会比load较快执行

在原生的jS中不包括ready()这个方法，只有load方法就是onload事件

9 get 和post 的区别

1. post比get安全(因为post参数在请求体中。get参数在url上面)
2. get传输速度比post快 根据传参决定的。(post通过请求体传参，后台通过数据流接收。速度稍微慢一些。而get通过url传参可以直接获取)
3. post传输文件大理论没有限制 get传输文件小大概7-8k ie4k左右
4. get获取数据 post上传数据。(上传的数据比较多 而且上传数据都是重要数据。所以不论在安全性还是数据量级 post是最好的选择)

10 cookie和本地存储的区别

cookie很小，一般只存储一点用户信息，但是本地存储的localStorage和sessionStorage有较大的存储空间，但是cookie可以自己设置有效时间