css 样式问题 #10

geqianqian-shihan · 2018-05-26T13:17:56Z

一、子元素浮动父元素高度为0怎么解决

1、给父元素加一个overflow:hidden；
2、将父元素也一起浮动（这个比较复杂，会影响到父元素的同级元素）；
3、在父元素的最后一个子元素后边再增加多一个非浮动的子元素，然后将这个子元素加个clear（例：<div style="clear:both">）
4、使用after伪类 #box:after{ content:"."; height:0; visibility:hidden; display:block; clear:both; }

geqianqian-shihan · 2018-05-27T15:15:58Z

二、盒模型

任何情况下margin都不包含在height和width内

标准盒模型：宽高包含了内容框的宽高加上padding与边框
css3里有一个属性box-sizing：

content-box :在宽度和高度之外绘制元素的内边距和边框。
border-box: 为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
inherit: 规定应从父元素继承 box-sizing 属性的值。

geqianqian-shihan · 2018-05-28T16:36:11Z

三、网页变灰

兼容IE chrome Firefox

html{
  filter:grayscale(100%);
  -moz-filter:grayscale(100%);
  -o-filter:grayscale(100%);
  -webkit-filter:grayscale(1);
}

参考地址
Filters主要是运用在图片上。
其默认值是none，他不具备继承性，其中filter-function一个具有以下值可选：

grayscale灰度
sepia褐色（求专业指点翻译）
saturate饱和度
hue-rotate色相旋转
invert反色
opacity透明度
brightness亮度
contrast对比度
blur模糊
drop-shadow阴影

li a:hover img{
     -webkit-filter:none;
}
li a .grayscale{
    -webkit-filter:grayscale(1);
}

geqianqian-shihan · 2018-05-28T16:58:27Z

四、知道这20个正则表达式，能让你少写1,000行代码

原作者：简书签约作者，技匠

1 . 校验密码强度
密码的强度必须是包含大小写字母和数字的组合，不能使用特殊字符，长度在8-10之间。

^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$

校验中文：字符串仅能是中文。

^[\u4e00-\u9fa5]{0,}$

由数字、26个英文字母或下划线组成的字符串

^\w+$

校验E-Mail 地址：同密码一样，下面是E-mail地址合规性的正则检查语句。

[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?

校验身份证号码，下面是身份证号码的正则校验。15 或 18位。

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)$

校验日期：“yyyy-mm-dd“ 格式的日期校验，已考虑平闰年。

^(?:(?!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)$

校验金额：金额校验，精确到2位小数。

^[0-9]+(.[0-9]{2})?$

校验手机号：下面是国内 13、15、18开头的手机号正则表达式。（可根据目前国内收集号扩展前两位开头号码）

^(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}$

判断IE的版本：IE目前还没被完全取代，很多页面还是需要做版本兼容，下面是IE版本检查的表达式。

^.*MSIE [5-8](?:\.[0-9]+)?(?!.*Trident\/[5-9]\.0).*$

校验IP-v4地址

\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

校验IP-v6地址

(([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]))

检查URL的前缀：应用开发中很多时候需要区分请求是HTTPS还是HTTP，通过下面的表达式可以取出一个url的前缀然后再逻辑判断。

if (!s.match(/^[a-zA-Z]+:\/\//))
{
    s = 'http://' + s;
}

提取URL链接：下面的这个表达式可以筛选出一段文本中的URL。

^(f|ht){1}(tp|tps):\/\/([\w-]+\.)+[\w-]+(\/[\w- ./?%&=]*)?

文件路径及扩展名校验：验证windows下文件路径和扩展名（下面的例子中为.txt文件）

^([a-zA-Z]\:|\\)\\([^\\]+\\)*[^\/:*?"<>|]+\.txt(l)?$

提取Color Hex Codes：有时需要抽取网页中的颜色代码，可以使用下面的表达式。

^#([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=)[^>]*)(?:[^>]*)>

查找CSS属性：通过下面的表达式，可以搜索到相匹配的CSS属性。

^\s*[a-zA-Z\-]+\s*[:]{1}\s[a-zA-Z0-9\s.#]+[;]{1}

抽取注释：如果你需要移除HMTL中的注释，可以使用如下的表达式。

<!--(.*?)-->

匹配HTML标签：通过下面的表达式可以匹配出HTML中的标签属性。

<\/?\w+((\s+\w+(\s*=\s*(?:".*?"|'.*?'|[\^'">\s]+))?)+\s*|\s*)\/?>

正则表达式的相关语法

正则表达式快速学习指南

正则表达式在线测试工具

geqianqian-shihan · 2019-08-23T10:07:20Z

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元素；
pseudoElement（String）：伪元素类型。可选值有：”:after”、”:before”、”:first-line”、”:first-letter”、”:selection”、”:backdrop”；

举个栗子：

// CSS代码
#myId:before {
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. 在标签中插入 <style> 的内部样式：

var style = document.createElement("style");
document.head.appendChild(style);
sheet = style.sheet;
sheet.addRule('.red::before','color: green'); // 兼容IE浏览器
sheet.insertRule('.red::before { color: green }', 0); // 支持非IE的现代浏览器
或者用jQuery：

$('<style>.red::before{color:green}</style>').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伪元素的常见用法总结：

利用content属性，为元素添加内容修饰：

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) ". " }
2. 清除浮动：

.clear-fix { *overflow: hidden; *zoom: 1; }
.clear-fix:after { display: table; content: ""; width: 0; clear: both; }
3. 特效妙用：

// 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代码
我是个超链接
4. 特殊形状的实现：

举个栗子：（譬如对话气泡）

// 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代码

I'm a tooltip.

:before 和 :after 伪元素结合更多CSS3强大的特性，还可完成非常多有趣的特效和 hack ，这里权当抛砖引玉。

六. 一点小小建议：

伪元素的content属性很强大，可以写入各种字符串和部分多媒体文件。但是伪元素的内容只存在于CSS渲染树中，并不存在于真实的DOM中。所以为了SEO优化，最好不要在伪元素中包含与文档相关的内容。

修改伪元素的样式，建议使用通过更换class来修改样式的方法。因为其他两种通过插入行内CSSStyleSheet的方式是在JavaScript中插入字符代码，不利于样式与控制分离；而且字符串拼接易出错。

修改伪元素的content属性的值，建议使用利用DOM的data-*属性来更改。

geqianqian-shihan · 2021-06-23T05:17:01Z

解决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>

geqianqian-shihan · 2021-06-23T05:20:03Z

去除火狐浏览器点击连接时出现虚线边框

兼容性：ie6/ie7不支持,ie8+/ff /safari/opera支持
a{ outline:none; }    
// 或者缩小范围
a:focus{ outline:none; }

关于使用onfocus=”this.blur()”的利与弊

不推荐使用 onfocus=”this.blur()” ：
盲人用户无法使用 Tab 聚集页面的下一个控制器（链接、表单域、object、image map等）

hidefocus 是 IE 的私有属性(IE 5+)

<a href=”#” hidefocus=”true” >hidefocus</a>

可批量处理，但expression的性能问题不能忽视( ie6/7支持，ie8+、非ie不支持)

a { noFocusLine: expression(this.onFocus = this.blur())}     同样中断 Tab

geqianqian-shihan · 2021-09-23T03:08:48Z

禁止chrome谷歌浏览器表单自动填充，新版chrome的autocomplete设置无效的处理方法

        <!-- 防止chrome自动填充 -->
        <div style="position:absolute;top:-999999px">
            <input type="text" />
            <input type="password" />
        </div>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

css 样式问题 #10

css 样式问题 #10

geqianqian-shihan commented May 26, 2018 •

edited

Loading

geqianqian-shihan commented May 27, 2018

geqianqian-shihan commented May 28, 2018 •

edited

Loading

geqianqian-shihan commented May 28, 2018

geqianqian-shihan commented Aug 23, 2019

geqianqian-shihan commented Jun 23, 2021

geqianqian-shihan commented Jun 23, 2021 •

edited

Loading

geqianqian-shihan commented Sep 23, 2021

css 样式问题 #10

css 样式问题 #10

Comments

geqianqian-shihan commented May 26, 2018 • edited Loading

一、子元素浮动 父元素高度为0怎么解决

geqianqian-shihan commented May 27, 2018

二、盒模型

geqianqian-shihan commented May 28, 2018 • edited Loading

三、网页变灰

geqianqian-shihan commented May 28, 2018

四、知道这20个正则表达式，能让你少写1,000行代码

geqianqian-shihan commented Aug 23, 2019

JS控制伪元素的方法汇总

geqianqian-shihan commented Jun 23, 2021

解决input 有readonly属性 各个浏览器的光标兼容性问题

geqianqian-shihan commented Jun 23, 2021 • edited Loading

去除火狐浏览器点击连接时出现虚线边框

关于使用onfocus=”this.blur()”的利与弊

hidefocus 是 IE 的私有属性(IE 5+)

可批量处理，但expression的性能问题不能忽视( ie6/7支持，ie8+、非ie不支持)

geqianqian-shihan commented Sep 23, 2021

geqianqian-shihan commented May 26, 2018 •

edited

Loading

一、子元素浮动父元素高度为0怎么解决

geqianqian-shihan commented May 28, 2018 •

edited

Loading

解决input 有readonly属性各个浏览器的光标兼容性问题

geqianqian-shihan commented Jun 23, 2021 •

edited

Loading