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: <property> <duration> <timing-function> <delay>;
}
  • 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中所有样式属性都要一起变化。
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,342评论 0 11
  • Q1 为了更好的向前兼容不同的浏览器,编写CSS3时都有哪些前缀?分别对应什么浏览器? 前缀浏览器-webkitc...
    过了爱想象悲伤的年纪阅读 128评论 0 0
  • CSS参考手册 一、初识CSS3 1.1 CSS是什么 CSS3在CSS2.1的基础上增加了很多强大的新功能。目前...
    没汁帅阅读 3,711评论 1 13
  • CSs概述 cascading style sheets 层叠样式表 简称为样式表 2.作用 用来去设置ht...
    newTmorrow阅读 1,069评论 0 0
  • 又一夜, 时光在黎明中悄然醒来 窗外依稀的光 是夜轻呓的语 隔着窗 隐约听见鸡远远地鸣 激扬顿挫 此起彼伏 仿佛冬...
    99太阳风阅读 220评论 1 6