前端开发面试题—CSS3新增特性

简介: 今天分享一下我遇到的一个面试题,是关于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)

image.gif


image.gif


image.gif


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是链接服务器字体的一种方式,这些嵌入的字体能变成浏览器的安全字体,开发人员不用再担心用户没有这些字体而导致网页在用户浏览器无法正常显示的问题
  • 使用规则和例子
  1. 在新的 @font-face 规则中,您必须首先定义字体的名称(比如 myFirstFont),然后指向该字体文件。提示:URL请使用小写字母的字体,大写字母在IE中会产生意外的结果
  2. 如需为 HTML 元素使用字体,请通过 font-family 属性来引用字体的名称 (myFirstFont)
  3. 例子,修改了字体为细尖的类似于电子表的数字

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将其定义为弹性容器。
    弹性容器内包含了一个或多个弹性子元素。
    注意: 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。
  • 弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。image.gif
  • 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 手机,平板等设备都会使用到多媒体查询。
  • 多媒体查询语法
  1. 多媒体查询由多种媒体组成,可以包含一个或多个表达式,表达式根据条件是否成立返回 true 或 false。
@medianot|onlymediatypeand (expressions) {
CSS 代码...;
}
  1. 如果指定的多媒体类型匹配设备类型则查询结果返回 true,文档会在匹配的设备上显示指定样式效果。除非你使用了 not 或 only 操作符,否则所有的样式会适应在所有设备上显示效果。
  2. not: not是用来排除掉某些特定的设备的,比如 @media not print(非打印设备)。
  3. only: 用来定某种特别的媒体类型。对于支持Media Queries的移动设备来说,如果存在only关键字,移动设备的Web浏览器会忽略only关键字并直接根据后面的表达式应用样式文件。对于不支持Media Queries的设备但能够读取Media Type类型的Web浏览器,遇到only关键字时会忽略这个样式文件。
  4. all: 所有设备,这个应该经常看到。
  • CSS3 多媒体类型如下
描述
all 用于所有多媒体类型设备
print 用于打印机
screen 用于电脑屏幕,平板,智能手机等。
speech 用于屏幕阅读器


🌌CSS3的优势

  • 减少开发成本与维护成本
  1. 在CSS3出现之前,开发人员为了实现一个圆角效果,往往需要添加额外的HTML标签,使用一个或多个图片来完成,而使用CSS3只需要一个标签,利用CSS3中的border-radius属性就能完成。这样,CSS3技术能把人员从绘图、切图和优化图片的工作中解放出来。如果后续需要调整这个圆角的弧度或者圆角的颜色,使用CSS2.1,需要从头绘图、切图才能实现,使用CSS3只需修改border-radius属性值就可快速完成修改。
  2. CSS3提供的动画特性,可让开发者在先实现一些动态按钮或者动态导航时远离JavaScript,让开发人员不需要花费大量的时间去写脚本或者寻找合适的脚本插件来适配一些动态网站效果。
  • 提高页面性能
  1. 很多CSS3技术通过提供相同的视觉效果而成为图片的“替代品”,换句话说,在进行Web开发时,减少多余的标签嵌套以及图片的使用数量,意味着用户要下载的内容将会更少,页面加载也会更快。另外,更少的图片、脚本和Flash文件能够减少用户访问Web站点时的HTTP请求数,这是提升页面加载速度的最佳方法之一。而使用CSS3制作图形化网站无需任何图片,极大地减少了HTTP的请求数量,并且提升了页面的加载速度。例如CSS3的动画效果,能够减少对JavaScript和Flash文件的HTTP请求,但可能会要求浏览器执行很多的工作来完成这个动画效果的渲染,这有可能导致浏览器响应缓慢致使用户流失。因此,在使用一些复杂的特效时需要考虑清楚。其实很多CSS3技术能够在任何情况下都大幅提高页面的性能 。
  2. CSS3将完全向后兼容,所以没有必要修改的设计来让它们继续运作。网络浏览器也还将继续支持CSS2 。
