前端面试
1.CSS盒模型
当对一个文档进行布局（lay out）的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型（CSS basic box model），将所有元素表示为一个个矩形的盒子（box）。CSS 决定这些盒子的大小、位置以及属性（例如颜色、背景、边框尺寸…）。
每个盒子由四个部分（或称区域）组成，其效用由它们各自的边界（Edge）所定义（原文：defined by their respective edges，可能意指容纳、包含、限制等）。如图，与盒子的四个组成区域相对应，每个盒子有四个边界：内容边界 Content edge、内边距边界 Padding Edge、边框边界 Border Edge、外边框边界 Margin Edge。
内容区域 content area ，由内容边界限制，容纳着元素的“真实”内容，例如文本、图像，或是一个视频播放器。它的尺寸为内容宽度（或称 content-box 宽度）和内容高度（或称 content-box 高度）。它通常含有一个背景颜色（默认颜色为透明）或背景图像。
如果 box-sizing 为 content-box（默认），则内容区域的大小可明确地通过 width、min-width、max-width、height、min-height，和 max-height 控制。
内边距区域 padding area 由内边距边界限制，扩展自内容区域，负责延伸内容区域的背景，填充元素中内容与边框的间距。它的尺寸是 padding-box 宽度 和 padding-box 高度。
内边距的粗细可以由 padding-top、padding-right、padding-bottom、padding-left，和简写属性 padding 控制。
边框区域 border area 由边框边界限制，扩展自内边距区域，是容纳边框的区域。其尺寸为 border-box 宽度 和 border-box 高度。
边框的粗细由 border-width 和简写的 border 属性控制。如果 box-sizing 属性被设为 border-box，那么边框区域的大小可明确地通过 width、min-width, max-width、height、min-height，和 max-height 属性控制。假如框盒上设有背景（background-color 或 background-image），背景将会一直延伸至边框的外沿（默认为在边框下层延伸，边框会盖在背景上）。此默认表现可通过 CSS 属性 background-clip 来改变。
外边距区域 margin area 由外边距边界限制，用空白区域扩展边框区域，以分开相邻的元素。它的尺寸为 margin-box 宽度 和 margin-box 高度。
外边距区域的大小由 margin-top、margin-right、margin-bottom、margin-left，和简写属性 margin 控制。在发生外边距合并的情况下，由于盒之间共享外边距，外边距不容易弄清楚。
最后，请注意，除可替换元素外，对于行内元素来说，尽管内容周围存在内边距与边框，但其占用空间（每一行文字的高度）则由 line-height 属性决定，即使边框和内边距仍会显示在内容周围。
2.CSS实现水平、垂直、水平垂直居中
水平居中：
一、行内元素：text-align:center
二、确定宽度(width)的块级元素：
(1)margin-left:auto;margin-right:auto;
(2)position:absolute;margin-left=-(width值)/2;
(3)position:absolute;left:0;top:0;right:0;bottom:0;margin:auto;
三、未知宽度(width)的块级元素：
(1)display:table;margin:auto;
(2)position:absolute;transform:translateX(-50%);
(3)父元素{display:inline-block;position:relative;left:50%}
目标元素{position:relative;right:50%;}
(4)父元素{display:flex;flex-direction:column;}
目标元素{align-self:center};
(5)父元素{display:flex;}
子元素{margin:auto;}
(6){width:fit-content;margin-left:auto;margin-right:auto;}
垂直居中：
一、单行的行内元素
{height:父元素height;}
二、多行的行内元素
父元素{display:table-cell;vertical-align:middle;}
三、块级元素
(1)高度(height)确定
父元素{position:relative;}
目标元素{position:absolute;top:50%;margin-top:-height值/2;}
(2)高度(height)未知
父元素{position:relative;}
目标元素{position:absolute;top:50%;transform:translateY(-50%);}
(3)
父元素{display:flex;align-items:center;}
水平垂直居中:
仅居中元素定宽高适用
- absolute + 负margin
- absolute + margin auto
- absolute + calc
居中元素不定宽高
- absolute + transform
- lineheight
- writing-mode
- table
- css-table
- flex
- grid
目标元素定宽高:
(1)absolute+负margin
父元素{position:relative}
目标元素{position:absolute;top:50%;left:50%;margin-left:-width值/2;margin-top:-height值/2;}
(2)absolute+margin auto
父元素{position:relative}
目标元素{position:absolute:top:0;left:0;right:0;bottom:0;margin:auto;}
(3)absolute+calc
父元素{position:relative;}
目标元素{position:absolute;top:calc(50%-height值/2);left:calc(50%-width值/2);}
目标元素不定宽高:
(1)absolute+transform
父元素{position:relative;}
目标元素{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}
(2)lineheight
父元素{text-align:center;}
目标元素{display:inline-block;vertical-align:middle;line-height:initial;text-align:left;}
(3)writing-mode
祖父元素{writing-mode:vertical-lr;text-align:center;}
父元素{writing-mode:horizontal-tb;display:inline-block;text-align:center;width:100%;}
目标元素{display:inline-block;margin:auto;text-align:left;}
(4)css-table
父元素{display:table-cell;text-align:center;vertical-align:middle;}
目标元素{display:inline-block;}
(5)flex
父元素{display:flex;justify-content:center;align-items:center;}
(6)grid
父元素{display:grid;}
目标元素{align-self:center;justify-self:center;}
3.jQuery的dollar($)是怎么实现的
function jQuery(selector, context){ return new jQuery.fn.init(selector, context); } //给原型提供一个简写方式 jQuery.fn = jQuery.prototype = { }; //init才是jQuery中真正的构造函数 var init = jQuery.fn.init = function(selector, context){ }; //把构造函数的原型，替换为jQuery工厂的原型 //这么做的目的是为了实现jQuery的插件机制，让外界可以通过jQuery方便的进行扩展 //构造函数的原型 == new出来的这个实例jQuery.fn = jQuery.prototype 这样就实现了原型继承，可以在$ 对象上面封装自己的方法。 init.prototype = jQuery.fn; windows.jQuery = windows.$ = jQuery;
1.jQuery借助了沙箱模式，其实整个jQuery包中的代码就是一个自执行函数，并且把window对象作为参数传递了过去。
2.jQuery函数只是一个工厂，真正的构造函数时jQuery.fn.init( )
3.把init的原型对象替换为jQuery.fn，其实也就是替换为了jQuery这个函数自己的原型对象，也就是jQuery.prototype，这么做的目的是为了实现插件机制，让外界可以通过jQuery方便的进行扩展。
4.jQuery的ajax原理
Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。要清楚这个过程和原理，我们必须对 XMLHttpRequest有所了解。
XMLHttpRequest是ajax的核心机制，它是在IE5中首先引入的，是一种支持异步请求的技术。简单的说，也就是javascript可以及时向服务器提出请求和处理响应，而不阻塞用户。达到无刷新的效果。
1、通过 new XMLHttpRequest 或其它的形式（指IE）生成ajax的对象xhr。
2、通过xhr.open(type, url, async, username, password)的形式建立一个连接。
3、通过setRequestHeader设定xhr的请求头部（request header）。
4、通过send(data)请求服务器端的数据。
5、执行在xhr上注册的onreadystatechange回调处理返回数据。
readyState值：
0.请求未初始化
1.服务器连接已建立
2.请求已接收
3.请求处理中
4.请求已完成，且响应已就绪
status值：
200 “OK”
404 未找到页面
5.跨域怎么解决
1.CORS
CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。
它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。
CORS请求设置的响应头字段，都以 Access-Control-开头:
1）Access-Control-Allow-Origin：必选
它的值要么是请求时Origin字段的值，要么是一个*，表示接受任意域名的请求。
2）Access-Control-Allow-Credentials：可选
它的值是一个布尔值，表示是否允许发送Cookie。默认情况下，Cookie不包括在CORS请求之中。设为true，即表示服务器明确许可，Cookie可以包含在请求中，一起发给服务器。这个值也只能设为true，如果服务器不要浏览器发送Cookie，删除该字段即可。
3）Access-Control-Expose-Headers：可选
CORS请求时，XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段，就必须在Access-Control-Expose-Headers里面指定。上面的例子指定，getResponseHeader(‘FooBar’)可以返回FooBar字段的值。
缺点：不兼容IE10以下浏览器。
2.JSONP
jsonp的原理就是利用<script>标签没有跨域限制，通过<script>标签src属性，发送带有callback参数的GET请求，服务端将接口返回数据拼凑到callback函数中，返回给浏览器，浏览器解析执行，从而前端拿到callback函数返回的数据。
缺点：只能发送get一种请求。
6.JSONP的原理
当需要通讯时，本站脚本创建一个<script>元素，地址指向第三方的API网址，，形如：
并提供一个回调函数来接收数据（函数名可约定，或通过地址参数传递）。
第三方产生的响应为json数据的包装（故称之为jsonp，即json padding），形如：
callback({"name":"hax","gender":"Male"})
这样浏览器会调用callback函数，并传递解析后json对象作为参数。本站脚本可在callback函数里处理所传入的数据。
7.JS的事件绑定
（1）px单位
px（像素），国内网站相对来说用得比较多，任意浏览器的默认字体高都是16px。
相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
IE无法调整那些使用px作为单位的字体大小，国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；；
（2）pt单位
pt是point，是印刷行业常用单位，等于1/72英寸。
（3）em单位
相对长度单位。相对于当前对象内文本的字体尺寸。如当前行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸16px。
em才是真正的“相对单位”，它不是一个具体的数值，而是相对于父元素的属性计算出来的大小，一般移动终端布局用em比较合适。
(4) rem单位
rem单位是CSS3中新增的一个相对单位，只不过它要比em单位强大一些
rem相对于根元素HTML,而如果我们想修改大小，只需修改根元素HMTL 的大小就可以了。
除了IE8及更早的版本个，目前所有的主流浏览器均支持此属性。
10.flex布局和传统布局有什么区别
Flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为 Flex 布局。
注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称”容器”。它的所有子元素称为 Flex 项目（flex item），简称”项目”。
容器的属性：
（1）justify-content属性
justify-content属性定义了项目在主轴上的对齐方式。
flex-start(默认值):左对齐
flex-end:右对齐
center:居中
space-between:两端对齐，项目之间的间隔相等
space-around:每个项目两侧的间隔相等(项目之间的间隔比项目与边框之间的间隔大一倍)
(2)align-items属性
align-items属性定义项目在交叉轴(纵轴)上如何对齐。
flex-start:交叉轴的起点对齐
flex-end:交叉轴的终点对齐
center:交叉轴的中点对齐
baseline:项目的的第一行文字的基线对齐
stretch:如果项目未设置高度或高度为auto，将项目高度设为容器高度
(3)flex-direction属性
flex-direction属性决定主轴的方向
row(默认值):主轴为水平方向，起点在左端
row-reverse:主轴为水平方向，起点在右端
column:主轴为垂直方向，起点在上沿
column-reverse:主轴为垂直方向，起点在下沿
(4)flex-wrap属性
nowrap(默认):不换行
wrap:换行，第一行在上方
wrap-reverse:换行,第一行在下方
(5)flex-flow
flex-direction和flex-wrap的简写,默认为row nowrap
项目的属性:
(1)order
定义项目的排列顺序,数值越小排列越靠前,默认为0
(2)flex-grow
定义项目的放大比例.默认为0,即如果存在剩余空间也不放大
如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
(3)flex-shrink
定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
负值对该属性无效。
(4)flex-basis
定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。
(5)flex
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
(6)align-self
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
11.双飞翼布局
侧边两栏宽度固定，中间栏宽度自适应.
圣杯布局和双飞翼布局达到的效果基本相同，都是侧边两栏宽度固定，中间栏宽度自适应。 主要的不同之处就是在解决中间部分被挡住的问题时，采取的解决办法不一样，圣杯布局是在父元素上设置了padding-left和padding-right，在给左右两边的内容设置position为relative，通过左移和右移来使得左右两边的内容得以很好的展现，而双飞翼则是在center这个div中再加了一个div来放置内容，在给这个新的div设置margin-left和margin-right 。
浙公网安备 33010602011771号