前端零碎知识集锦

1,text-align:center ie7-8不兼容

2,box-sizing ie8以上才支持

3,背景图兼容性解决办法:各个属性分开写

4,border-radius只有ie9才支持

5,移动端1px 边框伪类计算:1/0.33(0.33是缩放率);不管是四条边还是一条边,高度都必须设置为1px,不能为0px,否则线条模糊。

6,图标圆角标准大小:图片宽度*0.61*.0.61*0.61

7,调整textarea尺寸大小:

resize:{

none(不允许)

both(允许调整水平,垂直)

vertical(只允许调整垂直)

horizontal(只允许调整水平)

}

8,radio单选按钮在ios手机上是灰色的,而在android手机上是蓝色的

9,input框输入的文字在ios手机上靠上,垂直不居中;在android手机上垂直居中

10,调整图片宽高比例可以使用max-width和max-width

11,textarea 取值用text()在ie浏览器正常,firefox 和chrome浏览器有问题,所以取值最好用val()

12,在网站加入QQ登录接口,省去注册的麻烦:

<meta property='qc:admins' content='1257...'>

13,svg适合制作折线动画,但android5.0以上不支持

14,给div设置bottom:0可以在给div添加动画改变高度时,让高度自下而上变化;反之,top:0可以让高度自上而下变化(具体案例可参考安全宣导)

15,<hr/>标签设置style:'1psx solid red'可以把实线变成虚线。

16,css3 blur(模糊) 解决 ie6-9兼容问题:

filter:progid:DXImageTransform.Microsoft.Blur(Pixel Radius=5(模糊像素),MakeShadow=false).

17,两个Div都有固定宽高,一个位于正常的文档流(即除了宽高不加任何样式),另外一个加上position:absolute,最终效果是两个纵向排列在屏幕左侧正中间;如果给另外一个div加上绝对定位(反过来),结果是被加上定位的div还在原来的位置,另一个则消失。

18,

猜你喜欢

转载自www.cnblogs.com/5-clay/p/9016023.html