码迷,mamicode.com
首页 > 其他好文 > 详细

面试问题总结

时间:2018-07-20 00:21:22      阅读:217      评论:0      收藏:0      [点我收藏+]

标签:article   兼容问题   star   参考   查询   兼容   art   hidden   改变   

一、响应式布局

一家公司问了em和rem的区别,另一家公司先问了一下px,em,rem的区别,然后又问是否熟悉响应式布局

(1)px,em,rem的区别

px:像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。实际上只需要知道em是相对于父元素的就行了,父元素字体大小是10px,1em就等于10px。

rem也是相对长度单位,但相对的只是HTML根元素

目前,除了IE8及更早版本外,所有浏览器均已支持rem。对于不支持它的浏览器,应对方法也很简单,就是多写一个绝对单位的声明。

p {font-size:14px; font-size:.875rem;}

(2)响应式布局

流式布局%,em,rem,弹性布局flex都属于响应式布局,当然最出名的是媒体查询

流式布局和弹性布局及配合媒体查询 是 响应性布局的最好方式。

详情参考手把手教你响应式布局(一)

二、两栏布局,一侧固定一侧自适应的几种方式

<div class="wrapper" id="wrapper">
  <div class="left">
    左边固定宽度,高度不固定 </br> </br></br></br>高度有可能会很小,也可能很大。
  </div>
  <div class="right">
    这里的内容可能比左侧高,也可能比左侧低。宽度需要自适应。</br>
    基本的样式是,两个div相距20px, 左侧div宽 120px
  </div>
</div>

(1)基本方法

.wrapper {
    padding: 15px 20px;
    border: 1px dashed #ff6c60;
}
.left {
    width: 120px;
    border: 5px solid #ddd;
}
.right {
    margin-left: 20px;
    border: 5px solid #ddd;
}

(2)float方法

.wrapper-float {
    overflow: hidden;        // 清除浮动
}

.wrapper-float .left {
    float: left;
}

.wrapper-float .right {
    margin-left: 140px;
}

(3)使用float+BFC方法

.wrapper-float-bfc {
    overflow: auto;
}

.wrapper-float-bfc .left {
    float: left;
    margin-right: 20px;
}

.wrapper-float-bfc .right {
    margin-left: 0;
    overflow: auto;
}

(4)使用absolute+margin-left方法

.wrapper-absolute .left {
    position: absolute;
}

.wrapper-absolute .right {
    margin-left: 150px;
}

(5)flex方案

.wrapper-flex {
    display: flex;
    align-items: flex-start;
}

.wrapper-flex .left {
    flex: 0 0 auto;
}

.wrapper-flex .right {
    flex: 1 1 auto;
}

需要注意的是,flex容器的一个默认属性值:align-items: stretch;。这个属性导致了列等高的效果。
为了让两个盒子高度自动,需要设置: align-items: flex-start;

参考:七种实现左侧固定,右侧自适应两栏布局的方法

三、h5废弃的标签和属性及新增的标签和属性

四、浏览器的内核有哪些

1、IE浏览器内核:Trident内核,也被称为IE内核;

2、Chrome浏览器内核:Chromium内核 → Webkit内核 → Blink内核;

3、Firefox浏览器内核:Gecko内核,也被称Firefox内核;

4、Safari浏览器内核:Webkit内核;

5、Opera浏览器内核:最初是自主研发的Presto内核,后跟随谷歌,从Webkit到Blink内核;

五、box-sizing有哪几种

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

六、通过原生js和jQuery获取元素的区别

jQuery获取的是jQuery对象,原生js获取到的是DOM元素

七、工作中的增删改查是哪些方法

JS数组操作之增删改查的简单实现

新增一条数据,编辑原有数据,删除数据,查询数据

八、Vue的生命周期有哪些,页面挂载之前created和mounted使用的区别

九、你做过哪些性能优化

十、截取字符串的方法有哪些

十一、改变this指向的方法有哪些?call和apply的区别

十二、知道哪些ES6语法,解构赋值数组和对象的区别?

十三、你对jQuery优化有哪些建议?

十四、AMD和CMD

十五、如何创建一个对象,划出内存图

十六、new具体做了哪些事情

十七、CSS3有哪些,如何兼容CSS3和H5新标签

十八、doctype声明,严格模式和混合模式是什么,意义

十九、浏览器常见兼容问题

二十、定位有哪些

二十一、如何实现div居中,如何让float元素居中

二十二、如何区分html和html5

 

面试问题总结

标签:article   兼容问题   star   参考   查询   兼容   art   hidden   改变   

原文地址:https://www.cnblogs.com/phoebeyue/p/9339008.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!