css面试题汇总（持续更新）

前言：这篇随笔是为了准备后面的面试而整理的，网上各种面试题太多了，但是我感觉很多太偏了，而且实际开发过程中并不会遇到，因此这里我整理一些比较常用的，或者是相对比较重要的知识点，每个知识点都会由浅入深，把相关的都放在一起，便于自己复习，感兴趣的朋友也可以一起学习收藏。

（题目的顺序不重要，比较随意，但是会分类整理，集中复习）

一，CSS Box相关

（基本都会问这题，必考）

1，怎么理解CSS里盒子（Box）的概念？

盒子（Box）是 CSS 布局的对象和基本单位，一个页面就是由N个盒子组合而成的，我们通过设置display以及元素类型来决定这个box的类型。

2，解释一下盒模型？有哪些类型？

一个基本的盒模型，包括content(width/height)，padding，border，margin

目前有两种盒子模型，IE盒模型和W3C标准盒模型，两者的区别是，W3C标准盒模型，宽高是只有内容content，没有padding和border的，像这样：

而IE盒模型，宽高不光有content，还包含了padding和border，像这样：

3，如何设置两者？

box-sizing: content-box;　　// W3C标准盒模型（默认情况下）

box-sizing: border-box;　　// IE盒模型

（这个也比较好记，标准的就是只有内容，就是content，而IE就是有border的）

4，如何获取盒子的宽高？

我们用得最多的就是dom.offsetWidth/offsetHeight，这个包含了width/height，padding和border，是项目中最常用的，兼容性也最好，记住这个就行了

（为什么我用dom.style.width/height，获取到的是空，因为这个style.width只能获取到行内样式，对于style标签中的和link外链的样式都无法获取到，所以还是用offsetWidth好点）

5，盒子（Box）常见定位方案？

普通文档流、浮动流、绝对定位流

6，我们常说的BFC、IFC、GFC、FFC是什么？

刚刚上面讲了盒模型，讲了盒子的定位方案，那盒子内部是如何渲染排列的呢？答案就是Formatting context（格式化上下文）。

Formatting context（格式化上下文）是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。

而题中所提到的BFC、IFC、GFC和FFC都是属于Formatting context（格式化上下文），它们的全称是

【Block formatting context】(BFC) 块级格式化上下文

【Inline formatting context】(IFC) 内联格式化上下文

【Grid formatting context】(GFC) 网格布局格式化上下文

【Flex formatting context】(FFC) 自适应格式化上下文

这里重点先讲一下BFC

BFC的特性是什么？

盒子从顶部开始垂直排列
两个相邻的盒子之间的垂直距离由外边距（既margin）决定
块级格式化上下文中相邻的盒子之间的垂直边距折叠
每个盒子的左外边与容器的左边接触（从右到左的格式化则相反），即使存在浮动也是如此，除非盒子建立了新的块格式化上下文
形成了BFC的区域不会与float box重叠
计算BFC的高度时，浮动子元素也参与计算

如何创建BFC？

根元素（html）或其他包含它的元素
浮动元素
绝对定位元素
非块级盒子的块级容器（inline-blocks, table-cells, table-captions等）
overflow不为visiable的块级盒子

（这里我们不用死记硬背，我们重点看一下平时开发中BFC会遇到哪些问题，以及如何利用BFC去解决这些问题）

问题一：同一个BFC中相邻的盒子之间（垂直方向）的margin（上一个盒子的margin-bottom和下一个盒子的margin-top）重叠

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>防止margin重叠</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    p {
        color: #f55;
        background: yellow;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 30px;
    }
</style>
<body>
    <p>看看我的 margin是多少</p>
    <p>看看我的 margin是多少</p>
</body>
</html>

生成的效果是这样的：

原因是margin重叠了。

那解决方案就是让它们不要在同一个BFC中就行了，改成这样：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>防止margin重叠</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    p {
        color: #f55;
        background: yellow;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 30px;
    }
    div{
        overflow: hidden;
    }
</style>
<body>
    <p>看看我的 margin是多少</p>
    <div>
        <p>看看我的 margin是多少</p>
    </div>
</body>
</html>

效果如图：

成功了！

问题二：对于使用了float的盒子，如何避免左侧贴边重叠？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    body {
        width: 100%;
        position: relative;
    }
 
    .left {
        width: 100px;
        height: 150px;
        float: left;
        background: rgb(139, 214, 78);
        text-align: center;
        line-height: 150px;
        font-size: 20px;
    }
 
    .right {
        height: 300px;
        background: rgb(170, 54, 236);
        text-align: center;
        line-height: 300px;
        font-size: 40px;
    }
</style>
<body>
    <div class="left">LEFT</div>
    <div class="right">RIGHT</div>
</body>
</html>

效果如图：

因为第一个left元素用了float，所以脱离了普通文档流，而right元素因为在BFC内，自动贴到左侧，所以重叠了。

解决方案是，利用BFC这一特性：

· 形成了BFC的区域不会与float box重叠

所以让right也形成BFC就行了：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    body {
        width: 100%;
        position: relative;
    }
 
    .left {
        width: 100px;
        height: 150px;
        float: left;
        background: rgb(139, 214, 78);
        text-align: center;
        line-height: 150px;
        font-size: 20px;
    }
 
    .right {
        overflow: hidden;
        height: 300px;
        background: rgb(170, 54, 236);
        text-align: center;
        line-height: 300px;
        font-size: 40px;
    }
