JavaScript 动态插入 CSS
摘要：写组件时有时想把一些组件特性相关的 CSS 样式封装在 JS 里，这样更内聚，改起来方便。JS 动态插入 CSS 两个步骤就可以创建一个 style 对象使用 stylesheet 的 insertRule 或 addRule 方法添加样式一、查看样式表先看下 document.styleSheet...
阅读全文
posted @ 2015-10-11 08:13
Snandy
If you cannot hear the sound of the genuine in you, you will all of your life spend your days on the ends of strings that somebody else pulls.
随笔分类 - CSS/LESS
CSS3动画事件
摘要：CSS3 的动画效果强大，在移动端使用广泛，动画执行开始和结束都可以使用JS来监听其事件。animationstartanimationend以下是一个示例 CSS3 动画事件 Test CSS3 SlideIn 通过添加动画事件，可以依次...
阅读全文
posted @ 2015-09-29 17:18
禁止用户选定文本: user-select
摘要：双击文本 select，会被选定，如下但有时点击元素时不想要被选定的状态，有一个尚未成为标准的 CSS 属性： user-select，它有4 个值：text 可以选择文本element 可以选择文本，但选择范围受元素边界的约束。none 不可以选择文本。auto 如果该元素包含可编辑的文本（如输入...
阅读全文
posted @ 2015-07-24 11:21
Less里css表达式的写法
摘要：项目中用的grunt-contrib-less， 写了以下less代码.mapfix{ position: fixed; top:10px; width: 430px; z-index: 100; background: #fff; -position:absolute; -top:ex...
阅读全文
posted @ 2014-06-17 11:48
有趣的居中方式
摘要：古老的center标签已经废弃了，css的text-align取代了它。一、text-align 可以使行内元素居中，也可以使块级元素中的文本居中如下代码 使用text-align使行内元素span居中 使用text-align使行内元素span居中 效果如图可见：第一个text-align使得文本和SPAN都居中，第二个text-align则只能使文本居中，块级元素P则没有居中。关于text-align的演变及浏览器兼容性参考RT8003。二、margin 自动空白边仅能使块级元素居中如下代码 使用margin:auto不能使行内元素居中 使用margin:au...
阅读全文
posted @ 2013-09-21 10:39
块级元素水平，垂直居中的两种方式
摘要：方式一： 利用margin<!DOCTYPE html><html> <head> <title>块级元素水平，垂直居中</title> <meta charset="utf-8"> <style> .wrapper { height: 600px; border: 1px solid gray; } .box { width: 100px; height: 100px; background: gold; ...
阅读全文
posted @ 2012-11-13 17:33
设置元素浮动的几种方式
摘要：我们知道获取元素的浮动属性，各浏览器中使用的属性不同。大家都知道IE中使用styleFloat，标准浏览器使用cssFloat。<div>test</div><script> var div = document.getElementsByTagName('div')[0]; // IE div.currentStyle.styleFloat; // none // FF/Chrome/Safari/Opera var sty = window.getComputedStyle(div, null); sty.cssFloat; // non
阅读全文
posted @ 2011-09-09 17:31
书写css伪类时冒号前或后多个空格导致该规则失效
摘要：相信多数开发者不会多个空格。偶然发现的，网上多数css格式化将压缩后的css格式化后会发生这个情况。搜“css格式化”，以下网站http://www.jb51.net/tools/cssyasuo.shtmlhttp://www.ttmouse.com/geshi.html格式化后会多出个空格，多出空格后样式规则失效了。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>书写css伪类时冒号前或后多个空格导致该规则失效</title> &
阅读全文
posted @ 2011-04-02 10:30
css非标准的ime-mode属性
摘要：ime是Input Method Editor的简称。它是一种专门的应用程序， 用来输入代表东亚地区书面语言文字的不同字符。使用此种输入法，不需特殊的键盘（对应各种语言的键盘）即可输入东亚诸国（如中文、日文、韩文、俄文等）的各种文字。日本IME，是可以输入表音文字 (かな)与変换表意文字 (汉字) 的 一种输入法，而且它具有人工智慧，可以将一般较常使用的表意语句置于输入法的词库中。日本IME输入法 ，则依据该词库所建立之词汇来判断所输入的表音文字以変换为恰当的表意文字。由于日文中发音相同的表意文字相当多的关系，日本IME在使用之初的表意文字的変换判断不甚恰当的情况是会发生的。因此，该输入法提供
阅读全文
posted @ 2011-03-28 10:13
神奇的css属性pointer-events
摘要：绝对定位元素盖住链接或添加某事件handle的元素后，那么该链接的默认行为（页面跳转）或元素事件将不会被触发。现在Firefox3.6+/Safari4+/Chrome支持一个称为pointer-events的css属性。使用该属性可以决定是否能穿透绝对定位元素去触发下面元素的某些行为。如下CSS:pointer-events SinaMail SinaMail 开启穿透点击 默认情况下，链接和span元素被绝对定位的两个div都遮住了。分别点击后无反应，即无法触发链接a的默认行为，无法触发span元素的click事件。但开启穿透点击后支持pointer-events的浏...
阅读全文
posted @ 2011-03-17 11:27
IE css hack汇总
摘要：汇总下IE各版本的css hackhack示例IE6(S)IE6(Q)IE7(S)IE7(Q)IE8(S)IE8(Q)IE9(S)IE9(Q)**colorYYYYNYNY++colorYYYYNYNY--colorYYNNNNNN__colorYYNYNYNY##colorYYYYNYNY\0color:red\0NNNNYNYN\9\0color:red\9\0NNNNNNYN标准模式中：1，减号(-)是IE6专有hack2，反斜杠零(\0)是IE8/9的hack3，\9\0是IE9/10的hack
阅读全文
posted @ 2011-03-08 09:18
