前端开发招聘面试必备之CSS3的新特点

2021-01-20 18:38 jianzhan

序言

以前大家早已给大伙儿详细介绍了有关html5的新特点,除html5的新特点,CSS3的新特点也是招聘面试中常常被问到的。下面话很少说了,必须的盆友们追随网编来1起看看详尽的详细介绍吧。

挑选器

CSS3中新加上了许多挑选器,处理了许多以前必须用javascript才可以处理的合理布局难题。

  1. element1~element2: 挑选前面有element1元素的每一个element2元素。
  2. [attribute^=value]: 挑选某元素attribute特性是以value开始的。
  3. [attribute$=value]: 挑选某元素attribute特性是以value末尾的。
  4. [attribute*=value]: 挑选某元素attribute特性包括value标识符串的。
  5. E:first-of-type: 挑选属于其父元素的首个E元素的每一个E元素。
  6. E:last-of-type: 挑选属于其父元素的最终E元素的每一个E元素。
  7. E:only-of-type: 挑选属于其父元素唯1的E元素的每一个E元素。
  8. E:only-child: 挑选属于其父元素的唯1子元素的每一个E元素。
  9. E:nth-child(n): 挑选属于其父元素的第n个子元素的每一个E元素。
  10. E:nth-last-child(n): 挑选属于其父元素的倒数第n个子元素的每一个E元素。
  11. E:nth-of-type(n): 挑选属于其父元素第n个E元素的每一个E元素。
  12. E:nth-last-of-type(n): 挑选属于其父元素倒数第n个E元素的每一个E元素。
  13. E:last-child: 挑选属于其父元素最终1个子元素每一个E元素。
  14. :root: 挑选文本文档的根元素。
  15. E:empty: 挑选沒有子元素的每一个E元素(包含文字连接点)。
  16. E:target: 挑选当今主题活动的E元素。
  17. E:enabled: 挑选每一个开启的E元素。
  18. E:disabled: 挑选每一个禁用的E元素。
  19. E:checked: 挑选每一个被选定的E元素。
  20. E:not(selector): 挑选非selector元素的每一个元素。
  21. E::selection: 挑选被客户选择的元素一部分。

Transition,Transform和Animation

这3个特点是CSS3新增的和动漫有关的特点。

Transition

Transition能够在当元素从1种款式转换为另外一种款式时为元素加上实际效果,而无需应用Flash动漫或JavaScript。

Transition有以下特性:

  1. transition-property: 要求运用过渡的CSS特性的名字。
  2. transition-duration: 要求进行过渡实际效果必须多长期。
  3. transition-delay: 要求过渡实际效果什么时候刚开始,默认设置是0。
  4. transition-timing-function: 要求过渡实际效果的時间曲线图,默认设置是”ease”,也有linear、ease-in、ease-out、ease-in-out和cubic-bezier等过渡种类。
  5. transition: 简写特性,用于在1个特性中设定4个过渡特性。

在1个事例中应用全部过渡特性以下:

div {
    transition-property: width;
    transition-duration: 1s;
    transition-timing-function: linear;
    transition-delay: 2s;
    /* Firefox 4 */
    -moz-transition-property:width;
    -moz-transition-duration:1s;
    -moz-transition-timing-function:linear;
    -moz-transition-delay:2s;
    /* Safari 和 Chrome */
    -webkit-transition-property:width;
    -webkit-transition-duration:1s;
    -webkit-transition-timing-function:linear;
    -webkit-transition-delay:2s;
    /* Opera */
    -o-transition-property:width;
    -o-transition-duration:1s;
    -o-transition-timing-function:linear;
    -o-transition-delay:2s;
}

应用transition特性简写以下:

div {
    transition: width 1s linear 2s;
    /* Firefox 4 */
    -moz-transition:width 1s linear 2s;
    /* Safari and Chrome */
    -webkit-transition:width 1s linear 2s;
    /* Opera */
    -o-transition:width 1s linear 2s;
}

Transform

Transform用来向元素运用各种各样2D和三d变换,该特性容许大家对元素开展转动、放缩、挪动或歪斜等实际操作。应用方法以下:

div{
    transform:rotate(7deg);
    -ms-transform:rotate(7deg);     /* IE 9 */
    -moz-transform:rotate(7deg);    /* Firefox */
    -webkit-transform:rotate(7deg); /* Safari 和 Chrome */
    -o-transform:rotate(7deg);  /* Opera */
}

转换种类

