2019面试题笔记(1)

╰半橙微兮° 2022-10-01 06:57 80阅读 0赞

### 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布局不管是在自适应还是移动端都给了我们较好的解决方法，现代化的布局[阮一峰][Link 1]的博客讲的挺好

<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

[Link 1]: https://link.juejin.im?target=http%3A%2F%2Fwww.ruanyifeng.com%2Fblog%2F2015%2F07%2Fflex-grammar.html%3Futm_source%3Dtuicool%29