logo头像

总有人间一两风,填我十万八千梦

前端面试系列(2)——CSS3新特性

CSS3 是 CSS 的 v3 版本,这套新标准提供了更加丰富且实用的规范,如:盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等等;和 HTML5 不同,CSS3 的新特性基本上得到了广泛应用,而知道并熟练运用这些新特性已经成为前端人员的必修课:

更方便快捷的选择器

:nth-child、:nth-last-child、:nth-of-type、:last-child、:only-child、:empty

CSS3 新增的选择器有很多,就不一一介绍了,这里有一篇关于 CSS3 新增选择器的文章总结的很好:CSS系列:CSS3新增选择器

框模型

border-radius(圆角)、box-shadow(盒子阴影)、border-image(边框图片)

背景

background-size(背景大小)、background-origin(背景的定位)、background-clip(背景的绘制区域)、支持多重背景图片(background-image: url(bg_flower.gif), url(bg_flower_2.gif);)

渐变效果

gradient 属性可以非常方便的实现渐变色,同时可以设置渐变的方向和渐变方式等,实现各种复杂的效果。文末有一篇讲解 gradient 的文章讲的很不错,感兴趣的可以去瞅瞅。

文本效果

text-shadow(文本阴影)、word-break(规定非中日韩文本的换行规则)、word-wrap(允许对长的不可分割的单词进行分割并换行到下一行)

CSS3 的文本属性比较多,还是用一张图片代替吧(来自 w3c):

@font-face

可以在网页中使用除默认字体之外的其他字体,先定义字体的名称,然后引入字体文件,在需要使用该字体的时候就通过 font-family 属性引用字体的名称

1
2
3
4
5
6
7
8
9
10
11
<style> 
@font-face {
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot'); /* IE9+ */
}

div{
font-family: myFirstFont;
}
</style>

transform

我认为这是 CSS3 最“好用”的特性,也正是因为这个属性(当然,下面那个属性也功不可没),通过 CSS3 转换就可以能够堆元素进行移动、缩放、转动、拉长或拉伸;同时结合对持续时间和延迟时间的控制,可以“创造”出非常炫的动画效果,大大提升了网页的展示效果。同时分为 2D 和 3D 转换,由于内容繁多,就不一一介绍了,感兴趣的小伙伴可以点击文末的链接进行进一步的学习。

transtion

当元素从一种样式变换为另一种样式时为元素添加效果,使动画更加“圆润”流畅

@keyframes

这是个面试中会经常问到的属性,原因是其应用领域非常广泛,因为如今用户的时间非常宝贵,同时网络上的信息又是鱼龙混杂,如何在有限的时间内抓住用户眼球是一个重要的课题,而 @keyframes 就可以让自己的网页焕然一新并且与众不同,通过 @keyframes 规则可以创建关键帧动画,再结合 animation 就可以使元素“动”起来。

多列布局

通过column-count(列数)、column-fill(如何填充列)、column-gap(列之间的间隔)、column-width(列的宽度)可以创建多个列来对文本进行布局,就像报纸那样。

用户界面

  • resize:是否可由用户调整元素尺寸
  • box-sizing:border-box / content-box,这个属性我也很喜欢,可以改变传统的“盒子模型”,方便进行布局
  • outline-offset:对轮廓进行偏移,并在超出边框边缘的位置绘制轮廓(轮廓不占用空间并且可能是非矩形,这两点和边框不同)

Flex 弹性布局

这个属性让开发者非常头疼的“居中”问题找到了一种十分简便的答案,可以非常方便地实现让一个或多个元素在其父元素中垂直居中,建议大家去看阮一峰对其的讲解,很全面并且简单易懂(链接在文末)。

扩展阅读

支付宝打赏 微信打赏

听说赞过就能年薪百万