随笔分类 - CSS
摘要：1、margin-top为负值像素 margin-top为负值像素，偏移值相对于自身，其后元素受影响，见如下代码： 效果： 2、margin-left为负值像素 margin-left为负值像素，偏移值相对于自身，其后元素不受影响，见如下代码： 效果： 3、margin-top为负值百分数 marg
阅读全文
摘要：以下汇总三种行内元素转为块级元素的方法： （1）display （2）float （3）position（absolute和fixed） 少说多做，运行以下代码看效果： 通过审查元素查看是否转为块级元素：
阅读全文
摘要：1、先看有间距的布局效果： 2、少说多做，直接看代码（代码中有注释）
阅读全文
摘要：1、table 排版（防止td文字过多导致table变形） 2、持续更新
阅读全文
摘要：防止table变形 td固定宽度 具体设置如下代码：
阅读全文
摘要：margin-right:负值，在没有设置DOM元素宽度的前提下，DOM元素宽度变宽。 效果： 具体原理请看代码注释。 注：padding不允许使用负值。
阅读全文
摘要：根据canisue（http://caniuse.com/#search=box-shadow），box-shadow兼容性如下图所示： 测试代码： IE8浏览器效果： border-radius在IE8浏览器兼容方案： IE8浏览器下效果： PIE.HTC下载地址：http://css3pie.c
阅读全文
摘要：根据canisue（http://caniuse.com/#search=border-radius），border-radius兼容性如下图所示： 测试代码： IE8浏览器效果： border-radius在IE8浏览器兼容方案： IE8浏览器下效果： PIE.HTC下载地址：http://css
阅读全文
摘要：1、代码（未添加GPU加速代码） F12控制台Timeline记录： 2、代码（添加GPU加速代码） F12控制台Timeline记录： 3、代码（添加GPU加速代码） F12控制台Timeline记录： 总结：好像没有什么大的优化，渲染和绘制时间差的不多。需要继续研究。 附：timeline用法
阅读全文
摘要：1、兼容性 根据canius（http://caniuse.com/#search=transition），transition 兼容性如下图所示： 在IE7-9进行测试时，transition的效果没有过渡效果（如线性过渡效果），但是还是有效果（立即执行transition-property，tr
阅读全文
摘要：总结： （1）IE5 IE6 IE7 IE8 IE9 IE10 在属性值后加\9 （2）IE8 IE9 IE10 在属性值后加\0 （3）IE9 IE10 在属性值后加\9\0 （4）IE6 IE7 在属性前加星号 （5）IE6 在属性前加下划线号 以上均可通过上述代码测试。
阅读全文
摘要：根据caniuse（http://caniuse.com/#search=gradient），gradient兼容性为IE10以及以上浏览器。 实例代码： chrome浏览器效果： IE8浏览器效果（无渐变）： gradient兼容性处理： 设置filter属性目的是上一行的透明度不起作用的时候执行
阅读全文
摘要：根据caniuse（http://caniuse.com/#search=rgba），rgba兼容性为IE9以及以上浏览器。 实例代码： chrome浏览器效果： IE8浏览器效果（无背景）： rgba兼容性处理： 设置filter属性目的是上一行的透明度不起作用的时候执行，filter: prog
阅读全文
摘要：2017.7.5更新： 在处理IE8兼容性问题上，对于背景图片比背景框还大的情况，还需要做一下处理： 根据canius（http://caniuse.com/#search=background-size），background-size兼容性为IE9以及以上浏览器，如下图所示。 实例代码： 效果：
阅读全文