前端面试（个人收藏总结）html篇

前端面试（个人收藏总结）javascript篇（一）

前端面试（个人收藏总结）javascript篇（二）

文本不换行

    /*单行文本*/.single-line{overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}/*多行文本（注：目前仅webkit内核支持）*/.multi-row{overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;}复制代码

CSS样式优先级

!important > 行内样式 > ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

• 权重计算
• 后写优先

雪碧图的作用

• 减少HTTP请求数，提高加载性能
• 减少图片大小

display:inline-block的间距问题

由于空白字符的原因

解决：font-size: 0

如何清除浮动

• overflow:hidden（原理：BFC）
• ::after{clear:both}
• .clear{clear:both}

如何适配移动端

viewport、 rem、 media查询、 响应式设计：隐藏、折行、自适应

页面三栏布局实现方式

• 浮动布局
• 定位布局
• flexbox布局
• 表格布局
• 网格布局

盒子垂直水平居中实现方式

• 定位 + margin：

 position: absolute; left: 50%; top: 50%; margin-left:-自身一半宽度; margin-top: -自身一半高度;
复制代码

• 定位 + transform：

 position: relative / absolute;left: 50%; top: 50%;transform: translate(-50%, -50%);
复制代码

• 表格布局：

父级 display: table-cell; vertical-align: middle;  子级 margin: 0 auto;
复制代码

• flex 布局：

父级 display: flex;align-items: center;justify-content: center;
复制代码

• 网格布局

参考：https://github.com/Sweet-KK/css-layout

关于CSS盒模型

标准模型：宽高 = content

IE模型：宽高 = border+padding+content

边距重叠（塌陷）问题

上下2个div分别设置margin-bottom和margin-top，margin值合并取最大值。父div嵌套子div并设子div宽高margin-top，父div=子div宽高并会margin值合并取最大值。

解决原理：BFC

解决办法：overflow：hidden

什么是格式化上下文

格式化上下文，它指的是具有某种CSS格式化规则（布局规则）的上下文环境，在这个上下文环境内的所有子元素，都将根据其特定的CSS格式化规则来进行排列。

BFC

块级格式化上下文

规则：

• BFC元素垂直方向的边距会重叠；

• 占据文档流的BFC元素不会和浮动元素重叠；

• BFC是个独立容器里外互不影响；

• 计算BFC高度时浮动元素也会参与计算（如清除浮动）

如何创建：overflow、 float、 postion(absolute 或 fixed)、 dispay(inline-box和table相关的以及flex和grid)

FFC

自适应格式化上下文

规则：参考flex布局

如何创建：flex或inline-flex