</style>
<body>
    <div class="left">LEFT</div>
    <div class="right">RIGHT</div>
</body>
</html>

效果如图：

解决了！

问题三：如何解决float元素无法撑起外层容器的高度问题？这也是个典型的清除浮动问题

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>清除浮动</title>
</head>
<style>
    .par {
        border: 5px solid rgb(91, 243, 30);
        width: 300px;
    }
    
    .child {
        border: 5px solid rgb(233, 250, 84);
        width:100px;
        height: 100px;
        float: left;
    }
</style>
<body>
    <div class="par">
        <div class="child"></div>
        <div class="child"></div>
    </div>
</body>
</html>

效果如图：

因为内部两个子元素脱离了文档流，所以无法撑起。

解决方案是利用BFC特性的最后一条：

计算BFC的高度时，浮动子元素也参与计算

因此将父元素设为BFC：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>清除浮动</title>
</head>
<style>
    .par {
        border: 5px solid rgb(91, 243, 30);
        width: 300px;
        overflow: hidden;
    }
    
    .child {
        border: 5px solid rgb(233, 250, 84);
        width:100px;
        height: 100px;
        float: left;
    }
</style>
<body>
    <div class="par">
        <div class="child"></div>
        <div class="child"></div>
    </div>
</body>
</html>

效果如图：

成功了!

====

（这里既然提到了清除浮动，那就再写一个方案，用伪类解决）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>清除浮动</title>
</head>
<style>
    .par {
        border: 5px solid rgb(91, 243, 30);
        width: 300px;
    }
    
    .child {
        border: 5px solid rgb(233, 250, 84);
        width:100px;
        height: 100px;
        float: left;
    }

    .clearfix:after {
        content: '';
        display: block;
        height: 0;
        clear: both;
     }
      
      // 这里是为了兼容IE6，IE7，但是现实需求中没有那么低版本的浏览器，所以可不写
     .clearfix {
        zoom: 1;
      }
</style>
<body>
    <div class="par clearfix">
        <div class="child"></div>
        <div class="child"></div>
    </div>
</body>
</html>

====

总结：

上面的几个案例，基本都是通过添加overflow: hidden; 属性来创建BFC，这个也是比较常见的方式。

二，选择器相关

1，伪类和伪元素

简单说，伪类就是单冒号，伪元素就是双冒号

2，列举一些常用的伪类或伪元素？

伪类：（大部分都是CSS 3里新增的）

: hover 鼠标hover

: nth-child(n) 选中父元素下的第n个子元素

: not() 不是什么什么

: first-child 第一个子元素

: last-child 最后一个子元素

: checked 单选框或复选框被选中的

伪元素：（说实话就用两个）

:: before

:: after

3，选择器权重计算比较？

一般讨论四种选择器：

元素或伪元素(::) （x，x，x，0）

class选择符或伪类(:) （x，x，0，x）

id选择符（x，0，x，x）

标签内选择符（0，x，x，x）

通常计算方法就是每出现一个，就在对应的权位上加1，不可进位，两个选择器比较权重就是从首位开始比较，数字相同的话就比较下一个。

!important 权位最高，不在讨论范围内，可以理解为（1，x，x，x，x）

相同都有 !important，就看谁在后面

三，图片相关

1，png，jpg，jpeg，gif，webp，bmp。。。怎么选择图片类型？有哪些优缺点？

首先jpg和jpeg就可以理解为同一个东西，这里就只讲jpg。

jpg：

优点：就是图片压缩后不至于太失真，色彩还原度较高

缺点：无法做透明图，就是没办法抠出一个图片

适用场景：基本上网页上的大图都是jpg

png：

优点：能做透明图

缺点：体积大，如果色彩较多的，是同等jpg的5-6倍

适用场景：网页上的图标，一般都是用png24，png8有点半透明

gif：

优点：支持动画

缺点：颜色种类有限

适用场景：各种小动画。。

webp:

优点：简单说就是压得更小，图片质量却不差

缺点：兼容性差，IE和Safari不支持

适用场景：指定浏览器环境下可用

bmp：

优点：高质量图片

缺点：太大了

适用场景：Windows桌面壁纸

2，聊聊Base 64图片

优点：减少http请求，因为图片被base64编码进了 css文件中（一般是进css文件）

缺点：如果加进css文件中去，css体积会增大，而且会阻塞渲染，（普通图片加载是异步的）

使用方法：可以配置webpack，借助url-loader

module: {
        rules: [
           {
                test: /\.(gif|png|jpg|woff|svg|ttf|eot)$/ ,
                use:[{
                    loader:'url-loader',
                    options: {
                        limit:500,
                        outputPath: 'images/',
                        name:'[name].[ext]'
                    }
                }]
            }
        ]
    }

如果图片低于500 byte，就会自动转成base 64格式

适用场景：适用于一些体积较小的图片

四，字体相关

1，怎么在Chrome写出小于12px的字体？

谷歌浏览器能支持的最小字体大小是12px，想要缩小字体，借助CSS3 transform来缩小，类似于做一个1px的发丝线

如果是10px，就是给20px的字体容器上，加一个 transform: scale(0.5) 属性，注意，容器一定要是块级元素或者行内块级元素

2，如何自定义字体？

（持续更新。。。）

css面试题汇总 （持续更新）

推荐阅读

css面试题汇总（持续更新）