为了账号安全,请及时绑定邮箱和手机立即绑定
慕课网数字资源数据库体验端
十天精通CSS3_学习笔记_慕课网
为了账号安全,请及时绑定邮箱和手机立即绑定

十天精通CSS3

大漠 Web前端工程师
难度初级
时长 5小时 0分
  • background:rgba(255,255,255,0.5) 白色 255 255 255
    查看全部
  • 第一,屏幕和浏览器窗口大小发生改变也可以灵活调整布局; 第二,可以指定伸缩项目沿着主轴或侧轴按比例分配额外空间(伸缩容器额外空间),从而调整伸缩项目的大小; 第三,可以指定伸缩项目沿着主轴或侧轴将伸缩容器额外空间,分配到伸缩项目之前、之后或之间; 第四,可以指定如何将垂直于元素布局轴的额外空间分布到该元素的周围; 第五,可以控制元素在页面上的布局方向; 第六,可以按照不同于文档对象模型(DOM)所指定排序方式对屏幕上的元素重新排序。也就是说可以在浏览器渲染中不按照文档流先后顺序重排伸缩项目顺序。
    查看全部
  • 1. CSS2中,元素(例如div)的内边距(padding)和边框(border)会把元素自身撑大。想要个100*100px的div,都要事先计算,例如,内容80px + 内边距15px + 边框5px = 100px 2. CSS3中,新增 box-sizing 属性,如果设置元素为 box-sizing: border-box,那么元素的内边距(padding)和边框(border)不会再把元素自身撑大。例如,设置div为100*100px,那么无论div里内容、内边距、边框的宽高怎么变化,div的大小永远都是100*100px
    查看全部
    0 采集 收起 来源:CSS3 盒子模型

    2017-04-06

  • animation-fill-mode: none和backwards的区别是: none会从自己的颜色开始,然后在@keyframes的第一个颜色,第二个第三个第四个....最后会回到初始状态 forwards 也会和None一样从自己的颜色开机,但是他不会回到初始状态 backwards不会从自己本身的颜色开始,会从@keyframes第一个颜色开始,然后第二个颜色,第三个第四个.....最后会回到初始状态 both和backwards一样不会从自己本身的颜色开始,但是他最后不会回到初始状态。
    查看全部
  • 将div的默认样式改成黑色就很好看清楚了。如果没有animation-delay的话没有区别,加了delay:1s之后, 1、none在delay的1s内会呈现初始样式效果。 2、backwards在delay的1s内会呈现第一帧的样式效果。 3、forwards会在动画结束之后保持最后一帧的样式效果。 4、both会在delay的1s内呈现第一帧的样式效果,并且在动画结束之后保持最后一帧的样式效果。
    查看全部
  • 这个属性告诉我们,有些人可以一路走到底(forwards),有些人在遭受伤害后可以恢复到以前(none),甚至有些人可以从伤痛中快速的逃离(backwards),然而有些人已经回不去了,也不知道后面的路该如何走下去(both).
    查看全部
  • 总结下,CSS3中的三种动画:tranform形变动画/transition缓动动画/animation逐帧动画; tranform: rotate旋转/skew扭曲/scale缩放/translate移动/matrix矩阵变形; transition: property duration timing-function delay; animation: KeyframesName duration timing-function delay iteration-count direction play-state fill-mode;
    查看全部
  • border-box属ie盒子模型 (设置的宽度会默认为是容器的宽度,在里面随便折腾) content-box是w3c(设置的宽度是里面的内容,只能往外面折腾) ---------------------------------------------------------------------- 两句话解释什么是box-sizing 1. CSS2中,元素(例如div)的内边距(padding)和边框(border)会把元素自身撑大。想要个100*100px的div,都要事先计算,例如,内容80px + 内边距15px + 边框5px = 100px 2. CSS3中,新增 box-sizing 属性,如果设置元素为 box-sizing: border-box,那么元素的内边距(padding)和边框(border)不会再把元素自身撑大。例如,设置div为100*100px,那么无论div里内容、内边距、边框的宽高怎么变化,div的大小永远都是100*100px
    查看全部
    0 采集 收起 来源:CSS3 盒子模型

    2017-04-06

  • ease 规定慢速开始,然后变快,然后慢速结束的过渡效果(cubic-bezier(0.25,0.1,0.25,1))。 ease-in 规定以慢速开始的过渡效果(等于 cubic-bezier(0.42,0,1,1))。 ease-out 规定以慢速结束的过渡效果(等于 cubic-bezier(0,0,0.58,1))。 ease-in-out 规定以慢速开始和结束的过渡效果(等于 cubic-bezier(0.42,0,0.58,1))。 时间: 2016-07-14
    查看全部
  • a为元素的水平伸缩量,1为原始大小; b为纵向扭曲,0为不变; c为横向扭曲,0不变; d为垂直伸缩量,1为原始大小; e为水平偏移量,0是初始位置; f为垂直偏移量,0是初始位置
    查看全部
  • 以下是在网上查找到的关于translate和position:relative的区别: 相同点:两者都是相对于本身移动位置 区别: 1、当元素原来已经有position:absolute的时候,这时候你想相对于本身移动,可以使用translate 2、做动画的时候translate更适合,不会引起页面的重排和重绘 3、关于transform类的,可以使用GPU加速,提高浏览器的性能? 总之:transform更适用于动画 不要赞我
    查看全部
  • 单冒号(:)用于CSS3伪类,双冒号(::)用于CSS3伪元素
    查看全部
  • 在表单元素中,单选按钮和复选按钮都具有选中和未选中状态。(大家都知道,要覆写这两个按钮默认样式比较困难)。在CSS3中,我们可以通过状态选择器“:checked”配合其他标签实现自定义样式。而“:checked”表示的是选中状态。
    查看全部
  • “:only-of-type”选择器用来选择一个元素是它的父元素的唯一一个相同类型的子元素。这样说或许不太好理解,换一种说法。“:only-of-type”是表示一个元素他有很多个子元素,而其中只有一种类型的子元素是唯一的,使用“:only-of-type”选择器就可以选中这个元素中的唯一一个类型子元素。
    查看全部
  • “:only-child”选择器选择的是父元素中只有一个子元素,而且只有唯一的一个子元素。也就是说,匹配的元素的父元素中仅有一个子元素,而且是一个唯一的子元素。
    查看全部

举报

0/150
提交
取消
课程须知
1.html+CSS相关基础知识 2.具有一定的网页制作经验 3.此课程不支持IE9版本以下,建议使用 chrome、safari、firefox、opera浏览器学习本课程。
老师告诉你能学到什么?
1.系统学习CSS3相关知识 2.轻松制作出各种绚丽的效果
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!