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

十天精通CSS3

大漠 Web前端工程师
难度初级
时长 5小时 0分
  • box-shadow: --X轴偏移量,如果正数在右边外则出现阴影,负数在左边外则出现阴影 --Y轴偏移量,如果正数在下边外则出现阴影,负数在上边外则出现阴影 --阴影模糊半径 --阴影扩展半径,在没有阴影的边也出现阴影 --inset,让x,y变号,也就是左侧变右侧,上侧变下测,外面的阴影变成里面
    查看全部
  • CSS3新增的@media (1)在样式文件中引用媒体类型: @media screen { 选择器{/*你的样式代码写在这里…*/} } (2)使用@media引入媒体类型的方式是在<head>标签中的<style>中引用。 <head> <style type="text/css"> @media screen{ 选择器{/*你的样式代码写在这里…*/} } </style> </head>
    查看全部
  • 1 display属性的值为flex。 2 通过flex-direction来改变主轴方向修改为column,其默认值是row。
    查看全部
  • CSS3引入了一种新的布局模式——Flexbox布局,即伸缩布局盒模型(Flexible Box),用来提供一个更加有效的方式制定、调整和分布一个容器里项目布局,即使它们的大小是未知或者动态的,这里简称为Flex。 Flexbox布局常用于设计比较复杂的页面,可以轻松的实现屏幕和浏览器窗口大小发生变化时保持元素的相对位置和大小不变,同时减少了依赖于浮动布局实现元素位置的定义以及重置元素的大小。 Flexbox布局在定义伸缩项目大小时伸缩容器会预留一些可用空间,让你可以调节伸缩项目的相对大小和位置。例如,你可以确保伸缩容器中的多余空间平均分配多个伸缩项目,当然,如果你的伸缩容器没有足够大的空间放置伸缩项目时,浏览器会根据一定的比例减少伸缩项目的大小,使其不溢出伸缩容器。综合而言,Flexbox布局功能主要具有以下几点: 第一,屏幕和浏览器窗口大小发生改变也可以灵活调整布局; 第二,可以指定伸缩项目沿着主轴或侧轴按比例分配额外空间(伸缩容器额外空间),从而调整伸缩项目的大小; 第三,可以指定伸缩项目沿着主轴或侧轴将伸缩容器额外空间,分配到伸缩项目之前、之后或之间; 第四,可以指定如何将垂直于元素布局轴的额外空间分布到该元素的周围; 第五,可以控制元素在页面上的布局方向; 第六,可以按照不同于文档对象模型(DOM)所指定排序方式对屏幕上的元素重新排序。也就是说可以在浏览器渲染中不按照文档流先后顺序重排伸缩项目顺序。
    查看全部
  • 在CSS3中新增加了box-sizing属性,能够事先定义盒模型的尺寸解析方式,其语法规则如下: box-sizing: content-box | border-box | inherit
    查看全部
    0 采集 收起 来源:CSS3 盒子模型

    2015-03-28

  • box-sizing: 在CSS中盒模型被分为两种,第一种是w3c的标准模型,另一种是IE的传统模型,它们相同之处都是对元素计算尺寸的模型,具体说不是对元素的width、height、padding和border以及元素实际尺寸的计算关系,它们不同之处是两者的计算方法不一致,原则上来说盒模型是分得很细的
    查看全部
    0 采集 收起 来源:CSS3 盒子模型

    2015-03-28

  • 在自适应布局当中,在元素基础上添加内距padding,按照标准盒模型解析,往往会将布局撑破,但使用box-sizing的border-box值,可以让你轻松完成
    查看全部
    0 采集 收起 来源:CSS3 盒子模型

    2015-03-28

  • transform perspective
    查看全部
  • animation-fill-mode 设置播放之前和播放完后,div 的状态,在的on动画的哪个一帧 none 动画播放前div是黑色,播放后也是黑色 forwards 播放前div是黑色,播放后是蓝色 backwards 播放前div是红色,播放后是黑色 both 播放前是红色,播放后是蓝色
    查看全部
  • 注意: 用逗号隔开每组 background 的缩写值; 如果有 size 值,需要紧跟 position 并且用 "/" 隔开; 如果有多个背景图片,而其他属性只有一个(例如 background-repeat 只有一个),表明所有背景图片应用该属性值。 background-color 只能设置一个
    查看全部
  • /*必须项,设置@font-face中font-family同样的值*/
    查看全部
  • transform-origin取值和元素设置背景中的background-position取值类似
    查看全部
  • box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]; 可以设计按钮效果
    查看全部
  • 圆角 border-radio
    查看全部
  • input[type="checkbox"] + span 代表的意思是:+ 号表示紧跟input单选后的所有span元素
    查看全部

举报

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

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