前端面试必问的10道CSS布局题看完直接拿offer
题目1：两栏布局，高度相等，右边固定宽度400px，左边自适应（请写出html和css）
问题分析
该问题主要考核两栏布局的实现方案，实现方式有多种，比如说：1）将右侧div浮动，左侧div设置margin-right；2）固定区采用绝对定位，自适应区设置margin；3）标准浏览器的方法 ；4）双float + calc()计算属性；5）双inline-block + calc()计算属性；6）float + BFC方法；7）flex。面试通常说出3种及其以上为最佳。
核心问题讲解
以flex布局举例说明：
1、flex布局，目前最常用且最简单的方法之一，
2、首先给元素的父元素变成弹性盒子，然后右边的子元素宽度要400px，左边的自适应100%就好了
注意：但存在兼容性，相关问题要有所了解，比如1）flex容器的一个默认属性值:align-items: stretch;。这个属性导致了列等高的效果。
为了让两个盒子高度自动，需要设置: align-items: flex-start;
2）设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
问题扩展
例如一个宽400px高300px的盒子，盒子的子元素需要从左到右从上到下依次排列。首先给父元素使用display: flex; justify-content: space-between; 然后子元素设置宽高。当多个子元素的宽度超过当前父元素的宽度的时候会自动换行
结合项目中使用
以下介绍2种方式的具体使用：
方式一、
题目2：常见的几种页面布局的方式
问题分析
该问题主要考核基本布局方式，常见的有以下7种，必须要掌握的是前3种
flex弹性盒子（弹性布局）
rem布局（一般都是flex+rem使用的比较多）
响应式布局（响应式布局的原理，和适配方案必修掌握）
固定布局 / 流式布局（百分比布局）/ 浮动布局 / 定位布局
核心问题讲解
flex布局又称弹性盒子，简单代码量少，可以不用左右浮动了
Flexbox布局在定义伸缩项目大小时伸缩容器会预留一些可用空间，让你可以调节伸缩项目的相对大小和位置。例如，你可以确保伸缩容器中的多余空间平均分配多个伸缩项目，当然，如果你的伸缩容器没有足够大的空间放置伸缩项目时，浏览器会根据一定的比例减少伸缩项目的大小，使其不溢出伸缩容器。综合而言，Flexbox布局功能主要具有以下几点：
第一，屏幕和浏览器窗口大小发生改变也可以灵活调整布局；
第二，可以指定伸缩项目沿着主轴或侧轴按比例分配额外空间（伸缩容器额外空间），从而调整伸缩项目的大小；
第三，可以指定伸缩项目沿着主轴或侧轴将伸缩容器额外空间，分配到伸缩项目之前、之后或之间；
第四，可以指定如何将垂直于元素布局轴的额外空间分布到该元素的周围；
第五，可以控制元素在页面上的布局方向；
第六，可以按照不同于文档对象模型（DOM）所指定排序方式对屏幕上的元素重新排序。也就是说可以在浏览器渲染中不按照文档流先后顺序重排伸缩项目顺序。
2 .rem根据页面宽度和的页面的根元素来控制大小，移动端常用方式之一
3 .响应式布局，一套代码适应pc和移动端，设置好几个尺寸分别的样式，根据页面的宽度来改变样式
4 .流式布局也叫百分比布局。把元素的宽,高,margin,padding不再用固定数值,改用百分比,这样元素的高,margin,padding 会根据页面的尺寸随时调整，已达到适应当前页面的目的
*百分比是基于元素父级的大小计算得来的；
*元素的水平或者竖直间距都是相对于父级的宽度计算的.(margin&padding)
*边框不能用百分比设置
浮动布局关键词，float，可以设置left或者right，他使元素脱离文档流进而达到布局的目的，也是目前一个比较主流的布局方式，但是使用浮动的结束以后，别忘记清除浮动
定位布局也是目前比较常用的一种布局方式，关键词： position: fixed;固定布局，将元素固定在一个位置，不随页面移动而移动，position: relative;相对定位，相对于元素自身定位，不脱离文档流，相当于定义一个参照物，一般和绝对定位结合使用，position: absolute;绝对定位，脱离文档流，一般和相对定位结合使用，如果不定义相对定义，将会相对于整个浏览器定位，所以定位布局，一般情况下都是相对定位和绝对定位结合着来，相当定位相当于划定一个势力范围，制定一个封闭的容器块，然后绝对定位就行对于相对定位来定位，从而达到有效的布局
问题扩展
结合布局方式，那么常见的就是css布局方式，对于css样式一般需要涉及到的就是实现以下三种布局：
*实现div的水平居中和垂直居中
*多元素水平居中
*实现栅格化布局
结合项目中使用
1.rem布局先设置根元素（font-size: 100px）方便计算，然后比如div需要100px宽度就是1rem 以此类推
2.流式布局以百分比为主要形式，让屏幕自适应，这种布局方式定义灵活，能够根据屏幕的情况变化，但是这种方式设计的效果不太容易控制，一般移动端结合rem用的比较多，pc端用的不是非常多
题目3：h5离线存储
（1）问题分析
（2）核心问题讲解
（3）问题扩展
（4）结合项目中使用
题目4：html5新特性有哪些
问题分析
对于目前市场上来说HTML5中需要掌握的新特性有
*拖拽释放(Drag and drop) API
*语义化更好的内容标签（header,nav,footer,aside,article,section）
*音频、视频API(audio,video)
*画布(Canvas) API
*地理(Geolocation) API
*本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
*sessionStorage 的数据在浏览器关闭后自动删除
*表单控件，calendar、date、time、email、url、search
*新的技术webworker, websocket, Geolocation
其中画布和地理api，本地存储用的比较的多
核心问题讲解
语义化标签 例如<nav></nav> <header></header>
多媒体就是可以添加视频元素<audio></audio>
Canvas、svg，实现前端数据可视化必不可少的东西
离线存储：用于优化用户体验
问题扩展
语义化标签可以更容易的理解这一块的代码是做什么的
例如用户收货地址，可以用Localstorage存储用户当前的收货地址，如果没有新的添加就直接从localstorage中取出，
结合项目中使用
例如语义化标签<nav></nav>用来做导航栏的标签
使用多媒体<audio></audio>增加页面的炫酷程度
Canvas、svg可以使用echarts、d3.js 制作数据可视化，简单又方便离线存储用于优化用户网速慢导致页面空白问题
题目5：cookie，sessionstorage,localStorage的区别
问题分析
面试官主要是针对浏览器缓存方面的知识面进行考核，其中主要考点是HTML 5 本地存储的应用的考察，旨在敲定求职者是否具备真实的开发工作经验。
核心问题讲解
| 共同点 |
| 都是保存在浏览器端！ |
| 区别 |
| 1 ： cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递；存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。2 ： 数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。 |
| 3 ： 作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。 |
问题扩展
1.1 session和cookie有什么区别 ？
建议答案 ： session是存储服务器端，cookie是存储在客户端，所以session的安全性比cookie高。获取session里的信息是通过存放在会话cookie里的session id获取的。而session是存放在服务器的内存中里，所以session里的数据不断增加会造成服务器的负担，所以会把很重要的信息存储在session中，而把一些次要东西存储在客户端的cookie里。
session的信息是通过sessionid获取的，而sessionid是存放在会话cookie当中的，当浏览器关闭的时候会话cookie消失，所以sessionid也就消失了，但是session的信息还存在服务器端
1.2 怎么给localStorage设置值，和获取值 ？
设置值：localStorage.setItem(键，值)
获取值：localStorage.getItem(键)
结合项目中使用
这个用的比较多的是在注册登陆这个功能的时候
题目6：css3的新特性有哪些
问题分析
该题旨在考核求职者对 CSS3的相关新特性有较为深入了解！
核心问题讲解
在回答这个问题的策略:先告诉面试官css3在css的基础上面，不仅添加了新的属性还有选择器也做了扩展，接下来开始列举：
1： 先从颠覆性的属性开始比如：rotate(旋转)，translate(位移)，scale(缩放)等
2 ： Css3的动画 animation
3 ： 还有是css3的过渡， transition: all 1s;
4 ： 再列举一些简单的属性比如说: border-radius(圆角)，box-shadow(盒子阴影)，border-shadow(边框阴影)等
5 ： 新增了结构伪类选择器，像 first-child，nth-child(n)之类的
6 ： 先从颠覆性的属性开始比如：rotate(旋转)，translate(位移)，scale(缩放)等
7 ： Css3的动画 animation
8 ： 还有是css3的过渡， transition: all 1s;
9 ： 再列举一些简单的属性比如说: border-radius(圆角)，box-shadow(盒子阴影)，border-shadow(边框阴影)等
10 ： 新增了结构伪类选择器，像 first-child，nth-child(n)之类
问题扩展
IE 盒模型
标准盒模型
结合项目中使用
项目中均可以使用，尤其实在移动端项目中！
题目7：怎样添加、移除、移动、复制、创建和查找节点？
问题分析
这个问题是面试管在考查原生js的节点的操作，对js基础掌握的熟练度，核心是在dom这一块知识的考查!
核心问题讲解
Javascript对节点操作，有创建，添加，查找，复制、删除四个方面
问题扩展
在Javascript中，可以创建各种类型的节点。
以上四种方法都是 document 对象的方法。
createElement()
createElement()用来创建一个元素节点，即 nodeType=1 的节点。
语法：document.createElement(tagName)
其中，tagName 为HTML标签的名称，并将返回一个节点对象。
例如，创建<div>标签和<p>标签的语句如下：
createTextNode()
createTextNode()用来创建一个文本节点，即 nodeType=3 的节点。
语法：document.createTextNode(text)
其中，text 为文本节点的内容，并将返回一个节点对象。
例如，创建一个文本节点，内容为“ 这是文本节点 ”：
createComment()
createComment()用来创建一个注释节点，即 nodeType=8 的节点。
语法：document.createComment(comment)
其中，comment 为注释的内容，并将返回一个节点对象。
例如，创建一个注释节点，内容为“ 这是一个注释节点 ”：
createDocumentFragment()
createDocumentFragment() 用来创建文档碎片节点。
文档碎片节点是若干DOM节点的集合，可以包括各种类型的节点，如 元素节点、文本节点、注释节点 等。文档碎片节点在创建之初是空的，需要向它添加节点。
语法：document.createDocumentFragment();
例如，创建一个文档碎片节点，并将它赋值给变量：
结合项目中使用
一般的项目都是使用，使用场景一般是需要动态生成结构的项目！
题目8：一次完整的http请求过程
问题分析
Http 的header会给我们的请求包装，比如AF中经常设置的可接受的Accept（text/html） --》域名解析，根据域名找到服务器的IP --> 发起TCP的3次握手 --> 建立TCP连接后发起http请求 --> 服务器响应http请求，浏览器得到html代码 --> 浏览器解析html代码，并请求html代码中的资源（如js、css、图片等） --> 浏览器对页面进行渲染呈现给用户，每次都请求都会经过 客户端的应用层（http协议）--> 客户端的传输层（tcp或udp协议） -->客户端的网络层（ip协议） --> 客户端的链路层（网卡，路由器等） --> ------------------经过dns解析，穿越多个isp（互联网服务提供商，移动，联通，电信等），各种数据交换，找到了服务器------------------- 服务器的链路层 -->服务器的网络层 -->服务器的传输层 -->服务器的应用层。 这个请求完成了。服务器响应 与请求相反，倒过来看即可。
核心问题讲解
域名解析 --> 发起TCP的3次握手 --> 建立TCP连接后发起http请求 --> 服务器响应http请求，浏览器得到html代码 --> 浏览器解析html代码，并请求html代码中的资源（如js、css、图片等） --> 浏览器对页面进行渲染呈现给用户
问题扩展
1.域名解析
a）首先会搜索浏览器自身的DNS缓存（缓存时间比较短，大概只有1分钟，且只能容纳1000条缓存）
b）如果浏览器自身的缓存里面没有找到，那么浏览器会搜索系统自身的DNS缓存
c）如果还没有找到，那么尝试从 hosts文件里面去找
d）在前面三个过程都没获取到的情况下，就递归地去域名服务器去查找，具体过程如下
DNS优化：两个方面：DNS缓存、DNS负载均衡
2.TCP连接（三次握手）
拿到域名对应的IP地址之后，User-Agent（一般指浏览器）会以一个随机端口（1024<端口<65535）向服务器的WEB程序（常用的有httpd，nginx）等的80端口。这个连接请求（原始的http请求经过TCP/IP4层模型的层层封包）到达服务器端后（这中间有各种路由设备，局域网内除外），进入到网卡，然后是进入到内核的TCP/IP协议栈（用于识别连接请求，解封包，一层一层的剥开），还有可能要经过Netfilter防火墙（属于内核的模块）的过滤，最终达到WEB程序，最终建立了TCP/IP的连接
图解：
3.建立TCP连接之后，发起HTTP请求
HTTP请求报文由三部分组成：请求行，请求头和请求正文
请求行：用于描述客户端的请求方式，请求的资源名称以及使用的HTTP协议的版本号（例：GET/books/java.html HTTP/1.1）
请求头：用于描述客户端请求哪台主机，以及客户端的一些环境信息等
注：这里提一个请求头 Connection， Connection设置为 keep-alive 用于说明 客户端这边设置的是，本次HTTP请求之后并不需要关闭TCP连接，这样可以使下次HTTP请求使用相同的TCP通道，节省TCP建立连接的时间
请求正文：当使用POST, PUT等方法时，通常需要客户端向服务器传递数据。这些数据就储存在请求正文中（GET方式是保存在url地址后面，不会放到这里）
4.服务器端响应http请求，浏览器得到html代码
HTTP响应也由三部分组成：状态码，响应头和实体内容
状态码：状态码用于表示服务器对请求的处理结果
列举几种常见的：200（没有问题） 302（要你去找别人） 304（要你去拿缓存） 307（要你去拿缓存） 403（有这个资源，但是没有访问权限） 404（服务器没有这个资源） 500（服务器这边有问题）
若干响应头：响应头用于描述服务器的基本信息，以及客户端如何处理数据
实体内容：服务器返回给客户端的数据
注：html资源文件应该不是通过 HTTP响应直接返回去的，应该是通过nginx通过io操作去拿到的吧
5.浏览器解析html代码，并请求html代码中的资源
浏览器拿到html文件后，就开始解析其中的html代码，遇到js/css/image等静态资源时，就向服务器端去请求下载（会使用多线程下载，每个浏览器的线程数不一样），这是时候就用上 keep-alive特性了，建立一次HTTP连接，可以请求多个资源，下载资源的顺序就是按照代码里面的顺序，但是由于每个资源大小不一样，而浏览器又是多线程请求请求资源，所以这里显示的顺序并不一定是代码里面的顺序。
6.浏览器对页面进行渲染呈现给用户
最后，浏览器利用自己内部的工作机制，把请求的静态资源和html代码进行渲染，渲染之后呈现给用户
浏览器是一个 边解析边渲染 的过程。首先浏览器 解析HTML文件构建DOM树 ，然后 解析CSS文件构建渲染树 ，等到渲染树构建完成后，浏览器开始布局渲染树并将其绘制到屏幕上。这个过程比较复杂，涉及到两个概念: reflow(回流)和repain(重绘)。DOM节点中的各个元素都是以盒模型的形式存在，这些都需要浏览器去计算其位置和大小等，这个过程称为relow;当盒模型的位置,大小以及其他属性，如颜色,字体,等确定下来之后，浏览器便开始绘制内容，这个过程称为repain。页面在首次加载时必然会经历reflow和repain。reflow和repain过程是非常消耗性能的，尤其是在移动设备上，它会破坏用户体验，有时会造成页面卡顿。所以我们应该尽可能少的减少reflow和repain。
JS的解析是由浏览器中的JS解析引擎完成的。JS是单线程运行，JS有可能修改DOM结构，意味着JS执行完成前，后续所有资源的下载是没有必要的，所以JS是单线程，会阻塞后续资源下载
结合项目中使用
前后台分离的项目中通过请求接口获取数据都是一个http请求过程
题目9：$(document).ready()是个什么函数？为什么要用它
问题分析
面试官主要是想考察考察学生ready（）函数是什么什么时候执行和window.onload有什么区别
核心问题讲解
解析：考察学生对当 DOM（文档对象模型） 已经加载，并且页面（包括图像）已经完全呈现时，会发生 ready 事件。
使用语法：
语法1
$(document).ready(function)
语法2
$().ready(function)
问题扩展
它和window.onload有什么区别？
1、执行时间上的区别：window.onload必须等到页面内（包括图片的）所有元素加载到浏览器中后才能执行。而$(document).ready(function(){})是DOM结构加载完毕后就会执行。
2、编写个数不同：window.onload不能同时写多个，如果有多个window.onload，则只有最后一个会执行，它会把前面的都覆盖掉。$(document).ready(function(){})则不同，它可以编写多个，并且每一个都会执行。
由于在$(document).ready()方法内注册的事件，只要DOM就绪就会被执行，因此可能此时元素的关联文件未下载完，例如与图片有关的HTML下载完毕，并且已经解析为DOM树了，但很有可能图片还未加载完毕，所以例如图片的高度和宽度这样的属性此时不一定有效。
要解决这个问题，可以使用JQuery中另一个关于页面加载的方法---load（）方法。load（）方法会在元素的onload事件中绑定一个处理函数。如果处理函数绑定在元素上，则会在元素的内容加载完毕后触发。如：$(window).load(function(){})=====window.onload = function(){}...
结合项目中使用
外链js的时候现在js中写一个$(function() {}) or $(document).ready(),让这个函数来执行操作dom的函数题目10：vuex是什么？它实现数据状态改变的思路是什么？
问题分析
考察求职者对于vuex的理解与掌握情况，vuex 是vue的学习与开发中的一个难点，很多学生只闻其名而不知其意。
核心问题讲解
1. 什么是vuex ：
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。
2. 他的属性方法有哪些？每个阶段是干嘛的？
• State、mutations、getters、actions、 modules
Store
表示对Vuex对象的全局引用。组件通过Store来访问Vuex对象中的State
• State
Vuex对象的状态，即其所拥有的数据
• Getter
相当于Store的计算属性。因为就像计算属性一样，Getter的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。下面会说到具体的使用场景
• Mutation
定义了对State中数据的修改操作。组件使用State中的数据的时候并不能直接对数据进行修改操作，需要调用Mutation定义的操作来实现对数据的修改。这也是Vuex定义中所说的用相应的规则来让数据发生变化的具体实现
• Action
Mutation中定义的操作只能执行同步操作，Vuex中的异步操作在Action中进行，Action最终通过调用Mutation的操作来更新数据
• Module
Store和State之间的一层，便于大型项目管理，Store包含多个Module，Module包含State、Mutation和Action
问题扩展
Vue除了这个vuex是实现组件之前的数据传递还能使用什么方法实现组件之间的数据传递？？？
父子组件的话还可使 使用：
父传子props在子组件进行接受，
子传父亲：在子组件中用$emit()进行数据传递
结合项目中使用
对于vue项目中需要大批量的处理数据的时候，可以使用vuex例如：购物车