CSS 3基础

1.为了更好的向前兼容不同的浏览器,编写CSS3时都有哪些前缀?分别对应什么浏览器?

浏览器引擎前缀,是一些放在CSS属性前的小字符串,用来确保这种属性只在特定的浏览器渲染引擎下才能识别和生效。常用前缀和浏览器对应如下:

当需要使用浏览器引擎前缀(vendor-prefix)时,最好是把带有各种前缀的写法放在前面,然后把不带前缀的标准的写法放到最后。比如:

.box {
  -moz-border-radius: 10px; 
  -webkit-border-radius: 10px; 
  -o-border-radius: 10px; 
  border-radius: 10px; 
}
2.说说你理解的伪类和伪元素分别是什么?

伪类是基于元素的特征而不是他们的id、class、属性或者内容。一般来说,元素的特征是不可以从DOM树上推断得到的,而且其是动态的,当用户和DOM进行交互的时候,元素可以获得或者失去一个伪类。(这里有一个例外,就是:first-child:lang是可以从DOM树中推断出来的。)

CSS的现有标准中,伪类包括:

  • :first-child,应用第一个子元素
  • :link,应用未访问过的链接
  • :visited,应用已访问过的链接
  • :hover ,应用鼠标指针悬浮的元素
  • :active,应用活动的链接
  • :focus ,应用聚焦的输入元素
  • :lang,伪类将应用于元素带有指定lang的情况,不常用

伪元素是创造文档树之外的对象。例如文档不能提供访问元素内容第一字或者第一行的机制。伪元素还提供一些在源文档中不存在的内容分配样式,例如:before:after能够访问产生的内容。伪元素的内容实际上和普通DOM元素是相同的,但是它本身只是基于元素的抽象,并不存在于文档中,所以叫伪元素。

CSS的现有标准中,伪元素包括:

  • :first-letter,伪元素的样式将应用于元素文本的第一个字(母)
  • :first-line ,伪元素的样式将应用于元素文本的第一行
  • :before ,在元素内容的最前面添加新内容
  • :after ,在元素内容的最后面添加新内容
3.分清 TransformTransitionAnimations 三兄弟,并阐述它们分别的用处?

TransformTransitionAnimations是动画三兄弟。能给你的界面加上炫酷的效果。

  • CSStransform属性允许你旋转,缩放,倾斜或平移给定元素。
div {
  border: solid red;
  transform: translate(30px, 20px) rotate(20deg);
  width: 140px;
  height: 60px;
}
  • CSS transition提供了一种在更改CSS属性时控制动画速度的方法。 其可以让属性变化成为一个持续一段时间的过程,而不是立即生效的。比如,将一个元素的颜色从白色改为黑色,通常这个改变是立即生效的,使用 CSS transitions 后该元素的颜色将逐渐从白色变为黑色,按照一定的曲线速率变化。

    CSS transitions 可以决定哪些属性发生动画效果 (明确地列出这些属性),何时开始 (设置 delay),持续多久 (设置 duration) 以及如何动画 (定义timing function,比如匀速地或先快后慢)。

div {
    transition:    ;
}
  • CSS animations 使得可以将从一个CSS样式配置转换到另一个CSS样式配置。动画包括两个部分:描述动画的样式规则和用于指定动画开始、结束以及中间点样式的关键帧。

通过使用@keyframes建立两个或两个以上关键帧来实现。每一个关键帧都描述了动画元素在给定的时间点上应该如何渲染。

p {
  animation-duration: 3s;
  animation-name: myfirst;
}

@keyframes myfirst /*定义动画名*/
    {
    0%   {background:red; left:0px; top:0px;} /*定义起始帧样式,0%可以换成from*/
    25%  {background:yellow; left:200px; top:0px;}
    50%  {background:blue; left:200px; top:200px;}
    75%  {background:green; left:0px; top:200px;}
    100% {background:red; left:0px; top:0px;} /*定义结束帧样式,100%可以换成to*/
    }
}

总结来讲,transform描述了元素静态样式。而transitionanimation 都能实现动画效果。

这篇文章对后面两种动画效果进行了比较,总结如下:

  1. 触发条件不同。transition通常和hover等事件配合使用,由事件触发。animation则和gif动态图差不多,立即播放。
  2. 循环。 animation可以设定循环次数。
  3. 精确性。 animation可以设定每一帧的样式和时间。tranistion 只能设定头尾。 animation中可以设置每一帧需要单独变化的样式属性, transition中所有样式属性都要一起变化。

你可能感兴趣的:(CSS 3基础)