前端开发面试题—CSS3新增特性
文章目录
关于CSS3新增特性
1️⃣CSS3 边框特性
2️⃣CSS3 背景
3️⃣CSS3 文本效果
4️⃣CSS3 字体（@font-face 规则）
5️⃣CSS3 盒子变形（元素转换）
6️⃣CSS3 过渡与动画（@keyframes规则）
7️⃣CSS3 多列布局与弹性盒模型布局（Flex Box）
8️⃣CSS3 多媒体查询
CSS3的优势
今天分享一下我遇到的一个面试题，是关于CSS3新增特性的问题，简单列举说明一下CSS3新增的属性有哪些？
关于CSS3新增特性
CSS3是CSS（层叠样式表）技术的升级版本，在CSS2.1的基础上增加了很多强大的新功能，以帮助开发人员解决一些实际面临的问题。使用CSS3不仅可以设计炫酷美观的网页，还能提高网页性能。CSS3的新特征有很多，例如圆角效果、图形化边界、块阴影与文字阴影、使用RGBA实现透明效果、渐变效果、使用@Font-Face实现定制字体、多背景图、文字或图像的变形处理（旋转、缩放、倾斜、移动）、多栏布局、媒体查询等。
目录
关于CSS3新增特性
1️⃣CSS3 边框特性
2️⃣CSS3 背景
3️⃣CSS3 文本效果
4️⃣CSS3 字体（@font-face 规则）
5️⃣CSS3 盒子变形（元素转换）
6️⃣CSS3 过渡与动画（@keyframes规则）
7️⃣CSS3 多列布局与弹性盒模型布局（Flex Box）
8️⃣CSS3 多媒体查询
CSS3的优势
1️⃣CSS3 边框特性
- CSS3对网页中的边框进行了一些改进，主要包括支持圆角边框、添加阴影框、多层边框、边框色彩与图片等，并作为边界的形象而不使用设计程序，如 Photoshop。
- 新边框属性
属性 说明 CSS border-image 设置所有边框图像的速记属性。 3 border-radius 一个用于设置所有四个边框- *-半径属性的速记属性 3 box-shadow 附加一个或多个下拉框的阴影 3 - 简单演示（依次为border-radius、box-shadow、border-image）
2️⃣CSS3 背景
- CSS3允许使用多个属性（比如background-image、background-repeat、background-size、background-position、background-origin和background-clip等）在一个元素上添加多层背景图片。该属性的应用大大改善了以往面对多层次设计需要多层布局的问题，帮助Web前端开发者在不借助Photoshop的情况下实现对页面背景的设计，简化了背景图片的维护成本 。
- background-image 属性：CSS3中可以通过background-image属性添加背景图片。不同的背景图像和图像用逗号隔开，所有的图片中显示在最顶端的为第一张。该属性还可以设置背景的渐变效果，线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向，径向渐变（Radial Gradients）- 由它们的中心定义
- background-size 属性：background-size指定背景图像的大小。CSS3以前，背景图像大小由图像的实际大小决定。CSS3中可以指定背景图片，让我们重新在不同的环境中指定背景图片的大小。您可以指定像素或百分比大小。你指定的大小是相对于父元素的宽度和高度的百分比的大小。
- background-origin 属性：background-origin 属性指定了背景图像的位置区域。content-box, padding-box,和 border-box区域内可以放置背景图像。
语法
background-origin: padding-box|border-box|content-box;
值 描述 padding-box 背景图像填充框的相对位置 border-box 背景图像边界框的相对位置 content-box 背景图像的相对位置的内容框 - background-clip 属性：CSS3中background-clip背景剪裁属性是从指定位置开始绘制。
语法
background-clip: border-box|padding-box|content-box;
值 说明 border-box 默认值。背景绘制在边框方框内（剪切成边框方框）。 padding-box 背景绘制在衬距方框内（剪切成衬距方框）。 content-box 背景绘制在内容方框内（剪切成内容方框）。
3️⃣CSS3 文本效果
- CSS3新增了一些了新的关于文本显示效果，如text-shadow、text-overflow、word-wrap、word-break等等
- 除此之外还有
属性 描述 CSS hanging-punctuation 规定标点字符是否位于线框之外。 3 punctuation-trim 规定是否对标点字符进行修剪。 3 text-align-last 设置如何对齐最后一行或紧挨着强制换行符之前的行。 3 text-emphasis 向元素的文本应用重点标记以及重点标记的前景色。 3 text-justify 规定当 text-align 设置为 "justify" 时所使用的对齐方法。 3 text-outline 规定文本的轮廓。 3 text-overflow 规定当文本溢出包含元素时发生的事情。 3 text-shadow 向文本添加阴影。 3 text-wrap 规定文本的换行规则。 3 word-break 规定非中日韩文本的换行规则。 3 word-wrap 允许对长的不可分割的单词进行分割并换行到下一行。 3
4️⃣CSS3 字体（@font-face 规则）
- SS3中引入了@font-face，@font-face是链接服务器字体的一种方式，这些嵌入的字体能变成浏览器的安全字体，开发人员不用再担心用户没有这些字体而导致网页在用户浏览器无法正常显示的问题
- 使用规则和例子
- 在新的 @font-face 规则中，您必须首先定义字体的名称（比如 myFirstFont），然后指向该字体文件。提示：URL请使用小写字母的字体，大写字母在IE中会产生意外的结果
- 如需为 HTML 元素使用字体，请通过 font-family 属性来引用字体的名称 (myFirstFont)
- 例子，修改了字体为细尖的类似于电子表的数字
5️⃣CSS3 盒子变形（元素转换）
- 在CSS2.1中，想让某个元素变形必须要借助JavaScript写大量的代码实现，在CSS3中加入了变形属性，该属性（transform）在2D或3D空间里操作盒子的位置和形状，来实现例如旋转、扭曲、缩放、拉伸或者移位。变形属性的出现，使Web前端中的元素展示不仅仅局限在二维空间，Web前端开发者可以通过旋转、扭曲、缩放或者移位等操作实现元素在三维控件上的展示。通过变形元素，web前端中的内容展示更加形象、真实。
- 转换属性
属性 描述 CSS transform 向元素应用 2D 或 3D 转换。 3 transform-origin 允许你改变被转换元素的位置。 3 transform-style 规定被嵌套元素如何在 3D 空间中显示。 3 perspective 规定 3D 元素的透视效果。 3 perspective-origin 规定 3D 元素的底部位置。 3 backface-visibility 定义元素在不面对屏幕时是否可见。 3 - 2D转换
函数 描述 matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵。 translate(x,y) 定义 2D 转换，沿着 X 和 Y 轴移动元素。 translateX(n) 定义 2D 转换，沿着 X 轴移动元素。 translateY(n) 定义 2D 转换，沿着 Y 轴移动元素。 scale(x,y) 定义 2D 缩放转换，改变元素的宽度和高度。 scaleX(n) 定义 2D 缩放转换，改变元素的宽度。 scaleY(n) 定义 2D 缩放转换，改变元素的高度。 rotate(angle) 定义 2D 旋转，在参数中规定角度。 skew(x-angle,y-angle) 定义 2D 倾斜转换，沿着 X 和 Y 轴。 skewX(angle) 定义 2D 倾斜转换，沿着 X 轴。 skewY(angle) 定义 2D 倾斜转换，沿着 Y 轴。 - 3D转换
函数 描述 matrix3d(n,n,n,n,n,n,
n,n,n,n,n,n,n,n,n,n)定义 3D 转换，使用 16 个值的 4x4 矩阵。 translate3d(x,y,z) 定义 3D 转化。 translateX(x) 定义 3D 转化，仅使用用于 X 轴的值。 translateY(y) 定义 3D 转化，仅使用用于 Y 轴的值。 translateZ(z) 定义 3D 转化，仅使用用于 Z 轴的值。 scale3d(x,y,z) 定义 3D 缩放转换。 scaleX(x) 定义 3D 缩放转换，通过给定一个 X 轴的值。 scaleY(y) 定义 3D 缩放转换，通过给定一个 Y 轴的值。 scaleZ(z) 定义 3D 缩放转换，通过给定一个 Z 轴的值。 rotate3d(x,y,z,angle) 定义 3D 旋转。 rotateX(angle) 定义沿 X 轴的 3D 旋转。 rotateY(angle) 定义沿 Y 轴的 3D 旋转。 rotateZ(angle) 定义沿 Z 轴的 3D 旋转。 perspective(n) 定义 3D 转换元素的透视视图。
6️⃣CSS3 过渡与动画（@keyframes规则）
- CSS3的“过渡”（transition）属性通过设定某种元素在某段时间内的变化实现一些简单的动画效果，让某些效果变得更加具有流线性与平滑性。CSS3的“动画”（animation）属性能够实现更复杂的样式变化以及一些交互效果，而不需要使用任何Flash或JavaScript脚本代码。过渡与动画的出现，使CSS在Web前端开发中不再仅仅局限于简单的静态内容展示，而是通过简单的方法使页面元素动了起来，实现了元素从静到动的变化。
- CSS3 过渡：CSS3中，我们为了添加某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript。过渡属性如下
属性 描述 CSS transition 简写属性，用于在一个属性中设置四个过渡属性。 3 transition-property 规定应用过渡的 CSS 属性的名称。 3 transition-duration 定义过渡效果花费的时间。默认是 0。 3 transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。 3 transition-delay 规定过渡效果何时开始。默认是 0。 3 - CSS3 动画：CSS3 可以创建动画，它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果。要创建 CSS3 动画，需要了解@keyframes 规则创建动画。@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。
动画是使元素从一种样式逐渐变化为另一种样式的效果。你可以改变任意多的样式任意多的次数。请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。0% 是动画的开始，100% 是动画的完成。为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。
动画属性如下
属性 描述 CSS @keyframes 规定动画。 3 animation 所有动画属性的简写属性。 3 animation-name 规定 @keyframes 动画的名称。 3 animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 3 animation-timing-function 规定动画的速度曲线。默认是 "ease"。 3 animation-fill-mode 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。 3 animation-delay 规定动画何时开始。默认是 0。 3 animation-iteration-count 规定动画被播放的次数。默认是 1。 3 animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。 3 animation-play-state 规定动画是否正在运行或暂停。默认是 "running"。 3
7️⃣CSS3 多列布局与弹性盒模型布局（Flex Box）
- CSS3多列布局属性可以不使用多个div标签就能实现多列布局。CSS3中的多列布局模块描述了如何像报纸、杂志那样，把一个简单的区块拆成多列，并通过相应属性来实现列数、列宽、各列之间的空白间距。弹性盒模型布局方便了Web前端开发者根据复杂的前端分辨率进行弹性布局，轻松地实现页面中的某一区块在水平、垂直方向对齐，是进行响应式网站开发的一大利器。
- CSS3 多列属性如下
属性 描述 column-count 指定元素应该被分割的列数。 column-fill
指定如何填充列 column-gap 指定列与列之间的间隙 column-rule 所有 column-rule-* 属性的简写 column-rule-color 指定两列间边框的颜色 column-rule-style 指定两列间边框的样式 column-rule-width 指定两列间边框的厚度 column-span 指定元素要跨越多少列 column-width 指定列的宽度 columns column-width 与 column-count 的简写属性。 - 关于弹性盒子：弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
弹性容器内包含了一个或多个弹性子元素。
注意： 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。- 弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。
- CSS3 弹性盒子属性如下
属性 描述 display 指定 HTML 元素盒子类型。 flex-direction 指定了弹性容器中子元素的排列方式 justify-content 设置弹性盒子元素在主轴（横轴）方向上的对齐方式。 align-items 设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式。 flex-wrap 设置弹性盒子的子元素超出父容器时是否换行。 align-content 修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐 flex-flow flex-direction 和 flex-wrap 的简写 order 设置弹性盒子的子元素排列顺序。 align-self 在弹性子元素上使用。覆盖容器的 align-items 属性。 flex 设置弹性盒子的子元素如何分配空间。
8️⃣CSS3 多媒体查询
- CSS3 的多媒体查询继承了 CSS2 多媒体类型的所有思想： 取代了查找设备的类型，CSS3 根据设置自适应显示。媒体查询可用于检测很多事情，例如：viewport(视窗) 的宽度与高度、设备的宽度与高度、朝向 (智能手机横屏，竖屏) 、分辨率。
目前很多针对苹果手机，Android 手机，平板等设备都会使用到多媒体查询。- 多媒体查询语法
- 多媒体查询由多种媒体组成，可以包含一个或多个表达式，表达式根据条件是否成立返回 true 或 false。
@media not|only mediatype and (expressions) { CSS 代码...; }- 如果指定的多媒体类型匹配设备类型则查询结果返回 true，文档会在匹配的设备上显示指定样式效果。除非你使用了 not 或 only 操作符，否则所有的样式会适应在所有设备上显示效果。
- not: not是用来排除掉某些特定的设备的，比如 @media not print（非打印设备）。
only: 用来定某种特别的媒体类型。对于支持Media Queries的移动设备来说，如果存在only关键字，移动设备的Web浏览器会忽略only关键字并直接根据后面的表达式应用样式文件。对于不支持Media Queries的设备但能够读取Media Type类型的Web浏览器，遇到only关键字时会忽略这个样式文件。
all: 所有设备，这个应该经常看到。
- CSS3 多媒体类型如下
值 描述 all 用于所有多媒体类型设备 用于打印机 screen 用于电脑屏幕，平板，智能手机等。 speech 用于屏幕阅读器
CSS3的优势
减少开发成本与维护成本
- 在CSS3出现之前，开发人员为了实现一个圆角效果，往往需要添加额外的HTML标签，使用一个或多个图片来完成，而使用CSS3只需要一个标签，利用CSS3中的border-radius属性就能完成。这样，CSS3技术能把人员从绘图、切图和优化图片的工作中解放出来。如果后续需要调整这个圆角的弧度或者圆角的颜色，使用CSS2.1，需要从头绘图、切图才能实现，使用CSS3只需修改border-radius属性值就可快速完成修改。
- CSS3提供的动画特性，可让开发者在先实现一些动态按钮或者动态导航时远离JavaScript，让开发人员不需要花费大量的时间去写脚本或者寻找合适的脚本插件来适配一些动态网站效果。
- 提高页面性能
- 很多CSS3技术通过提供相同的视觉效果而成为图片的“替代品”，换句话说，在进行Web开发时，减少多余的标签嵌套以及图片的使用数量，意味着用户要下载的内容将会更少，页面加载也会更快。另外，更少的图片、脚本和Flash文件能够减少用户访问Web站点时的HTTP请求数，这是提升页面加载速度的最佳方法之一。而使用CSS3制作图形化网站无需任何图片，极大地减少了HTTP的请求数量，并且提升了页面的加载速度。例如CSS3的动画效果，能够减少对JavaScript和Flash文件的HTTP请求，但可能会要求浏览器执行很多的工作来完成这个动画效果的渲染，这有可能导致浏览器响应缓慢致使用户流失。因此，在使用一些复杂的特效时需要考虑清楚。其实很多CSS3技术能够在任何情况下都大幅提高页面的性能 。
- CSS3将完全向后兼容，所以没有必要修改的设计来让它们继续运作。网络浏览器也还将继续支持CSS2 。