总结css的使用技巧

1. 纯 CSS 的 tooltips

现在的要求是使用纯css在页面上显示一个title,或者图片的描述文字(在鼠标移入图片之后)：

content,attr()

content一般与::before,::aftere伪类使用，表示一个元素的前，后

arrt();一般用于获取一个元素的属性。

<a class="caption" href="#" data-title="pic name" data-content="this is a pic"><!---data-content是自定义的属性--->
     <img alt="img alert">
</a>
<style>
     .caption：hover::after{
         content:attr(data-title) ;
    }
</style>        

感觉还是很low.....

那么我们可以使用hint.css库文件https://github.com/chinchang/hint.css

一个很好的例子：https://codepen.io/SitePoint/pen/akAmPw

既然说到了content,那么他可以实现计数器的功能：http://codepen.io/lonekorean/pen/wKbzv

2） cubic-bezier() 动画

https://yisibl.github.io/cubic-bezier/#.17,.67,.04,.91

要想网站或 app 的 UI 更加引人注目的话，可以使用动画。但是标准的 easing 选项非常有限，比如“linear”或是“ease-in-out”。像是弹跳动画更是标准选项无法实现的。使用 cubic-bezier() 函数，就可以让元素按你想要的方式去动画。

3） CSS calc() 对齐 position:fixed 元素

比如三局平均分布的布局，中间间距为5像素。

*{margin: 0; padding: 0;}

.col-3{ calc(100%/3 - 5px); float: left; margin-right: calc(5px*3 /2); background: #eee; color: #333; height: 100px; text-align: center; margin-bottom: calc(5px*3 /2); font-size: 18px; line-height: 100px;}

.col-3:nth-child(3){margin-right: 0;} </style>

浏览器对calc()的兼容性还算不错，在IE9+、FF4.0+、Chrome19+、Safari6+都得到较好支持，同样需要在其前面加上各浏览器厂商的识别符，不过可惜的是，移动端的浏览器还没仅有“firefox for android 14.0”支持，其他的全军覆没。著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: http://www.w3cplus.com/css3/how-to-use-css3-calc-function.html © w3cplus.com