transform能够有各种各样转换种类,即特性值:

  1. none: 界定不开展变换。
  2. matrix(n,n,n,n,n,n): 界定2D变换,应用6个值的引流矩阵。
  3. matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n): 界定三d变换,应用16个值的4x4引流矩阵。
  4. translate(x,y): 界定2D位移变换。
  5. translate3d(x,y,z): 界定三d位移变换。
  6. translateX(x): 界定位移变换,只是用X轴的值。
  7. translateY(y): 界定位移变换,只是用Y轴的值。
  8. translateZ(z): 界定三d位移变换,只是用Z轴的值。
  9. scale(x,y): 界定2D放缩变换。
  10. scale3d(x,y,z): 界定三d放缩变换。
  11. scaleX(x): 根据设定X轴的值来界定放缩变换。
  12. scaleY(y): 根据设定Y轴的值来界定放缩变换。
  13. scaleZ(z): 根据设定Z轴的值来界定三d放缩变换。
  14. rotate(angle): 界定2D转动,在主要参数中要求角度。
  15. rotate3d(x,y,z,angle): 界定三d转动。
  16. rotateX(angle): 界定沿着X轴的三d转动。
  17. rotateY(angle): 界定沿着Y轴的三d转动。
  18. rotateZ(angle): 界定沿着Z轴的三d转动。
  19. skew(x-angle,y-angle): 界定沿着X和Y轴的2D歪斜变换。
  20. skewX(angle): 界定沿着X轴的2D歪斜变换。
  21. skewY(angle): 界定沿着Y轴的2D歪斜变换。
  22. perspective(n): 为三d变换元素界定透視主视图。

访问器适用

Internet Explorer 10、Firefox、Opera 适用 transform 特性。

Internet Explorer 9 适用取代的 -ms-transform 特性(仅可用于 2D 变换)。

Safari 和 Chrome 适用取代的 -webkit-transform 特性(三d 和 2D 变换)。

Opera 只适用 2D 变换。

Animation

Animation让CSS有着了能够制做动漫的作用。应用CSS3的Animation制做动漫大家能够省去繁杂的js编码。应用方式大约以下:

@-webkit-keyframes anim1 { 
   0% { 
        opacity: 0; 
        font-size: 12px; 
   } 
   100% { 
        opacity: 1; 
        font-size: 24px; 
   } 
} 
.anim1Div { 
   -webkit-animation-name: anim1 ; 
   -webkit-animation-duration: 1.5s; 
   -webkit-animation-iteration-count: 4; 
   -webkit-animation-direction: alternate; 
   -webkit-animation-timing-function: ease-in-out; 
}

实际用法能够参照实例教程:CSS3 Animation。

边框

CSS3新增了3个边框特性,各自是border-radius、box-shadow和border-image。border-radius能够建立圆角边框,box-shadow能够为元素加上黑影,border-image可使用照片来绘图边框。IE9+适用border-radius和box-shadow特性。Firefox、Chrome和Safari适用全部新的边框特性。

情况

CSS3新增了几个有关情况的特性,各自是background-clip、background-origin、background-size和background-break。

background-clip

background-clip特性用于明确情况画区,有下列几种将会的特性:

  1. background-clip: border-box; 情况从border刚开始显示信息
  2. background-clip: padding-box; 情况从padding刚开始显示信息
  3. background-clip: content-box; 情况显content地区刚开始显示信息
  4. background-clip: no-clip; 默认设置特性,等同于于border-box

一般状况,情况全是遮盖全部元素的,运用这个特性能够设置情况色调或照片的遮盖范畴。

background-origin

background-clip特性用于明确情况的部位,它一般与background-position协同应用,能够从 border、padding、content来测算background-position(就像background-clip)。

  1. background-origin: border-box; 从border刚开始测算background-position
  2. background-origin: padding-box; 从padding刚开始测算background-position
  3. background-origin: content-box; 从content刚开始测算background-position

background-size

background-size特性常见来调剂情况照片的尺寸,关键用于设置照片自身。有下列将会的特性:

  1. background-size: contain; 变小照片以合适元素(保持像素长宽比)
  2. background-size: cover; 拓展元素以弥补元素(保持像素长宽比)
  3. background-size: 100px 100px; 变小照片至特定的尺寸
  4. background-size: 50% 100%; 变小照片至特定的尺寸,百分比为相对性包 含元素的规格

background-break

CSS3中,元素能够被分为几个单独的盒子(如使内联元素span超越多行),background-break 特性用来操纵情况如何在这些不一样的盒子中显示信息。

  1. background-break: continuous; 默认设置值。忽视盒之间的间距(也便是像元素沒有分为好几个盒子,仍然是1个总体1样)
  2. background-break: bounding-box; 把盒之间的间距测算在内;
  3. background-break: each-box; 为每一个盒子独立重绘情况。

文本实际效果

word-wrap

