![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css3
强强强子
正在奋斗学习的程序猿
展开
-
移动web适配利器-rem
前言 提到rem,大家首先会想到的是em,px,pt这类的词语,大多数人眼中这些单位是用于设置字体的大小的,没错这的确是用来设置字体大小的,但是对于rem来说它可以用来做移动端的响应式适配哦。 兼容性 先看看兼容性,关于移动端 ios:6.1系统以上都支持 android:2.1系统以上都支持 大部分主流浏览器都支持,可以安心转载 2016-11-21 11:50:13 · 3084 阅读 · 0 评论 -
高性能 CSS3 动画
高性能移动Web相较PC的场景需要考虑的因素也相对更多更复杂,我们总结为以下几点: 流量、功耗与流畅度。 在PC时代我们更多的是考虑体验上的流畅度,而在Mobile端本身丰富的场景下,需要额外关注对用户基站网络流量使用的情况,设备耗电量的情况。 关于流畅度,主要体现在前端动画中,在现有的前端动画体系中,通常有两种模式:JS动画与CSS3动画。 JS动画是通过JS动态改写样式实现动画能力的一种转载 2016-11-21 12:57:44 · 399 阅读 · 0 评论 -
CSS动画属性性能
CSS动画属性会触发整个页面的重排relayout、重绘repaint、重组recompositePaint通常是其中最花费性能的,尽可能避免使用触发paint的CSS动画属性,这也是为什么我们推荐在CSS动画中使用webkit-transform: translateX(3em)的方案代替使用left: 3em,因为left会额外触发layout与paint,而webkit-transfor转载 2016-11-21 13:00:10 · 520 阅读 · 0 评论 -
HTML5+CSS3整体回顾
来源:http://blog.poetries.top/2016/10/19/HTML5+CSS3%E5%9F%BA%E7%A1%80%E5%9B%9E%E9%A1%BE%20/ 这篇文章主要总结H5的一些新增的功能以及一些基础归纳,这里只是一个提纲,并不是很详细,后面会一直完善补充新的内容,本文是一些笔记记录,放在这里供自己参考也供他人学习! 第一课 HTML5结构转载 2017-01-02 11:51:28 · 1190 阅读 · 0 评论 -
实用的60个CSS代码片段
1、垂直对齐 如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,可以很优雅的解决这个困惑: .verticalcenter{ position: relative; top: 50%; -webkit-transform: translateY(-50%); -o-transform: translateY(转载 2017-01-02 12:02:25 · 691 阅读 · 0 评论 -
css实现图片与文字底边对齐
通常图片与文字放在一起的时候图片往往会偏上,通过设置margin-bottom可以达到文字图片底边对齐的目的 我们在做网页的时候, 会遇到一个图片和文字位置对不齐的问题.(一般表现在图片总是比文字高点) 解决问题最好的办法:.一个关键的属性: margin-bottom 通过修改图片的外边框的底部高度就可以让文字移动上来. 做法是把这个值设置为负数.例如我们把下面的16X15的图片设置转载 2016-12-22 21:54:51 · 15561 阅读 · 0 评论