前端面试（我的收藏总结）CSS篇

前端面试（我的收藏总结）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;
        text-overflow: ellipsis;
        /* 英文状况换行 */
        word-wrap:break-word;
        word-break:break-all;
    }
    
复制代码

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; 
复制代码

• 网格布局

参考：github.com/Sweet-KK/cs…

关于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