面试问题总结

Posted 2020-12-05 phoebeyue

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了面试问题总结相关的知识，希望对你有一定的参考价值。

一、响应式布局

一家公司问了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;

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