前端面试必备的CSS3的特性
2018-12-20 09:33:51来源:爱站网 阅读 ()
CSS是一种发展中的“语言”,它是我们日常工作面试前端工作中必不可少的知识点,下面主要介绍前端面试必备的CSS3的特性,一起跟着爱站技术频道小编的步伐来了解一下吧!
选择器
CSS3中新添加了很多选择器,解决了很多之前需要用javascript才能解决的布局问题。
- element1~element2: 选择前面有element1元素的每个element2元素。
- [attribute^=value]: 选择某元素attribute属性是以value开头的。
- [attribute$=value]: 选择某元素attribute属性是以value结尾的。
- [attribute*=value]: 选择某元素attribute属性包含value字符串的。
- E:first-of-type: 选择属于其父元素的首个E元素的每个E元素。
- E:last-of-type: 选择属于其父元素的最后E元素的每个E元素。
- E:only-of-type: 选择属于其父元素唯一的E元素的每个E元素。
- E:only-child: 选择属于其父元素的唯一子元素的每个E元素。
- E:nth-child(n): 选择属于其父元素的第n个子元素的每个E元素。
- E:nth-last-child(n): 选择属于其父元素的倒数第n个子元素的每个E元素。
- E:nth-of-type(n): 选择属于其父元素第n个E元素的每个E元素。
- E:nth-last-of-type(n): 选择属于其父元素倒数第n个E元素的每个E元素。
- E:last-child: 选择属于其父元素最后一个子元素每个E元素。
- :root: 选择文档的根元素。
- E:empty: 选择没有子元素的每个E元素(包括文本节点)。
- E:target: 选择当前活动的E元素。
- E:enabled: 选择每个启用的E元素。
- E:disabled: 选择每个禁用的E元素。
- E:checked: 选择每个被选中的E元素。
- E:not(selector): 选择非selector元素的每个元素。
- E::selection: 选择被用户选取的元素部分。
Transition,Transform和Animation
这三个特性是CSS3新增的和动画相关的特性。
Transition
Transition可以在当元素从一种样式变换为另一种样式时为元素添加效果,而不用使用Flash动画或JavaScript。
Transition有如下属性:
- transition-property: 规定应用过渡的CSS属性的名称。
- transition-duration: 规定完成过渡效果需要多长时间。
- transition-delay: 规定过渡效果何时开始,默认是0。
- transition-timing-function: 规定过渡效果的时间曲线,默认是”ease”,还有linear、ease-in、ease-out、ease-in-out和cubic-bezier等过渡类型。
- transition: 简写属性,用于在一个属性中设置四个过渡属性。
在一个例子中使用所有过渡属性如下:
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; }
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:DIV中文字换行显示
下一篇:【CSS】环形进度条
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-15
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-15
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-14
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-13
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-02
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash