首页> css3

Chrome下定位fixed引起的页面元素抖动

分类:前端开发2017-05-04阅读:(1636)标签:css3
问题描述:chrome下,header是用的fixed定位到顶部的,页面有图片列表,hover图片的时候图片会scale放大,这时会发现header会抖动,刷新页面后hover图片又不抖动了,但滚动页面再hover,header又会抖动。解决方法:在fixed定位的元素样式上加transform: translateZ(0);搞定。网上还有其它解决方法,需要再查。

移动端淡入淡出卡顿问题--触发GPU加速

分类:前端开发2016-04-06阅读:(1064)标签:css3, 移动开发
今天跟一技术leader聊到移动端淡入淡出效果卡顿问题,这个以前还真没遇到,可能是开发的手机性能太好了。既然说到有这个问题,那肯定就是有了,解决办法也是有的。技术leader提到了GPU加速。那就顺藤摸瓜,查一查。CSS里的动画效果默认都不会开启GPU加速,然而使用浏览器缓慢的软件渲染引擎来执行。而开启硬件加速则能使网站的动画表现更为流畅。GPU加速这个名字听上去很神奇,但是触发方式却比想象...

css3实现无宽高子元素水平垂直居中

分类:前端开发2016-03-10阅读:(1098)标签:css3
css3中flex伸缩布局给移动端带来了很大的便利(因为移动端浏览器基本上都兼容最新的html5/css3),通常我们会遇到想把一个盒子内的元素居中,不管是垂直还是水平(当然以往垂直居中很折腾人)。如何实现呢?那就使用前面说的flex伸缩布局了。看代码更直观。<style type="text/css"> .box{ width:700px; ...

pointer-events属性介绍

分类:前端开发2015-12-29阅读:(1093)标签:css3
今天看秦时明月的时候点到了qinsmoon官网,看电视剧的时候发现整个界面都在下雪,这应该是一个层浮在最上面的,跟模态层一样,但鼠标能透过这个飘雪花的层,对网页进行正常操作。哎~有点儿意思,之前群里也有人问过,当时忙其它事就没在意,既然遇上了,就赶紧审查下元素,找到这些个雪花,一探究竟。在开发者模式下,找到了这个层,层上的一个样式属性成功引起了我的注意。pointer-events:none...

常见移动端问题

分类:前端开发2015-12-21阅读:(901)标签:css3, html5
百度禁止转码通过百度手机打开网页时,百度可能会对你的网页进行转码,往你页面贴上它的广告,非常之恶心。不过我们可以通过这个meta标签来禁止它:<meta http-equiv="Cache-Control" content="no-siteapp" />移动端手机号码识别(IOS)在 iOS Safari (其他浏览器和Android均不会...

移动WEB开发常见的默认属性设置

分类:前端开发2015-12-19阅读:(1155)标签:css3, html5
移动WEB开发常见的默认属性设置在移动WEB开发中经常会遇到一些坑,按钮变样了,想隐藏滚动条,连接点击有蓝色或黄色区块效果等等。这些都是设备浏览器自带的一些私有的样式属性,修改他们就OK了。移动端浏览器主要内核都是-webkit的,那修改的时候针对性的修改就好了,且不用考虑其他浏览器了,winPhone?我们不待见非主流杀马特。取消点击时候标签的区块高亮效果-webkit-tap-highl...

清除浮动闭合浮动的四种方法

分类:前端开发2015-11-04阅读:(1210)标签:css, css3
写网页的时候避免不了要写一些浮动,自然也要做清除浮动的处理,清除浮动目的就是解决父盒子高度为0的为题。常见方法有如下四种。方法一:额外标签法这种方法是在浮动的元素后面添加额外的带有clear:both样式的标签来清除浮动。.C{width:0;display:block;overflow:hidden;clear:both;} <div class="parent"...

常用CSS简写

分类:前端开发2015-09-29阅读:(865)标签:css, css3
CSS简写就是指将多行的CSS属性简写成一行。CSS简写的最大好处就是能够显著减少CSS文件的大小,优化网站整体性能,更加容易阅读。下面介绍常见的CSS简写规则:font简写的顺序:font-style | font-variant | font-weight | font-size/line-height | font-family,(字体样式,大小写,粗细,字号大小/行高,字体名)。简写...

CSS伪类单冒号和双冒号

分类:前端开发2015-07-22阅读:(1847)标签:css3, html5
以前在写css的时候,可能只注意到了伪类,用冒号,但css3中支持一些伪元素,这些伪元素就需要用到双冒号了。so,冒号是伪类,双冒号是伪元素。举个例子:a:hover{background:#F00;}/*这是伪类*/ p::selection{background:#F00;}/*这是伪元素*/

css3过渡效果

分类:前端开发2015-05-28阅读:(1885)标签:css, css3
css3的过渡效果,从一种样式逐渐过渡到另外一种样式:transition。transition 简写属性,用于在一个属性中设置四个过渡属性。例如:transition:width 2s linear 1s; //用两秒的时间以匀速改变宽度,效果在一秒后开始。transition-property 规定应用过渡的 CSS 属性的名称。例如:transition-property:width;...
前端开发