前端面试

2021-10-27 17:00:08 阅读：221 来源： 互联网

标签：jQuery 前端元素 height 面试 position margin absolute

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回调处理返回数据。

5.跨域怎么解决

标签：jQuery,前端,元素,height,面试,position,margin,absolute
来源： https://www.cnblogs.com/HQL97/p/15471572.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

前端面试