[秃破前端面试] —— CSS3

时间 2020-02-20

标签前端面试 css3 css 栏目快乐工作繁體版

原文原文链接

前言

年前年后跳槽季，准备从面试内容入手看看前端相关知识点，旨在探究一个系列知识点，能力范围以内的深刻探究一下。重在实践，针对初级前端和准备面试的同窗，争取附上实际的代码例子以及相关试题～系列名字就用【秃破前端面试】—— 由于圈内你们共识，技术与发量成正比。😄但愿你们早日秃破瓶颈css

关于面试题或者某个知识点的文章太多了，这里笔者只是想把我的的总结用代码仓库的形式记录下来并输出文章，毕竟理论不等于实践，知其然也要知其因此然，实践用过才能真正理解～ html

什么是 CSS3

CSS 都知道，是层叠样式表（Cascading Style Sheets）的简称，是一种标记语言，由浏览器解释执行用来使页面变得更美观。而 CSS3 是 CSS 的最新标准，CSS3 是向后兼容的，所以全部的 CSS1/2 的特性在 CSS3 里都是可使用的。而 CSS3 也增长了不少新特性，为开发带来了极大地方便，值得咱们了解掌握。css3

关于向前兼容和向后兼容，一些文章写错了，CSS3 向后兼容，因此支持 CSS1/2 的写法，在 CSS3 里也能够被使用。而 CSS3 若是是向前兼容，则表示 CSS1/2 能够接受 CSS3 的写法，实际上并非这样的。因此 CSS3 是向后兼容的。 git

CSS3 新特性

CSS3 的更新包含诸多特性而且很是好用，具体来讲包含以下几个大模块的更新，咱们将经过代码一一介绍。github

选择器

CSS3 新增了不少选择器属性，极大的简化了代码，而且大幅度提升了程序性能。好比一个变色的表格，使用 CSS3 很是的简便：web

tbody tr:nth-child(odd) {
  background-color: aqua;
  opacity: 0.7;
}
tbody tr:nth-child(even) {
  background-color: orange;
  opacity: 0.7;
}
复制代码

实际效果以下图：面试

还有不少属性，下面简单列出一些，还有更多的能够去查看相关文档以及使用方法。canvas

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 新特性，能回答上来上面这些以及简单使用我以为就差很少了，讲道理，那么多谁能记得住啊，面试官使用到确定也得查文档的，哈哈～

相关代码地址：秃破前端面试系列代码