相关实践学习
利用大模型大规模分发技术,实现AIGC在线应用秒级弹性
通过ECI的数据缓存技术实现大模型的快速分发,将模型与应用解耦,敏捷部署,实现秒级在线弹性启动。
深入解析Docker容器化技术
Docker是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的Linux机器上,也可以实现虚拟化,容器是完全使用沙箱机制,相互之间不会有任何接口。Docker是世界领先的软件容器平台。开发人员利用Docker可以消除协作编码时“在我的机器上可正常工作”的问题。运维人员利用Docker可以在隔离容器中并行运行和管理应用,获得更好的计算密度。企业利用Docker可以构建敏捷的软件交付管道,以更快的速度、更高的安全性和可靠的信誉为Linux和Windows Server应用发布新功能。 在本套课程中,我们将全面的讲解Docker技术栈,从环境安装到容器、镜像操作以及生产环境如何部署开发的微服务应用。本课程由黑马程序员提供。     相关的阿里云产品:容器服务 ACK 容器服务 Kubernetes 版(简称 ACK)提供高性能可伸缩的容器应用管理能力,支持企业级容器化应用的全生命周期管理。整合阿里云虚拟化、存储、网络和安全能力,打造云端最佳容器化应用运行环境。 了解产品详情: https://www.aliyun.com/product/kubernetes
目录
相关文章
|
20小时前
|
缓存 前端开发 JavaScript
高级前端常见的面试题?
【7月更文挑战第11天】 **高级前端面试聚焦候选人的技术深度、项目实战、问题解决及技术趋势洞察。涉及React/Vue生命周期、Redux/Vuex状态管理、Webpack优化、HTTP/HTTPS安全、性能提升策略、PWA、GraphQL、WebAssembly、安全性议题及项目管理。通过回答,展现候选人技术广度与应对复杂场景的能力。**
7 1
|
2天前
|
安全 Java 开发者
Java面试题:什么是Java 15中的密封类以及其限制?还有哪些其他特性用于限制类继承的机制吗?
Java面试题:什么是Java 15中的密封类以及其限制?还有哪些其他特性用于限制类继承的机制吗?
12 1
|
1天前
|
移动开发 前端开发 JavaScript
前端常见的面试题都有那些?
【7月更文挑战第10天】 前端面试涵盖HTML5新特性、CSS盒模型、JS事件传播、Vue的双向绑定、React生命周期、性能优化策略、浏览器解析流程及安全知识等。例如,HTML5新增video/audio元素、CSS选择器优先级计算、闭包功能、async/await处理异步、Vue通过Object.defineProperty实现数据绑定、React组件生命周期的关键阶段、前端优化如CDN和资源压缩,以及浏览器如何构建渲染树。面试还可能涉及XSS/CSRF防护和框架选择考量。准备面试需全面理解基础概念并结合实践经验。
7 0
|
2天前
|
设计模式 并行计算 安全
Java面试题:如何使用设计模式优化多线程环境下的资源管理?Java内存模型与并发工具类的协同工作,描述ForkJoinPool的工作机制,并解释其在并行计算中的优势。如何根据任务特性调整线程池参数
Java面试题:如何使用设计模式优化多线程环境下的资源管理?Java内存模型与并发工具类的协同工作,描述ForkJoinPool的工作机制,并解释其在并行计算中的优势。如何根据任务特性调整线程池参数
9 0
|
10天前
|
前端开发 JavaScript UED
只会用插件可不行,这些前端动画技术同样值得收藏-CSS篇
只会用插件可不行,这些前端动画技术同样值得收藏-CSS篇
12 0
|
10天前
|
前端开发 JavaScript 编译器
如何在CSS中写变量?一文带你了解前端样式利器
如何在CSS中写变量?一文带你了解前端样式利器
18 0
|
10天前
|
JavaScript 前端开发
JS进阶篇(前端面试题整合)(三)
JS进阶篇(前端面试题整合)(三)
13 0
|
10天前
|
前端开发
前端 CSS 经典:模拟 material 文本框
前端 CSS 经典:模拟 material 文本框
9 0
|
10天前
|
前端开发
前端 CSS 经典:图层放大的 hover 效果
前端 CSS 经典:图层放大的 hover 效果
11 0
|
10天前
|
前端开发
前端 CSS 经典:保持元素宽高比
前端 CSS 经典:保持元素宽高比
12 0