CSS3中,word-wrap特性容许您容许文字强制性文字开展换行,即这代表着会对单词开展拆分。全部流行访问器都适用 word-wrap 特性。

p {
    word-wrap:break-word;
}

text-overflow

它与word-wrap是协作工作中的,word-wrap设定或查找铛铛向前超出特定器皿的界限时是不是断掉改行,而 text-overflow则设定或查找铛铛向前超出特定器皿的界限时怎样显示信息。针对“text-overflow”特性,有“clip”和“ellipsis”两种可供挑选。

text-shadow

CSS3中,text-shadow可向文字运用黑影。可以要求水平黑影、竖直黑影、模糊不清间距,和黑影的色调。

h1{
    text-shadow: 5px 5px 5px #FF0000;
}

text-decoration

CSS3里边刚开始适用对文本的更深层次次的3D渲染,实际有3个特性可供设定:

  1. text-fill-color: 设定文本內部填充色调
  2. text-stroke-color: 设定文本界限填充色调
  3. text-stroke-width: 设定文本界限宽度

渐变色

CSS3新增了渐变色实际效果,包含linear-gradient(线形渐变色)和radial-gradient(轴向渐变色)。实际用法参照实例教程:CSS3 Gradient

@font-face特点

在CSS3以前,web设计方案师务必应用已在客户测算机上安裝好的字体样式。根据CSS3,web设计方案师可使用她们喜爱的随意字体样式。当您您寻找或选购到期待应用的字体样式时,可将该字体样式文档储放到web服务器上,它会在必须时被全自动免费下载到客户的测算机上。字体样式是在 CSS3 @font-face 标准中界定的。Firefox、Chrome、Safari和Opera适用 .ttf(True Type Fonts)和 .otf(OpenType Fonts)种类的字体样式。IE9+ 适用新的@font-face标准,可是仅适用 .eot种类的字体样式(Embedded OpenType)。

在新的@font-face标准中,务必最先界定字体样式的名字(例如myFont),随后指向该字体样式文档。
 

如需为HTML元素应用字体样式,请根据font-family特性来引入字体样式的名字 (myFont)

@font-face {
    font-family: myFirstFont;
    src: url('Sansation_Light.ttf'),
         url('Sansation_Light.eot'); /* IE9+ */
}
div{
    font-family:myFirstFont;
}

两列合理布局

根据CSS3,可以建立好几个列来对文字开展合理布局,IE10和Opera适用两列特性。Firefox 必须前缀-moz-,Chrome和Safari必须前缀-webkit-。关键有以下3个特性:

  1. column-count: 要求元素应当被隔开的列数。
  2. column-gap: 要求列之间的间距。
  3. column-rule: 设定列之间的宽度、款式和色调标准
div{
    -moz-column-count:3;    /* Firefox */
    -webkit-column-count:3; /* Safari 和 Chrome */
    column-count:3;
    -moz-column-gap:40px;       /* Firefox */
    -webkit-column-gap:40px;    /* Safari 和 Chrome */
    column-gap:40px;
    -moz-column-rule:3px outset #ff0000;    /* Firefox */
    -webkit-column-rule:3px outset #ff0000; /* Safari and Chrome */
    column-rule:3px outset #ff0000;
}

客户页面

CSS3中,新的客户页面特点包含更改元素规格、盒规格和轮廊等。Firefox、Chrome和Safari 适用resize特性。IE、Chrome、Safari和Opera适用box-sizing特性。Firefox必须前缀-moz-。
全部流行访问器都适用outline-offset特性,除IE。

resize

resize 特性要求是不是可由客户调剂元素规格。假如期待此特性起效,必须设定元素的 overflow 特性,值能够是 auto、hidden 或 scroll。

div{
    resize:both; /* none|both|horizontal|vertical; */
    overflow:auto;
}

box-sizing

box-sizing特性可设定的值有content-box、border-box和inherit。

  1. content-box: padding和border不被包括在界定的width和height以内。目标的具体宽度等于设定的width值和border、padding之和,即 (Element width = width + border + padding),此特性主要表现为规范方式下的盒实体模型。
  2. border-box: padding和border被包括在界定的width和height以内。目标的具体宽度就等于设定的width值,即便界定有border和padding也不容易更改目标的具体宽度,即 (Element width = width),此特性主要表现为奇异方式下的盒实体模型。

outline-offset

outline-offset特性对轮廊开展偏位,并在超过边框边沿的部位绘图轮廊。

总结

以上便是这篇文章内容的所有內容了,期待本文的內容对大伙儿的学习培训或工作中能带来1定的协助,假如有疑惑大伙儿能够留言沟通交流,感谢大伙儿对脚本制作之家的适用。