我在面试中碰到的面试题

1,flex弹性盒子布局与传统盒模型布局的区别和优点?

   答:区别:

      盒模型:1),盒模型内元素分配器父元素空间

          2),建立在块级和行级方向上(对块级元素和行内元素的布局),

      弹性盒子:1),盒内子元素分配其父元素的可用空间(剩余空的空间)。

           2),建立在弹性流上(元素随可显示区域变化呈流式布局)。

    优点:自适应,用在移动端开发非常合适,使用简单,哪怕对不定宽高元素依然好用。

2,手写快速排序算法:

  

function quicksort(arr,l,r){
if(l>r){return;}

var temp = arr[l],t,i = l,j = r;

while(i!=j){
while(arr[j]>=temp && i<j)j--;

while(arr[i]<=temp && i<j)i++;

if(i<j){
t = arr[j];
arr[j] = arr[i];
arr[i] = t;
}
}
arr[l] = arr[j];
arr[j] = temp;

quicksort(arr,l,i-1);
quicksort(arr,i+1,r);
}

var arr = [12,89,56,3,45,47,15,53,41,32,99,11,8];
quicksort(arr,0,arr.length-1);

console.log(arr);

3,POST与GET的区别:

  * POST相对GET更安全。

  * GET请求参数包含在URL中,而POST放在Request body里面。

  * GET请求在浏览器回退的时候是无害的,POST会重新提交请求。

  * GET产生的url地址可以被保存为书签,POST不可以。

  * GET请求只能进行URL编码,POST无限制。

  * GET请求在url传递参数的时候有长度限制,POST没有。

  * GET请求会被浏览器自动缓存,POST不会。

  * GET请求参数会被完整的保存在历史记录里面,POST中的参数不会被保留。

  * 对于参数的数据类型,GET只接受ASCLL字符,POST没有限制。

4,谈谈CSS中的定位与文档流的关系:

  relative(相对定位):设置元素为相对定位的,可以通过left,right,top,bottom来设置元素相对原位置的偏移量。该元素并未脱离文档流,原位置依然保留,其他相邻元素

           并不会占用其位置。

  absolute(绝对定位):设置元素为绝对定位,同样可以通过left,right,top,bottom来设置元素相对其父元素或更上层元素中最近的一个设置有position的元素来定位。该元素

             会脱离文档流,其后元素会占用其原始位置。

  fixed(固定定位):设置元素为固定定位后,其表现形式与absolute相似,只是它是相对其根元素来偏移。

5,float脱离文档流与absolute定位脱离文档流的表现区别:

  float脱离文档流:使用float浮动脱离文档流的时候,其他元素会当该元素不存在,占用其位置,但是其他元素内的文本却可以“看到”浮动元素的原位置,导致其飘在浮动元素

          原位置的周围,这就是float的特性。

  absolute定位脱离文档流:使用absolute定位脱离文档流的时候,其他元素同样会当该元素不存在,包括其他元素内的文本都会当作浮动元素不存在。

6,CSS3新增属性:

  * border-radius(圆角):四个角的圆角大小 | 左上角右下角  右上角左下角 | 左上角 右上角 右下角 左下角;

  * box-shadow(盒阴影):X轴偏移量  Y轴偏移量  模糊距离  阴影大小  阴影颜色  设置阴影为内阴影(inset,可省略)。

  * box-sizing:content-box | border-box | inherit;

  * linear-gradient(线性渐变):background:linear-gradient(color1,color2);

  * radial-gradient(径向渐变):background:radial-gradient(color1,color2);

  * text-shadow(文字阴影):X轴偏移量  Y轴偏移量  阴影大小  阴影颜色;

  * word-wrap(单词换行):normal(只允许在断点处换行)|break-world(如果单词过长,截断强制换行);

  * word-break(单词换行):normal(浏览器默认的换行规则,一般是不允许长单词内部换行) | break-all(允许在单词内换行) | keep-all(只能在半角空格或连字符处换行);

7,说出几种垂直居中元素的方法(下面只列出出来常用的三种):

  * display:table-cell; + vertical-align:middle;

  * display:flex; + justify-content:center; + align-items:center;

  * position:absolute; + left + top

8,谈谈页面的重绘和回流以及优化:

  当页面中某个元素的尺寸和结构和布局发生变化的时候,需要重新构建元素。这就会触发回流,每个页面至少要回流一次,就是页面第一次加载的时候。在回流的时候,浏览器

  会改变的元素失效,并重新构建这个元素,完成回流后,浏览器会重新受影响的元素到页面,这个时候就发生了重绘。回流必然触发重绘,但是重绘不一定会导致回流。

  以下是会触发回流的操作:

      * 添加或删除可见的DOM元素。

      * 改变元素位置。

      * 改变元素尺寸 ---- 边距,边框,宽度,高度。

      * 内容改变导致的元素尺寸改变。

      * 浏览器窗口尺寸变化。

  优化:

      * 浏览器的自带优化:浏览器会维护一个队列,把所有的会引起回流或重绘的操作放到里面。等队列中的操作到了一定数量的时候或者到了一定时间间隔的时候就会

                一起执行这些操作,这样就让多次回流和重绘合并成一次。

      * 开发者优化:尽量减少不必要的DOM操作修改,减少对一些style信息的请求。

猜你喜欢

转载自www.cnblogs.com/huangzhenghaoBKY/p/9074686.html
今日推荐