面试临时抱佛脚系列：css篇前言秋招提前批已经开始了，为了在面试开始之前查缺补漏，我总结了一份面试中可能出现的11道与

前言

秋招提前批已经开始了，为了在面试开始之前查缺补漏，我总结了一份面试中可能出现的11道与css相关的考题，希望对大家的面试有所帮助。

面试之中，面试官可能最常提问的问题格式应该就是“ 请你说说/谈谈xxx ”，许多人遇到这种情况，可能会因为紧张或者没有一个清晰的知识脉络体系，可能会草草两三句话就了事了，一场面试下来可能二三十分钟就over了，最后二面的消息遥遥无期。为了在面试的紧张氛围中，清晰、有条理地回答面试官的问题，我总结了一个回答策略：

$定义（是什么） + 特点 + 应用场景$

当然你也不要死板的完全按照这个公式来，有的问题你要根据实际情况来变通一下，具体问题还需具体分析，灵活应变方能制胜。接下来，就让我们一同走进这11道CSS高频考题的解析之旅，为你的面试之路加油助力！ ٩(๑>◡<๑)۶

1. 说说你对css盒子模型的理解

是什么：

浏览器在渲染页面时，会将容器渲染成包含 content、padding、border、margin 四部分的矩形，这就是css盒子模型。

特点：

标准盒模型：width = content
IE盒模型：width = content + padding + border

切换盒子模型方法：

CSS提供了box-sizing属性来允许我们在这两种盒模型之间进行切换。通过设置box-sizing属性，我们可以控制元素的width和height属性是否包含内边距和边框，默认值是标准盒模型。

box-sizing: content-box;     // 标准盒模型
box-sizing: border-box;      // IE盒模型

2. css中的选择器有哪些，优先级？

id
class
标签选择器
后代选择器
子类选择器
兄弟选择器
群组选择器
属性选择器
伪类选择器
伪元素选择器

优先级：!important > 行内样式 > id > class > 标签选择器

<style>

/* id 选择器 */
#box{
    color: red;
}

/* class选择器 */
.box{
    color: blue;
}

/* 标签选择器 */
div{
    color: green;

/* 后代选择器 */
body div{
    color: yellow;
    height: 30px;
    background-color: #ebdadae6;
}

/* 子类选择器，权重取决于前面的选择器组成是id，还是类名，或者是元素名 */
body > div{
    height: 40px;
}
        
/*兄弟选择器，只会选择一个，默认后面第一个 */
 .wrap + .item{
     height: 20px;
     background-color: #c15b5b;
 }
 
 /* 属性选择器 */
 .box[abc]{
     height: 20px;
     background-color: #9c5656;
 }
 
 /* 伪类选择器  */
 .box:hover{
     background-color: #d81a1a;
 }
 
 /* 伪元素选择器 */
 .box::after{
     content: "hello";
 }
 </style>

3. 说说em、rem、vw、vh、px的区别

是什么：

css3之前 px、em、% 是常用单位
css3创建了新的单位，rem、vw、vh，为了在不同的场景下做更好的适配

区别：

绝对单位：px
相对单位：em、rem、vw、vh

em：相对于父元素
rem：相对于根元素
vw：相对于视口宽度
vh：相对于视口高度

4. css中有哪些方式可以隐藏一个元素，区别是什么？

5. 谈谈你对BFC的理解

是什么：

BFC是块级格式化上下文，是一种特殊的容器，拥有一套自己的渲染规则

规则：

BFC容器内部子容器依旧遵从块级，行内块，行内元素的渲染规则
BFC容器在计算高度时，会将浮动元素的高度也计算在内
BFC容器的margin-top不会跟子容器的margin-bottom 重叠

触发条件：

overflow: hidden || xxx;
float: right || left;
display: table-xxx || inline-xxx || flex || grid;
position: absolute || fixed;

应用场景：

防止外边距重叠
清除浮动（浮动会脱离文档流，导致父元素高度塌陷）

6. 元素水平垂直居中的方法有哪些

分类作答，由易到难回答方法就不会有所疏漏了：

已知父子容器宽高： margin

未知父容器，已知子容器：

margin + calc
position + margin负值
position + margin:auto

未知父子容器宽高：

position + transform
flex + align-items + justify-content
grid + align-items + justify-content
table-cell + text-align: center + vertical-align: middle

注意：最后一种方法通常用于文本内容的居中，如果子元素是块级元素（如 div），则需要将其设置为 display: inline-block;

<style>
.page{
    width: 300px; 
    height: 300px;    /*假设你不知道宽高*/
    border: 1px solid #000;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.box{
    background-color: #d48080;
    display: inline-block;
}
</style>


<body>
    <div class="page">
        <span class="box">hhh</span>
    </div>
</body>

7. 说说 flexbox

是什么：

弹性布局是css中一种简便高效的布局方式，弹性容器中有主轴（默认x轴）和交叉轴（y轴）的概念，主轴方向也可以修改，子容器默认在主轴上排列

属性：

父容器属性：

flex-direction：定义主轴的方向
justify-content：控制主轴上的子元素对齐方式
align-items：控制交叉轴上的子元素对齐方式
align-content：当有多行子元素时，控制行之间的对齐方式
flex-wrap：决定子元素是否换行

子容器属性：

order：定义子元素在容器中的顺序
flex-grow：定义子元素如何分配剩余空间
flex-shrink：定义子元素在空间不足时如何缩小

应用场景：

三栏布局
水平垂直居中

8. 如何实现三栏布局

实现三栏布局（左栏、主内容区、右栏），有多种技术可以选择，以下是五种常见的方法，在这里我只写出现代最常用的方法弹性布局的代码仅供参考：

弹性
浮动（圣杯、双飞翼）
grid（网格布局）
table
position

9. css3新增了哪些属性（问的较少）

border-radius：创建圆角边框
box-shadow：为元素添加阴影效果
border-image：为边框添加背景图片
背景：

background-size：控制背景图像的大小
background-origin、background-clip：控制背景图像的绘制范围

动画：

transition: 控制元素过渡效果
animation: 控制元素动画效果
@keyframes：定义动画

transform：控制元素变形，2D和3D变换，如旋转、缩放和平移
渐变：

linear-gradient：线性渐变
radial-gradient：径向渐变

布局：

flex：弹性布局
grid：网格布局

10. css画一个三角形，梯形

如果面试时遇到这个题目，那你真的应该给面试官跪一个了，真的很简单，可用的方法除了在第四道题中用于隐藏元素的clip-path，当然这个属性本身是用于裁剪的，还可以通过设置边框的宽度和颜色来实现。

clip-path
border：设置一个盒子的宽高为0，为这个盒子设置边框样式，保留我们想要形成三角形的那一边框为实线，其他边框设置为透明。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* clip-path 画三角形 */
        .box1{
            width: 200px;
            height: 200px;
            background-color: #d47878;
            margin-bottom: 10px;
            clip-path: polygon(0px 0px, 200px 0px, 100px 100px);
        }
        
        /* border 画三角形 */
        .box2{
            width: 0px;
            height: 0px;
            border: 100px solid;
            margin-bottom: 10px;
            border-color: #d47878 transparent transparent transparent;
        }
        
        /* border 画梯形 */
        .box3{
            width: 100px;
            height: 100px;
            border: 100px solid;
            border-color: #d47878 transparent transparent transparent;
        } 
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>

</html>

11. 画一个0.5px的线

在Web开发中，直接绘制0.5px的线条在标准的高分辨率屏幕上可能会遇到一些问题，因为大多数浏览器的渲染引擎倾向于将线条宽度向上舍入到最近的整数像素，所以直接设置0.5px，最后渲染出来得到的还是1px。

用这个属性缩小到原来的0.5倍

缩放：transform: scaleY(0.5);

结语

希望这篇文章能够帮助你快速回顾和巩固CSS的核心知识点，感谢观看！｀･ω･´)ゞ敬礼っ