css总结 - 随笔分类 - 黑客PK

布局常见

摘要：1、多行文字居中 2、标题中划线阅读全文

posted @ 2017-12-06 11:52 黑客PK 阅读(216) 评论(0) 推荐(0)

摘要：经过实际操作发现，iOS系统上上下相差两个像素（也有可能是我测距离的误差）但是Android上相差比较大，而且不同的机型相差数目不一样产生原因问了下技术大神，说是line-height对一部分Android手机不起作用，有自己默认的行高，默认行高为22px（这点我没有试验，不知道是否准确）解阅读全文

posted @ 2017-03-07 23:03 黑客PK 阅读(5790) 评论(0) 推荐(0)

圆环进度css

摘要：看效果先：http://sandbox.runjs.cn/show/b6bmksvn 参考： jquery圆环百分比进度条制作 CSS clip:rect矩形剪裁功能及一些应用介绍 CSS clip:rect几个值含义示意实例页面 clip:rect下png通道透明下sprite图片定位实例页面 c 阅读全文

posted @ 2017-03-03 17:36 黑客PK 阅读(697) 评论(0) 推荐(0)

高效的逐帧动画

摘要：更高效的方法：更好的自适应效果和方法： css trigger: http://sandbox.runjs.cn/show/bqtikfgi 阅读全文

posted @ 2016-08-08 14:49 黑客PK 阅读(258) 评论(0) 推荐(0)

css3d

摘要：立方体：http://sandbox.runjs.cn/show/1h6zvghj 原理分析：(左负右正) x:与屏幕水平；（在屏幕上） y:与屏幕水平方向垂直（在屏幕上） z:垂直于屏幕（在屏幕外） rotate:顺时针为正，逆时针为负。 translateZ:靠近自己的为正，远离自己的为负。 p 阅读全文

posted @ 2016-07-27 13:21 黑客PK 阅读(339) 评论(0) 推荐(0)

Flex布局

摘要：由于微信和QQ都已经更新了Blink内核，已经全面支持flex布局了，除了个别国产浏览器，基本上可以放心使用flex了，写了一个简单的flex的布局框架，只要设置相应的属性即可。下面是基本的使用介绍注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效阅读全文

posted @ 2016-07-24 04:04 黑客PK 阅读(406) 评论(0) 推荐(0)

彻底弄懂浮动

摘要：参考实例：http://sandbox.runjs.cn/show/xwimxmda 参考资料：https://segmentfault.com/a/1190000005925592 w3 css float nine rules CSS的float才开始学习的时候总是感觉没有任何的规律可言，总是有阅读全文

posted @ 2016-07-12 14:46 黑客PK 阅读(573) 评论(0) 推荐(0)

transition的局限

摘要：transition的优点在于简单易用，但是它有几个很大的局限。（1）transition需要事件触发，所以没法在网页加载时自动发生。（2）transition是一次性的，不能重复发生，除非一再触发。（3）transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。阅读全文

posted @ 2016-06-21 16:19 黑客PK 阅读(394) 评论(0) 推荐(0)

css常用中文字体的英文名称写法

摘要：我们知道网页中使用中文字体最好用其对应的英文名称，这样可以避免出现编码问题导致样式中的中文名称出现乱码，从而不识别。下面是网页中常用的中文字体所对应的英文名称。留着，不用翻资料了 PS:css字体降级写法：(越靠前权重越大) 阅读全文

posted @ 2016-06-19 18:12 黑客PK 阅读(340) 评论(0) 推荐(0)

Cursor的各种效果

摘要：总结之后的Cursor的各种效果： http://sandbox.runjs.cn/show/bbwoyn0c http://css-cursor.techstream.org/ 源代码如下：阅读全文

posted @ 2016-06-13 10:15 黑客PK 阅读(310) 评论(0) 推荐(0)

CSS 布局调试工具

摘要：说是工具其实只是一段 Javascript 代码，但非常实用，它会给页面里所有的 DOM 元素添加一个 1px 的描边（outline），方便我们在调试 CSS 过程中分析、排查问题。先来看看代码，它有两个版本，一个是使用的$$选择器，代码量更少（浏览器控制台支持 $$ 选择器）；另一种就是传统的阅读全文

posted @ 2016-05-28 20:47 黑客PK 阅读(467) 评论(0) 推荐(0)

移动端页面默认样式重置

摘要：1.-webkit-tap-highlight-color 1.-webkit-tap-highlight-color -webkit-tap-highlight-color:rgba(0,0,0,0);//透明度设置为0，去掉点击链接和文本框对象时默认的灰色半透明覆盖层(iOS)或者虚框(Andr 阅读全文

posted @ 2016-05-09 00:29 黑客PK 阅读(218) 评论(0) 推荐(0)

CSS选择器的浏览器支持

摘要：CSS选择器的浏览器支持 http://labs.qianduan.net/css-selector/ 下面是一系列关于最流行的浏览器对CSS选择器和伪选择器的支持情况的测试。该测试包括从过去美好的CSS1到当前时髦的CSS3最基本的东西。如果你想了解关于CSS的选择器的更多内容，W3C官方文档绝对阅读全文

posted @ 2016-05-05 14:41 黑客PK 阅读(350) 评论(0) 推荐(0)

css奇技淫巧之—多列等高

摘要：什么是等高布局? 先来看一个案例：上图中的页面的主体内容是两列结构，左列是用来导航的，右列是用来显示内容的。我们看到它们有一个共同的边框，中间还有一条分隔线，左右两列的高度都是不固定的。这种情况下就需要两列的高度保持一致了，左边高度增加，右边也跟着增加，右边高度增加，左边同样也要增加，否则就会出现阅读全文

posted @ 2016-04-25 13:48 黑客PK 阅读(282) 评论(0) 推荐(0)

before和after兼容性测试

摘要：before兼容测试IE8 这是一段文字阅读全文

posted @ 2016-04-21 11:20 黑客PK 阅读(1253) 评论(0) 推荐(0)

css奇技淫巧—border-radius

摘要：官方介绍：浏览器支持：IE9+, Firefox 4+, Chrome, Safari 5+,和Opera支持border-radius属性。 border-radius 属性是一个最多可指定四个 border -*- radius 属性的复合属性提示：这个属性允许你为元素添加圆角边框！ cs 阅读全文

posted @ 2016-04-20 13:27 黑客PK 阅读(878) 评论(0) 推荐(0)

css奇技淫巧—box-shadow与outline绘制多重边框效果

摘要：css语法：注释：box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。 js语法：浏览器支持：实例：利用box-shadow绘制多重边框：效果：http://sand 阅读全文

posted @ 2016-04-20 09:53 黑客PK 阅读(900) 评论(0) 推荐(0)

rem字体在rem盒子里面不一样，或者不同的行解决

摘要：在chrome浏览器下，只能定义12px以上的字体。低于12px都是按照12px的来计算的。第二种方案(可行性方案，已在项目中实践)： http://f2ehacker.com/yyw/ 注意：移动端字体一般不会低于14px;还有就是页面内部的滚动条需要添加css属性，保证流畅度：阅读全文

posted @ 2016-04-18 16:51 黑客PK 阅读(872) 评论(0) 推荐(0)

盒子模型的百分比是根据什么来的

摘要：之前一直很模糊，他们的水平和垂直方向上的百分比是根据什么来的？是根据宽度还是高度呢？来揭秘一下把。首先是 margin: 可以看出margin-top和margin-bottom都是根据父容器的宽度来决定的。比如我这里的margin:10% 父容器的width:800px;height:60 阅读全文

posted @ 2016-04-14 23:42 黑客PK 阅读(1125) 评论(0) 推荐(0)

css Masks

摘要：css Masks:添加蒙板；测试在微信端可以支持了。谷歌浏览器支持。safari应该也是支持的。效果：http://runjs.cn/code/xrrgmgmk 但是谷歌可以支持这样子的：http://runjs.cn/code/rj6urnpo;但是微信端不支持，只支持上一种情况。语法：阅读全文

posted @ 2016-04-07 14:58 黑客PK 阅读(414) 评论(0) 推荐(0)

黑客

随笔分类 - css总结

公告