-
Notifications
You must be signed in to change notification settings - Fork 0
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
css 样式问题 #10
Comments
二、盒模型任何情况下margin都不包含在height和width内
|
三、网页变灰兼容IE chrome Firefox html{
filter:grayscale(100%);
-moz-filter:grayscale(100%);
-o-filter:grayscale(100%);
-webkit-filter:grayscale(1);
} 参考地址
li a:hover img{
-webkit-filter:none;
}
li a .grayscale{
-webkit-filter:grayscale(1);
} |
四、知道这20个正则表达式,能让你少写1,000行代码1 . 校验密码强度 ^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$
^[\u4e00-\u9fa5]{0,}$
^\w+$
[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?
^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$
^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$
^(?:(?!0000)[0-9]{4}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-8])|(?:0[13-9]|1[0-2])-(?:29|30)|(?:0[13578]|1[02])-31)|(?:[0-9]{2}(?:0[48]|[2468][048]|[13579][26])|(?:0[48]|[2468][048]|[13579][26])00)-02-29)$
^[0-9]+(.[0-9]{2})?$
^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$
^.*MSIE [5-8](?:\.[0-9]+)?(?!.*Trident\/[5-9]\.0).*$
\b(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\b
(([0-9a-fA-F]{1,4}:){7,7}[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,7}:|([0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,5}(:[0-9a-fA-F]{1,4}){1,2}|([0-9a-fA-F]{1,4}:){1,4}(:[0-9a-fA-F]{1,4}){1,3}|([0-9a-fA-F]{1,4}:){1,3}(:[0-9a-fA-F]{1,4}){1,4}|([0-9a-fA-F]{1,4}:){1,2}(:[0-9a-fA-F]{1,4}){1,5}|[0-9a-fA-F]{1,4}:((:[0-9a-fA-F]{1,4}){1,6})|:((:[0-9a-fA-F]{1,4}){1,7}|:)|fe80:(:[0-9a-fA-F]{0,4}){0,4}%[0-9a-zA-Z]{1,}|::(ffff(:0{1,4}){0,1}:){0,1}((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])|([0-9a-fA-F]{1,4}:){1,4}:((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]))
if (!s.match(/^[a-zA-Z]+:\/\//))
{
s = 'http://' + s;
}
^(f|ht){1}(tp|tps):\/\/([\w-]+\.)+[\w-]+(\/[\w- ./?%&=]*)?
^([a-zA-Z]\:|\\)\\([^\\]+\\)*[^\/:*?"<>|]+\.txt(l)?$
^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$
\< *[img][^\\>]*[src] *= *[\"\']{0,1}([^\"\'\ >]*)
(<a\s*(?!.*\brel=)[^>]*)(href="https?:\/\/)((?!(?:(?:www\.)?'.implode('|(?:www\.)?', $follow_list).'))[^"]+)"((?!.*\brel=)[^>]*)(?:[^>]*)>
^\s*[a-zA-Z\-]+\s*[:]{1}\s[a-zA-Z0-9\s.#]+[;]{1}
<!--(.*?)-->
<\/?\w+((\s+\w+(\s*=\s*(?:".*?"|'.*?'|[\^'">\s]+))?)+\s*|\s*)\/?> |
JS控制伪元素的方法汇总一. 缘由: 事实上,jQuery并不能获取伪元素。即我们不能通过$(“:before”)、$(dom).find(“:before”)或document.querySelector(“:before”)来获取:before伪元素。 为此,我不得不重新了解伪元素(Pseudo-elements)。为什么不能用JS直接获取伪元素呢? 譬如::before和::after伪元素,用于在CSS渲染中向元素的头部或尾部插入内容,它们不受文档约束,也不影响文档本身,只影响最终样式。这些添加的内容不会出现在DOM中,仅仅是在CSS渲染层中加入。 事实上, 伪元素可以被浏览器渲染,但本身并不是DOM元素。它不存在于文档中,所以JS无法直接操作它。 而jQuery的选择器都是基于DOM元素的,因此也并不能直接操作伪元素。 二. 伪元素有哪些: 伪元素有六个,分别是 ::after、::before、::first-line、::first-letter、::selection、::backdrop 。 在各大网页中最常用的伪元素,是::after和::before。 在CSS3中,建议伪元素使用两个冒号(::)语法,而不是一个冒号 (:),目的是为了区分伪类和伪元素。大多数浏览器都支持这两种表示语法。只有 ::selection 永远只能以两个冒号开头(::)。因为IE8只支持单冒号的语法,所以,如果你想兼容IE8,保险的做法是使用单冒号。 三. 获取伪元素的属性值: 获取伪元素的属性值可以使用 window.getComputedStyle() 方法,获取伪元素的CSS样式声明对象。然后利用getPropertyValue方法或直接使用键值访问都可以获取对应的属性值。 语法:window.getComputedStyle(element[, pseudoElement]) 参数如下: element(Object):伪元素的所在的DOM元素; 举个栗子: // CSS代码 1.getPropertyValue()和直接使用键值访问,都可以访问CSSStyleDeclaration Object。它们两者的区别有: 对于float属性,如果使用键值访问,则不能直接使用getComputedStyle(element, null).float,而应该是cssFloat与styleFloat; 2.伪元素默认是”display: inline”。如果没有定义display属性,即使在CSS中显式设置了width的属性值为固定的大小如”100px”,但是最后获取的width值仍是”auto”。这是因为行内元素不能自定义设置宽高。解决办法是给伪元素修改display属性为”block”、”inline-block”或其他。 四. 更改伪元素的样式: 方法1. 更换class来实现伪元素属性值的更改: 举个栗子: // CSS代码 内容内容内容内容
// jQuery代码
$(".red").removeClass('red').addClass('green');
方法2. 使用CSSStyleSheet的insertRule来为伪元素修改样式:
举个栗子: document.styleSheets[0].addRule('.red::before','color: green'); // 支持IE document.styleSheets[0].insertRule('.red::before { color: green }', 0); // 支持非IE的现代浏览器 var style = document.createElement("style"); $('<style>.red::before{color:green}</style>').appendTo('head'); 方法1. 使用CSSStyleSheet的insertRule来为伪元素修改样式: var latestContent = "修改过的内容"; // CSS代码 内容内容内容内容
// JacaScript代码
$('.red').attr('data-attr', 'green');
六. :before和:after伪元素的常见用法总结:
1) 添加字符串: 使用引号包括一段字符串,将会向元素内容中添加字符串。栗子: a:after { content: "after content"; } 栗子: a:after { content: attr(href); } 栗子: a::before { content: url(logo.png); } 栗子: h:before { counter-increment: chapter; cotent: "Chapter " counter(chapter) ". " } .clear-fix { *overflow: hidden; *zoom: 1; } // CSS代码 举个栗子:(譬如对话气泡) // CSS代码 I'm a tooltip.
:before 和 :after 伪元素结合更多CSS3强大的特性,还可完成非常多有趣的特效和 hack ,这里权当抛砖引玉。
六. 一点小小建议: 伪元素的content属性很强大,可以写入各种字符串和部分多媒体文件。但是伪元素的内容只存在于CSS渲染树中,并不存在于真实的DOM中。所以为了SEO优化,最好不要在伪元素中包含与文档相关的内容。 修改伪元素的样式,建议使用通过更换class来修改样式的方法。因为其他两种通过插入行内CSSStyleSheet的方式是在JavaScript中插入字符代码,不利于样式与控制分离;而且字符串拼接易出错。 修改伪元素的content属性的值,建议使用利用DOM的data-*属性来更改。 |
解决input 有readonly属性 各个浏览器的光标兼容性问题1.设置属性 disabled=“disabled”, <input type="text" id="id" style="width:250px;height:30px;" disabled="disabled"/> 在这种情况下,表单中的元素不可以被编辑,而且谷歌,IE浏览器中input框中的文本可以被选取,但是火狐浏览器中input框中的文本不可以被选取。 2.设置属性 unselectable=“on”, <input type="text" id="id" style="width:250px;height:30px;" readonly="readonly" unselectable="on"/> 这种情况主要是解决IE浏览器中的光标出现问题。火狐浏览器中不支持。 3.οnfοcus=“this.blur()” <body>
<input type="text" id="id" readonly="readonly" unselectable="on" onfocus="this.blur()"/>
<script>
$(document).on('focus', 'input[readonly]', function () {
this.blur();
});
</script>
</body> |
去除火狐浏览器点击连接时出现虚线边框兼容性:ie6/ie7不支持,ie8+/ff /safari/opera支持
a{ outline:none; }
// 或者缩小范围
a:focus{ outline:none; } 关于使用onfocus=”this.blur()”的利与弊不推荐使用 onfocus=”this.blur()” : hidefocus 是 IE 的私有属性(IE 5+)<a href=”#” hidefocus=”true” >hidefocus</a> 可批量处理,但expression的性能问题不能忽视( ie6/7支持,ie8+、非ie不支持)a { noFocusLine: expression(this.onFocus = this.blur())} 同样中断 Tab |
禁止chrome谷歌浏览器表单自动填充,新版chrome的autocomplete设置无效的处理方法 <!-- 防止chrome自动填充 -->
<div style="position:absolute;top:-999999px">
<input type="text" />
<input type="password" />
</div> |
一、子元素浮动 父元素高度为0怎么解决
The text was updated successfully, but these errors were encountered: