# 常见面试题

# BFC

Block Formatting Context, 块级格式化上下文，它是一个独立的渲染区域，一个独立的盒子，内部布局不受外界的影响

# 如何触发

满足下列条件之一就可触发 BFC。

根元素，即 HTML 元素
float 的值不为 none
position 的值为 absolute 或 fixed
overflow 的值不为 visible
display 的值为 inline-block、table-cell、table-caption

# BFC 有哪些作用？

清除浮动

<style>
    .outer {
        overflow: auto;
    }
    .inner {
        width: 200px;
        height: 200px;
        float: left;
    }
</style>
<body>
    <div class='outer'>
        <div class='inner'></div>
    </div>
</body>

外边距合并：同属于一个BFC的相邻元素外边距重叠

<style>
        .upper {
            height: 50px;
            margin: 20px;
            background: pink;
        }
        .lower {
            height: 50px;
            margin: 20px;
            background: lightblue;
        }
        .bfc {
            overflow: auto; //避免了外边距重叠
        }
</style>
<body>
    <div class="upper"></div>
    <div class="bfc">
        <div class="lower"></div>
    </div>
</body>

阻止元素浮动覆盖，实现两列布局

<style>
    .float {
        width: 20vw
        float: left;
    }

    .content {
        overflow: auto;
    }
</style>
<div class="float"></div>
<div class="content"></div>

# 选择器优先级

! important > 内联样式 > ID选择器 > class选择器 > 标签选择器 > 通配符(*) > 浏览器默认样式 > 继承样式

# 盒模型

讨论到盒模型，除了核心的content -> padding -> border -> margin，另一个要点就是元素的box-sizing属性。

浏览器默认的box-sizing: content-box，这意味着当我们设置元素的width，实际上是在设置content的长度。此时盒子的实际长度等于content(width) + padding + border

我们可以修改box-sizing为border-box，此时我们的width等于content + padding + border

# flex属性

容器属性

.flex-container {
    display: flex;
    flex-direction: row;
    /* 主轴的方向，默认row，从左往右 */
    flex-wrap: nowrap;
    /* 是否换行，默认不换行*/
    justify-content: center;
    /* 主轴上的布局，默认flex-start */
    align-items: center;
    /* 交叉轴上的布局，默认值flex-start */
    align-content: center;
    /* 多条轴线的布局 */
}

项目属性

.flex-items {
    order: 2;
    /* 项目的order， 越大的越后面*/
    flex-grow: 1;
    /* 扩张比例，默认0，不占剩余空间 */
    flex-shrink: 0;
    /* 缩小比例，默认1，自动缩小*/
    flex-basis: 200px;
    /* 主轴上的宽度 */
    flex: 1 0 200px;
    /* 上面三条的缩写 */
    align-self: flex-end;
    /* 修改项目的交叉轴布局*/
}

# 清除浮动

上述BFC清除浮动

添加额外的标签，应用clear:both

<style>
    .float {
        float: left;
    }
    .clear {
        clear: both;
    }
</style>
<div>
    <div class="float"></div>
    <div class="clear"></div>
</div>

使用伪元素，应用clear:both

<style>
    .float {
        float: left;
    }
    .clearfix:after {
        content: "";
        display: block;
        clear: both;
    }
</style>
<div class="clearfix">
    <div class="float"></div>
</div>

# display,visibility,opacity

都可以实现目标元素不可见，但是三者之间是有区别的

区别

display:none 目标元素不进入渲染树，不占用空间，不能点击；会造成回流，性能消耗比较大；当其作为父元素子元素也不会被渲染

visibility:hidden进入渲染树，占空间，但是不能点击；内部会重绘，性能影响相对小；作为父元素，子元素会继承该属性，但是可以改变

opacity:0进入渲染树，占空间，也可以点击；显示亮度的问题，启用GPU加速；作为父元素，子元素不会继承属性

# 文本溢出

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

# 自适应元素

vw，vh，rem，em

1em等于一倍父元素的字体的大小
1rem等于一倍根元素（html标签）的字体的大小
1vw等于1%的viewport宽
1vh等于1%的viewport高

# 性能优化

合并css文件，如果页面加载10个css文件,每个文件1k，那么也要比只加载一个100k的css文件慢。
减少css嵌套，最好不要嵌套三层以上。
不要在ID选择器前面进行嵌套，ID本来就是唯一的而且权限值大，嵌套完全是浪费性能。
建立公共样式类，把相同样式提取出来作为公共类使用。
减少通配符*或者类似[hidden="true"]这类选择器的使用，挨个查找所有...这性能能好吗？
巧妙运用css的继承机制，如果父节点定义了，子节点就无需定义。
拆分出公共css文件，对于比较大的项目可以将大部分页面的公共结构样式提取出来放到单独css文件里，这样一次下载后就放到缓存里，当然这种做法会增加请求，具体做法应以实际情况而定。
不用css表达式，表达式只是让你的代码显得更加酷炫，但是对性能的浪费可能是超乎你想象的。
少用css rest，可能会觉得重置样式是规范，但是其实其中有很多操作是不必要不友好的，有需求有兴趣，可以选择normolize.css。
cssSprite，合成所有icon图片，用宽高加上background-position的背景图方式显现icon图，这样很实用，减少了http请求。
善后工作，css压缩(在线压缩工具 YUI Compressor)
GZIP压缩，是一种流行的文件压缩算法。

Indomite

Choose mode

常见面试题