CSS3备忘
来源:互联网 发布:什么是aso优化 编辑:程序博客网 时间:2024/04/30 13:54
1.before伪元素选择器,用于在某个元素之前插入一些内容(类似after用法类似,用于在元素之后插入内容)
E::before{content:"字符串";//或者content:url();}
另,css3将伪对象选择符单个冒号(:)改为双冒号(::)用以区别伪类选择符,然单冒号写法依旧可用,兼容性方面:
2.target选择器,用于对页面中某个target元素,例如链接的锚点连接的位置中,通过设置target属性可以设置到锚点所在位置的样式,例如:
代码:
:target{ border:1px solid #0081C2; background-color: #0092DC; }
3.nth-child()选择器与nth-of-type()选择器的区别
用法:
E:nth-child(index){};//选择父级中指定位置下的E元素E:nth-of-type(index){};//选择父级中所有E元素中下标位置值为index的E元素;
4.only-child与only-of-type选择器,
用法:
E:only-child{};//选择父级中只有E元素的当前E元素的样式E:only-of-type;//与nth-of-type类似
5.selection选择器.指定当元素处于选中状态时的样式
E::selection;//常用于使用鼠标选择某元素
5.在字符串两边添加嵌套成对的文字符号
content:open-quote '内容' close-quote;
实例:
h3{ counter-increment: mycounter; quotes: '(' ')';}h3:before{ content: open-quote'第'counter(mycounter)'个' ; }
结果:
6.display:list-item.将多个元素作为列表来显示,同时在元素的开头添加列表的标记,使用方式与li类似,通过list-style-type设置标记样式
7.box-sizing是指指定元素的宽度和高度,相比于css2设置的width,height属性,使用box-sizing:content-box/border-box设置,其中content-box不包括内部空白,边框的宽度和高度,border-box则是包括,因此使用box-sizing设置时会有不同的宽度和高度
代码:
<div class="border-box"></div><div class="content-box"></div> .border-box,.content-box{ border: 1px solid; width:300px; height: 200px; display: inline-block; margin: 100px; padding: 50px; }.border-box{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background-color: red; opacity: 1; }.content-box{ background-color: blue; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; position: absolute; left: 0; opacity: 0.5; }
结果:
8.弹性盒布局.解决使用position和float进行布局出现的底部不对齐情况
8.1使用自适应窗口的弹性盒布局. 父级元素设置display:-moz-box;/-webkit-box;//目前只有这两种支持 子级元素设置-moz-box-flex:1;/-webkit-box-flex:1;//1表示能够分配到的父级剩余空白区域的比例
8.2改变元素的显示顺序
子级元素中添加-moz-box-ordinal-group:3;/-webkit-box-ordinal-group:3;//显示顺序按照该数值从小到大依次显示,若是相同,则按照html中顺序进行显示
8.3改变元素的排列方向
父级元素中添加-moz-box-orient:horizontal;(默认水平方向);vertical(垂直方向)
8.4指定水平方向,垂直方向的对齐方式
0 0
- CSS3备忘
- css3 备忘
- CSS3 动画属性(备忘)
- css3 animation备忘
- CSS3的一些特性(备忘)
- css3 动画 结合jquery 学习备忘
- 【备忘】2017年最新CSS3学习视频教程后盾网CSS3视频教程
- 备忘
- 备忘
- 备忘
- 备忘
- 备忘
- 备忘
- 备忘
- 备忘
- 备忘
- 备忘
- 备忘
- pyqt layout 如何不被遮挡
- HTTP Status 404 - There is no Action mapped for namespace [/] and action name [userAction!add] assoc
- 实习笔记(四)
- git多账号登录问题
- 有趣的C语言--函数声明和形参问题
- CSS3备忘
- 类加载机制
- Android抽象布局——include、merge 、ViewStub
- 【计算几何】 叉乘求多边形面积<凹凸均可>
- uboot命令详解
- 【miscellaneous】北斗短报文
- 7月份英语学习总结
- 2016多校联赛4L (hdu5775) Bubble Sort
- 优化策略(并发、数据量大的问题)