2019面试题笔记(1)

1.0.1+0.2 === 0.3?

在chrome调试中输入console.log(0.1+0.2)

console.log(0.1+0.2)
// 0.30000000000000004
console.log(0.1+0.2 === 0.3)
//false复制代码

在JavaScript中的二进制的浮点数0.1和0.2并不是十分精确，在他们相加的结果并非正好等于0.3，而是一个比较接近的数字 0.30000000000000004 ，所以条件判断结果为 false。

2. 垂直水平居中实现方法

仅居中元素定宽高适用

• absolute + 负margin
• absolute + margin auto
• absolute + calc

居中元素不定宽高

• absolute + transform
• lineheight
• writing-mode
• table
• css-table
• flex
• grid

absolute + 负margin

/* html代码 */
<div class="context">
    <div class="box size"></div>
</div>

/* css 样式*/
.context{
    border: 1px solid red
    width: 300px;
    height: 300px;
    position: relative;
}
/*内容实现绝对定位, 负margin设定既可以达到水平垂直定位*/
.box.size {
    position: resolute;
    width: 100px;
    height: 100px;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
}
复制代码

absolute + margin auto

/* html代码 */
<div class="content">
    <div class="box size">123123</div>
</div>
/* css样式  */
.content{
    position:realtive
}
/* 这种方式通过设置各个方向的距离都是0，此时再讲margin设为auto，就可以在各个方向上居中了 */
.box.size {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}复制代码

lineheight

利用行内元素居中属性也可以做到水平垂直居中

<div class="content">
    <div class="box">1231</div>
</div>
/* css样式 */
.content{
    line-height:300px;
    text-align: center;
} 
/* 把box设置为行内元素，通过text-align:center,vertical-align:middle设置垂直居中 */

.box{display: inline-block; vertical-align: middle; line-height: initial;}复制代码

大多数情况下vertical-align:middle不是那么的可靠，so不推荐使用(因为我用过多次效果不好)。

table

曾经table被用来做页面布局现在很少人使用了，而且table可以较好实现水平垂直居中，但是会增加很多冗余代码。

<table>
    <tbody>
        <tr>
            <td class="content">
                <div class="box">123123</div>
            </td>
        </tr>
    </tbody>
</table>复制代码

/* css样式 */
.content {
    text-align: center;
    width: 300px;
    height: 300px;

}
.box {
    display: inline-block;
    width:100px;
    height: 100px;
}复制代码

flex

flex布局不管是在自适应还是移动端都给了我们较好的解决方法，现代化的布局阮一峰的博客讲的挺好

<div class="content">
    <div class="box">123123</div>
</div>

复制代码

/ *css样式* /
.content{
    display: flex;
    justify-content: center;
    align-items: center;
}复制代码

flex布局挺好。

转载于:https://juejin.im/post/5c7a8d73e51d456a0458a4cf