Open geqianqian-shihan opened 6 years ago
任何情况下margin都不包含在height和width内
content-box :在宽度和高度之外绘制元素的内边距和边框。 border-box: 为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。 inherit: 规定应从父元素继承 box-sizing 属性的值。
兼容IE chrome Firefox
html{
filter:grayscale(100%);
-moz-filter:grayscale(100%);
-o-filter:grayscale(100%);
-webkit-filter:grayscale(1);
}
参考地址 Filters主要是运用在图片上。 其默认值是none,他不具备继承性,其中filter-function一个具有以下值可选:
li a:hover img{
-webkit-filter:none;
}
li a .grayscale{
-webkit-filter:grayscale(1);
}
1 . 校验密码强度 密码的强度必须是包含大小写字母和数字的组合,不能使用特殊字符,长度在8-10之间。
^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$
^[\u4e00-\u9fa5]{0,}$
^\w+$
[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?
15位:
^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$
18位:
^[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*)\/?>
正则表达式的相关语法
一. 缘由:
事实上,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元素; pseudoElement(String):伪元素类型。可选值有:”:after”、”:before”、”:first-line”、”:first-letter”、”:selection”、”:backdrop”;
举个栗子:
// CSS代码
content: "hello world!"; display: block; width: 100px; height: 100px; background: red; } // HTML代码
// JS代码 var myIdElement = document.getElementById("myId"); var beforeStyle = window.getComputedStyle(myIdElement, ":before"); console.log(beforeStyle); // [CSSStyleDeclaration Object] console.log(beforeStyle.width); // 100px console.log(beforeStyle.getPropertyValue("width")); // 100px console.log(beforeStyle.content); // "hello world!" 备注:
1.getPropertyValue()和直接使用键值访问,都可以访问CSSStyleDeclaration Object。它们两者的区别有:
对于float属性,如果使用键值访问,则不能直接使用getComputedStyle(element, null).float,而应该是cssFloat与styleFloat; 直接使用键值访问,则属性的键需要使用驼峰写法,如:style.backgroundColor; 使用getPropertyValue()方法不必可以驼峰书写形式(不支持驼峰写法),例如:style.getPropertyValue(“border-top-color”); getPropertyValue()方法在IE9+和其他现代浏览器中都支持;在IE6~8中,可以使用getAttribute()方法来代替;
2.伪元素默认是”display: inline”。如果没有定义display属性,即使在CSS中显式设置了width的属性值为固定的大小如”100px”,但是最后获取的width值仍是”auto”。这是因为行内元素不能自定义设置宽高。解决办法是给伪元素修改display属性为”block”、”inline-block”或其他。
四. 更改伪元素的样式:
方法1. 更换class来实现伪元素属性值的更改:
举个栗子:
// CSS代码 .red::before { content: "red"; color: red; } .green::before { content: "green"; color: green; } // HTML代码
// 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的现代浏览器 方法3. 在
标签中插入 ').appendTo('head'); 五. 修改伪元素的content的属性值:方法1. 使用CSSStyleSheet的insertRule来为伪元素修改样式:
var latestContent = "修改过的内容"; var formerContent = window.getComputedStyle($('.red'), '::before').getPropertyValue('content'); document.styleSheets[0].addRule('.red::before','content: "' + latestContent + '"'); document.styleSheets[0].insertRule('.red::before { content: "' + latestContent + '" }', 0); 方法2. 使用DOM元素的data-*属性来更改content的值:
// CSS代码 .red::before { content: attr(data-attr); color: red; } // HTML代码
// JacaScript代码 $('.red').attr('data-attr', 'green'); 六. :before和:after伪元素的常见用法总结:
1) 添加字符串:
使用引号包括一段字符串,将会向元素内容中添加字符串。栗子:
a:after { content: "after content"; } 2) 使用attr()方法,调用当前元素的属性的值:
栗子:
a:after { content: attr(href); } a:after { content: attr(data-attr); } 3)使用url()方法,引用多媒体文件:
栗子:
a::before { content: url(logo.png); } 4) 使用counter()方法,调用计时器:
栗子:
h:before { counter-increment: chapter; cotent: "Chapter " counter(chapter) ". " }
.clear-fix { overflow: hidden; zoom: 1; } .clear-fix:after { display: table; content: ""; width: 0; clear: both; }
// CSS代码 a { position: relative; display: inline-block; text-decoration: none; color: #000; font-size: 32px; padding: 5px 10px; } a::before, a::after { content: ""; transition: all 0.2s; } a::before { left: 0; } a::after { right: 0; } a:hover::before, a:hover::after { position: absolute; } a:hover::before { content: "\5B"; left: -20px; } a:hover::after { content: "\5D"; right: -20px; } // HTML代码 我是个超链接
举个栗子:(譬如对话气泡)
// CSS代码 .tooltip { position: relative; display: inline-block; padding: 5px 10px; background: #80D4C8; } .tooltip:before { content: ""; display: block; position: absolute; left: 50%; margin-left: -5px; bottom: -5px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #80D4C8; } // HTML代码
:before 和 :after 伪元素结合更多CSS3强大的特性,还可完成非常多有趣的特效和 hack ,这里权当抛砖引玉。
六. 一点小小建议:
伪元素的content属性很强大,可以写入各种字符串和部分多媒体文件。但是伪元素的内容只存在于CSS渲染树中,并不存在于真实的DOM中。所以为了SEO优化,最好不要在伪元素中包含与文档相关的内容。
修改伪元素的样式,建议使用通过更换class来修改样式的方法。因为其他两种通过插入行内CSSStyleSheet的方式是在JavaScript中插入字符代码,不利于样式与控制分离;而且字符串拼接易出错。
修改伪元素的content属性的值,建议使用利用DOM的data-*属性来更改。
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()” : 盲人用户 无法使用 Tab 聚集页面的下一个控制器(链接、表单域、object、image map等)
<a href=”#” hidefocus=”true” >hidefocus</a>
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怎么解决