前言
年前年后跳槽季，准备从面试内容入手看看前端相关知识点，旨在探究一个系列知识点，能力范围之内的深入探究一下。重在实践，针对初级前端和准备面试的同学，争取附上实际的代码例子以及相关试题～系列名字就用【秃破前端面试】—— 因为圈内大家共识，技术与发量成正比。😄希望大家早日 秃 破瓶颈
关于面试题或者某个知识点的文章太多了，这里笔者只是想把个人的总结用代码仓库的形式记录下来并输出文章，毕竟理论不等于实践，知其然也要知其所以然，实践用过才能真正理解～
相关系列文章：
什么是 CSS3
CSS 都知道，是层叠样式表（Cascading Style Sheets）的简称，是一种标记语言，由浏览器解释执行用来使页面变得更美观。而 CSS3 是 CSS 的最新标准，CSS3 是向后兼容的，因此所有的 CSS1/2 的特性在 CSS3 里都是可以使用的。而 CSS3 也增加了很多新特性，为开发带来了极大地方便，值得我们了解掌握。
关于向前兼容和向后兼容，一些文章写错了，CSS3 向后兼容，所以支持 CSS1/2 的写法，在 CSS3 里也可以被使用。而 CSS3 如果是向前兼容，则表示 CSS1/2 可以接受 CSS3 的写法，实际上并不是这样的。所以 CSS3 是向后兼容的。
CSS3 新特性
CSS3 的更新包含诸多特性并且非常好用，具体来说包含如下几个大模块的更新，我们将通过代码一一介绍。
选择器
CSS3 新增了很多选择器属性，极大的简化了代码，并且大幅度提高了程序性能。比如一个变色的表格，使用 CSS3 非常的简便：
tbody tr:nth-child(odd) {
background-color: aqua;
opacity: 0.7;
}
tbody tr:nth-child(even) {
background-color: orange;
opacity: 0.7;
}
实际效果如下图：
还有很多属性，下面简单列出一些，还有更多的可以去查看相关文档以及使用方法。
Ele:nth-last-child(n)
Ele:nth-of-type(n)
Ele:nth-last-of-type(n)
Ele:last-child
Ele:first-of-type
Ele:only-child
Ele:only-of-type
Ele:empty
Ele:checked
Ele:enabled
Ele:disabled
Ele::selection
Ele:not(s)
盒模型
盒模型有三种：box-sizing:content-box|border-box|inherit，默认的是content-box。
如下面代码，容器内包含两张图片，宽度都是 50%，但是图片有 border，而元素盒模型默认是 content-box，所以图片会折行，因为溢出了。
<style>
.container img {
width: 50%;
border: 1px solid #111;
}
</style>
<div class="container">
<img src="./css3.jpg" /><img src="./css3.jpg" />
</div>
那么如何让两张图片不折行，在一行里显示，设置box-sizing:border-box，如下面所示：
.container img {
box-sizing: border-box;
width: 50%;
border: 1px solid #111;
}
可以看到，变成一行显示了。因为 border-box 的计算方式是将 border 计算在 width 内部的。
布局
CSS3 新增了很多布局相关的属性，比如 flex 布局和多列布局。
Flex 布局
Flex 布局个人认为真的是最方便最简洁的布局，Flex 的相关属性特别多，记住也不太现实，面试的时候会常用的几个就行了，具体的我觉得阮一峰的那篇文章写得还是不错的，我这里就不复制粘贴了。 —— 阮一峰 Flex 布局
多列布局
多列布局是 CSS3 新增的属性，在处理需要多列展示内容的时候，极其的方便。主要包括如下几个属性：
- column-count：设置布局的列数
<style>
.column-2 {
column-count: 2;
}
.column-3 {
column-count: 3;
}
</style>
如下图所示，非常简单的就实现了几列的均匀布局。
- column-gap：规定列之间的间隔
.column-2 {
column-count: 2;
column-gap: 80px;
}
- column-rule: 属性设置列之间的宽度、样式和颜色规则
.column-3 {
column-count: 3;
column-rule:3px outset #ff0000;
}
可以看到，非常简单的就实现了布局，代码极其的简洁，并且兼容性也还不错，基本现在主流浏览器都能够支持。
多列布局非常适合实现类似报纸、论文以及书本文章类型的布局。
背景和边框
CSS3 对元素的背景和边框新增了一些属性。
背景
- background-clip: 规定背景的绘制区域
.container {
border: 4px solid orchid;
padding: 20px;
width: 300px;
height: 200px;
background-image: url('./css3.jpg');
background-clip: border-box; // 默认的，从border开始
}
<div class="container" />
.container {
border: 4px solid orchid;
padding: 20px;
width: 300px;
height: 200px;
background-image: url('./css3.jpg');
background-clip: content-box;
}
如下图可以看到，绘制的区域不包含 padding。
-
backround-origin: 规定背景图片的定位区域
background-origin: border-box; 从 border. 开始计算 background-position;
background-origin: padding-box; 从 padding. 开始计算 background-position;
background-origin: content-box; 从 content. 开始计算 background-position;
-
background-size: 规定背景图片的尺寸
background-size: contain; 缩小图片以适合元素（维持像素长宽比）
background-size: cover; 扩展元素以填补元素（维持像素长宽比）
background-size: 100px 100px; 缩小图片至指定的大小 .
background-size: 50% 100%; 缩小图片至指定的大小，百分比是相对包 含元素的尺寸 .
边框
关于边框就非常简单了，就是几个边框特有的属性，这里就直接用代码来说明。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Border</title>
<style>
.box {
width: 200px;
padding: 20px;
background-color: gold;
margin: 20px 0;
}
.radius {
border-radius: 8px;
}
.half-radius {
border-top-left-radius: 8px;
border-bottom-right-radius: 8px;
}
.shadow {
box-shadow: 10px 10px 5px #888888;
}
.border-img {
width: 200px;
border:15px solid transparent;
border-image: url(border.png) 30 30 round;
-moz-border-image:url(border.png) 30 30 round; /* 老的 Firefox */
-webkit-border-image: url(border.png) 30 30 round; /* Safari 和 Chrome */
-o-border-image: url(border.png) 30 30 round; /* Opera */
}
</style>
</head>
<body>
<div class="box radius">
圆角
</div>
<div class="box half-radius">
部分圆角
</div>
<div class="box shadow">
边框阴影
</div>
<div class="border-img">
边框背景图
</div>
</body>
</html>
具体效果如上图所示，并且需要特别注意的是，边框背景图设置的时候，border 需要设置成透明～
文本效果
- 字体：font-face
第一种，如果你有字体文件，可以通过下面这种方式全剧引入字体。
@font-face {
font-family: fontname;
src:url(font-name.eot);
}
第二种，CSS3 新增<font>标签来进行字体的设置。
<p><font style="font-family: STKaiti">通过font标签来设置字体</font></p>
- text-overflow
.overflow {
white-space: nowrap;
width: 100px;
overflow: hidden;
text-overflow:ellipsis;
}
<p class="overflow">
粉色的来访记录开始大家分开了就是打开理解费拉达斯解放路口的时间见风使舵冷静的思考了几分短裤蓝色粉色的看了飞机老师
</p>
- text-shadow && word-wrap
文本阴影效果 && 文本换行效果
.shadow {
width: 100px;
text-shadow: 5px 5px 5px #FF0000;
}
.wordwrap {
word-wrap: break-word;
}
<p class="shadow wordwrrap">
粉色的来访记录开始大家分开了就是打开理解费拉达斯解放路口的时间见风使舵冷静的思考了几分短裤蓝色粉色的看了飞机老师
</p>
2D/3D 转换
CSS3 新增 2D/3D 转换来让我们对元素进行移动、缩放、转动、拉长或拉伸。通过 CSS 来设置性能要比 JS 设置性能更好，因此十分值得学习。
2D 转换
2D 转换就是对所有的操作都在一个平面内进行，通过对 X 和 Y 的操作来改变元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transform</title>
<style>
.translate-2d {
width: 100px;
height: 100px;
background-color: aqua;
transform: translate(150px, 100px);
}
.rotate-2d {
width: 100px;
height: 100px;
background-color: orange;
transform: rotate(30deg);
}
.scale-2d {
width: 100px;
height: 100px;
background-color: green;
transform: scale(0.5, 2);
}
.matrix-2d {
width: 100px;
height: 100px;
background-color: red;
transform: matrix(0.866, 0.5, -0.5, 0.866, 0, 0);
}
</style>
</head>
<body>
<h1>2D 转换</h1>
<div class="translate-2d">
距离左150
<br/>
距离顶部100
</div>
<div class="rotate-2d">
旋转30度
</div>
<div class="scale-2d">
x缩小一倍
<br />
y扩大一倍
</div>
<div class="matrix-2d">
matrix方法
</div>
</body>
</html>
3D 转换
3D 与 2D 的不同之处在于 3D 转换是立体的，新增了 Z 轴，虽然也是对元素进行操作，但是效果与 2D 是有明显不同的，并且所有的都是通过rotate+X/Y/Z来进行的。
通过一个简单的小动画来查看一下二者的区别：
@keyframes animate-2d {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes animate-3d {
from { transform: rotateX(0deg); }
to { transform: rotateX(360deg); }
}
动画
CSS3 动画以及动画相关知识内容很多，具体来说就是 transition/animation + keyframe。然后还有前面 HTML5 提到过的 canvas 动画，另外就是 JS 的 requestAnimation 动画，所以可能会单独拿来一篇文章来进行说明～
总结
CSS3 相关特性 API 以及对应知识点就差不多了，如果面试官问 CSS3 新特性，能回答上来上面这些以及简单使用我觉得就差不多了，讲道理，那么多谁能记得住啊，面试官使用到肯定也得查文档的，哈哈～
相关代码地址：秃破前端面试系列代码
