整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
篇文章围绕了 CSS 的核心知识点和项目中常见的需求来展开。虽然行文偏长，但较基础，适合初级中级前端阅读，阅读的时候请适当跳过已经掌握的部分。
这篇文章断断续续写了比较久，也参考了许多优秀的文章，但或许文章里还是存在不好或不对的地方，请多多指教，可以评论里直接提出来哈。
小tip：后续内容更精彩哦。
CSS 的核心功能是将 CSS 属性设定为特定的值。一个属性与值的键值对被称为声明（declaration）。
css复制代码color: red;
而如果将一个或者多个声明用 {} 包裹起来后，那就组成了一个声明块（declaration block）。
css复制代码{
color: red;
text-align: center;
}
声明块如果需要作用到对应的 HTML 元素，那还需要加上选择器。选择器和声明块组成了CSS 规则集（CSS ruleset），常简称为 CSS 规则。
css复制代码span {
color: red;
text-align: center;
}
规则集中最后一条声明可以省略分号，但是并不建议这么做，因为容易出错。
CSS 中的注释：
css复制代码/* 单行注释 */
/*
多行
注释
*/
在 CSS 文件中，除了注释、CSS 规则集以及 @规则 外，定义的一些别的东西都将被浏览器忽略。
CSS 规则是样式表的主体，通常样式表会包括大量的规则列表。但有时候也需要在样式表中包括其他的一些信息，比如字符集，导入其它的外部样式表，字体等，这些需要专门的语句表示。
而 @规则 就是这样的语句。CSS 里包含了以下 @规则：
除了以上这几个之外，下面还将对几个比较生涩的 @规则 进行介绍。
@charset 用于定义样式表使用的字符集。它必须是样式表中的第一个元素。如果有多个 @charset 被声明，只有第一个会被使用，而且不能在HTML元素或HTML页面的 <style> 元素内使用。
注意：值必须是双引号包裹，且和
css复制代码@charset "UTF-8";
平时写样式文件都没写 @charset 规则，那这个 CSS 文件到底是用的什么字符编码的呢？
某个样式表文件到底用的是什么字符编码，浏览器有一套识别顺序（优先级由高到低）：
@import 用于告诉 CSS 引擎引入一个外部样式表。
link 和 @import 都能导入一个样式文件，它们有什么区别嘛？
@supports 用于查询特定的 CSS 是否生效，可以结合 not、and 和 or 操作符进行后续的操作。
css复制代码/* 如果支持自定义属性，则把 body 颜色设置为变量 varName 指定的颜色 */
@supports (--foo: green) {
body {
color: var(--varName);
}
}
层叠样式表，这里的层叠怎么理解呢？其实它是 CSS 中的核心特性之一，用于合并来自多个源的属性值的算法。比如说针对某个 HTML 标签，有许多的 CSS 声明都能作用到的时候，那最后谁应该起作用呢？层叠性说的大概就是这个。
针对不同源的样式，将按照如下的顺序进行层叠，越往下优先级越高：
理解层叠性的时候需要结合 CSS 选择器的优先级以及继承性来理解。比如针对同一个选择器，定义在后面的声明会覆盖前面的；作者定义的样式会比默认继承的样式优先级更高。
CSS 选择器无疑是其核心之一，对于基础选择器以及一些常用伪类必须掌握。下面列出了常用的选择器。 想要获取更多选择器的用法可以看 MDN CSS Selectors。
属性选择器
条件伪类
行为伪类
状态伪类
结构伪类
优先级就是分配给指定的 CSS 声明的一个权重，它由匹配的选择器中的每一种选择器类型的数值决定。为了记忆，可以把权重分成如下几个等级，数值越大的权重越高：
可以看到内联样式（通过元素中 style 属性定义的样式）的优先级大于任何选择器；而给属性值加上 !important 又可以把优先级提至最高，就是因为它的优先级最高，所以需要谨慎使用它，以下有些使用注意事项：
在 CSS 中有一个很重要的特性就是子元素会继承父元素对应属性计算后的值。比如页面根元素 html 的文本颜色默认是黑色的，页面中的所有其他元素都将继承这个颜色，当申明了如下样式后，H1 文本将变成橙色。
css复制代码body {
color: orange;
}
h1 {
color: inherit;
}
设想一下，如果 CSS 中不存在继承性，那么我们就需要为不同文本的标签都设置一下 color，这样一来的后果就是 CSS 的文件大小就会无限增大。
CSS 属性很多，但并不是所有的属性默认都是能继承父元素对应属性的，那哪些属性存在默认继承的行为呢？一定是那些不会影响到页面布局的属性，可以分为如下几类：
对于其他默认不继承的属性也可以通过以下几个属性值来控制继承行为：
在 CSS 的世界中，会把内容按照从左到右、从上到下的顺序进行排列显示。正常情况下会把页面分割成一行一行的显示，而每行又可能由多列组成，所以从视觉上看起来就是从上到下从左到右，而这就是 CSS 中的流式布局，又叫文档流。文档流就像水一样，能够自适应所在的容器，一般它有如下几个特性：
如何脱离文档流呢？
脱流文档流指节点脱流正常文档流后，在正常文档流中的其他节点将忽略该节点并填补其原先空间。文档一旦脱流，计算其父节点高度时不会将其高度纳入，脱流节点不占据空间。有两种方式可以让元素脱离文档流：浮动和定位。
在 CSS 中任何元素都可以看成是一个盒子，而一个盒子是由 4 部分组成的：内容（content）、内边距（padding）、边框（border）和外边距（margin）。
盒模型有 2 种：标准盒模型和 IE 盒模型，本别是由 W3C 和 IExplore 制定的标准。
如果给某个元素设置如下样式：
css复制代码.box {
width: 200px;
height: 200px;
padding: 10px;
border: 1px solid #eee;
margin: 10px;
}
标准盒模型认为：盒子的实际尺寸=内容（设置的宽/高） + 内边距 + 边框
所以 .box 元素内容的宽度就为 200px，而实际的宽度则是 width + padding-left + padding-right + border-left-width + border-right-width=200 + 10 + 10 + 1 + 1=222。
IE 盒模型认为：盒子的实际尺寸=设置的宽/高=内容 + 内边距 + 边框
.box 元素所占用的实际宽度为 200px，而内容的真实宽度则是 width - padding-left - padding-right - border-left-width - border-right-width=200 - 10 - 10 - 1 - 1=178。
现在高版本的浏览器基本上默认都是使用标准盒模型，而像 IE6 这种老古董才是默认使用 IE 盒模型的。
在 CSS3 中新增了一个属性 box-sizing，允许开发者来指定盒子使用什么标准，它有 2 个值：
视觉格式化模型（Visual formatting model）是用来处理和在视觉媒体上显示文档时使用的计算规则。CSS 中一切皆盒子，而视觉格式化模型简单来理解就是规定这些盒子应该怎么样放置到页面中去，这个模型在计算的时候会依赖到很多的因素，比如：盒子尺寸、盒子类型、定位方案（是浮动还是定位）、兄弟元素或者子元素以及一些别的因素。
从上图中可以看到视觉格式化模型涉及到的内容很多，有兴趣深入研究的可以结合上图看这个 W3C 的文档 Visual formatting model。所以这里就简单介绍下盒子类型。
盒子类型由 display 决定，同时给一个元素设置 display 后，将会决定这个盒子的 2 个显示类型（display type）：
对外显示方面，盒子类型可以分成 2 类：block-level box（块级盒子） 和 inline-level box（行内级盒子）。
依据上图可以列出都有哪些块级和行内级盒子：
所有块级盒子都会参与 BFC，呈现垂直排列；而所有行内级盒子都参会 IFC，呈现水平排列。
除此之外，block、inline 和 inline-block 还有什么更具体的区别呢？
block
inline
inline-block
对内方面，其实就是把元素当成了容器，里面包裹着文本或者其他子元素。container box 的类型依据 display 的值不同，分为 4 种：
值得一提的是如果把 img 这种替换元素（replaced element）申明为 block 是不会产生 container box 的，因为替换元素比如 img 设计的初衷就仅仅是通过 src 把内容替换成图片，完全没考虑过会把它当成容器。
参考：
格式化上下文（Formatting Context）是 CSS2.1 规范中的一个概念，大概说的是页面中的一块渲染区域，规定了渲染区域内部的子元素是如何排版以及相互作用的。
不同类型的盒子有不同格式化上下文，大概有这 4 类：
其中 BFC 和 IFC 在 CSS 中扮演着非常重要的角色，因为它们直接影响了网页布局，所以需要深入理解其原理。
块格式化上下文，它是一个独立的渲染区域，只有块级盒子参与，它规定了内部的块级盒子如何布局，并且与这个区域外部毫不相干。
BFC 渲染规则
如何创建 BFC？
BFC 应用场景
1、 自适应两栏布局
应用原理：BFC 的区域不会和浮动区域重叠，所以就可以把侧边栏固定宽度且左浮动，而对右侧内容触发 BFC，使得它的宽度自适应该行剩余宽度。
html复制代码<div class="layout">
<div class="aside">aside</div>
<div class="main">main</div>
</div>
css复制代码.aside {
float: left;
width: 100px;
}
.main {
<!-- 触发 BFC -->
overflow: auto;
}
2、清除内部浮动
浮动造成的问题就是父元素高度坍塌，所以清除浮动需要解决的问题就是让父元素的高度恢复正常。而用 BFC 清除浮动的原理就是：计算 BFC 的高度时，浮动元素也参与计算。只要触发父元素的 BFC 即可。
css复制代码.parent {
overflow: hidden;
}
3、 防止垂直 margin 合并
BFC 渲染原理之一：同一个 BFC 下的垂直 margin 会发生合并。所以如果让 2 个元素不在同一个 BFC 中即可阻止垂直 margin 合并。那如何让 2 个相邻的兄弟元素不在同一个 BFC 中呢？可以给其中一个元素外面包裹一层，然后触发其包裹层的 BFC，这样一来 2 个元素就不会在同一个 BFC 中了。
html复制代码<div class="layout">
<div class="a">a</div>
<div class="contain-b">
<div class="b">b</div>
</div>
</div>
css复制代码.demo3 .a,
.demo3 .b {
border: 1px solid #999;
margin: 10px;
}
.contain-b {
overflow: hidden;
}
针对以上 3 个 示例 ，可以结合这个 BFC 应用示例 配合观看更佳。
参考：CSS 原理 - Formatting Context
IFC 的形成条件非常简单，块级元素中仅包含内联级别元素，需要注意的是当IFC中有块级元素插入时，会产生两个匿名块将父元素分割开来，产生两个 IFC。
IFC 渲染规则
针对如上的 IFC 渲染规则，你是不是可以分析下下面这段代码的 IFC 环境是怎么样的呢？
html复制代码<p>It can get <strong>very complicated</storng> once you start looking into it.</p>
对应上面这样一串 HTML 分析如下：
参考：Inline formatting contexts
IFC 应用场景
偷个懒，demo 和图我就不做了。
在电脑显示屏幕上的显示的页面其实是一个三维的空间，水平方向是 X 轴，竖直方向是 Y 轴，而屏幕到眼睛的方向可以看成是 Z 轴。众 HTML 元素依据自己定义的属性的优先级在 Z 轴上按照一定的顺序排开，而这其实就是层叠上下文所要描述的东西。
我们对层叠上下文的第一印象可能要来源于 z-index，认为它的值越大，距离屏幕观察者就越近，那么层叠等级就越高，事实确实是这样的，但层叠上下文的内容远非仅仅如此：
在看层叠等级和层叠顺序之前，我们先来看下如何产生一个层叠上下文，特定的 HTML 元素或者 CSS 属性产生层叠上下文，MDN 中给出了这么一个列表，符合以下任一条件的元素都会产生层叠上下文：
层叠等级
层叠等级指节点在三维空间 Z 轴上的上下顺序。它分两种情况：
普通节点的层叠等级优先由其所在的层叠上下文决定，层叠等级的比较只有在当前层叠上下文中才有意义，脱离当前层叠上下文的比较就变得无意义了。
层叠顺序
在同一个层叠上下文中如果有多个元素，那么他们之间的层叠顺序是怎么样的呢？
以下这个列表越往下层叠优先级越高，视觉上的效果就是越容易被用户看到（不会被其他元素覆盖）：
如何比较两个元素的层叠等级？
参考：彻底搞懂CSS层叠上下文、层叠等级、层叠顺序、z-index
CSS 的声明是由属性和值组成的，而值的类型有许多种：
而还有些值是需要带单位的，比如 width: 100px，这里的 px 就是表示长度的单位，长度单位除了 px 外，比较常用的还有 em、rem、vw/vh 等。那他们有什么区别呢？又应该在什么时候使用它们呢？
屏幕分辨率是指在屏幕的横纵方向上的像素点数量，比如分辨率 1920×1080 意味着水平方向含有 1920 个像素数，垂直方向含有 1080 个像素数。
而 px 表示的是 CSS 中的像素，在 CSS 中它是绝对的长度单位，也是最基础的单位，其他长度单位会自动被浏览器换算成 px。但是对于设备而言，它其实又是相对的长度单位，比如宽高都为 2px，在正常的屏幕下，其实就是 4 个像素点，而在设备像素比(devicePixelRatio) 为 2 的 Retina 屏幕下，它就有 16 个像素点。所以屏幕尺寸一致的情况下，屏幕分辨率越高，显示效果就越细腻。
讲到这里，还有一些相关的概念需要理清下：
设备像素（Device pixels）
设备屏幕的物理像素，表示的是屏幕的横纵有多少像素点；和屏幕分辨率是差不多的意思。
设备像素比（DPR）
设备像素比表示 1 个 CSS 像素等于几个物理像素。
计算公式：DPR=物理像素数 / 逻辑像素数；
在浏览器中可以通过 window.devicePixelRatio 来获取当前屏幕的 DPR。
像素密度（DPI/PPI）
像素密度也叫显示密度或者屏幕密度，缩写为 DPI(Dots Per Inch) 或者 PPI(Pixel Per Inch)。从技术角度说，PPI 只存在于计算机显示领域，而 DPI 只出现于打印或印刷领域。
计算公式：像素密度=屏幕对角线的像素尺寸 / 物理尺寸
比如，对于分辨率为 750 * 1334 的 iPhone 6 来说，它的像素密度为：
js复制代码Math.sqrt(750 * 750 + 1334 * 1334) / 4.7=326ppi
设备独立像素（DIP）
DIP 是特别针对 Android设备而衍生出来的，原因是安卓屏幕的尺寸繁多，因此为了显示能尽量和设备无关，而提出的这个概念。它是基于屏幕密度而计算的，认为当屏幕密度是 160 的时候，px=DIP。
计算公式：dip=px * 160 / dpi
em 是 CSS 中的相对长度单位中的一个。居然是相对的，那它到底是相对的谁呢？它有 2 层意思：
我们都知道每个浏览器都会给 HTML 根元素 html 设置一个默认的 font-size，而这个值通常是 16px。这也就是为什么 1em=16px 的原因所在了。
em 在计算的时候是会层层计算的，比如：
html复制代码<div>
<p></p>
</div>
css复制代码div { font-size: 2em; }
p { font-size: 2em; }
对于如上一个结构的 HTML，由于根元素 html 的字体大小是 16px，所以 p 标签最终计算出来后的字体大小会是 16 * 2 * 2=64px
rem(root em) 和 em 一样，也是一个相对长度单位，不过 rem 相对的是 HTML 的根元素 html。
rem 由于是基于 html 的 font-size 来计算，所以通常用于自适应网站或者 H5 中。
比如在做 H5 的时候，前端通常会让 UI 给 750px 宽的设计图，而在开发的时候可以基于 iPhone X 的尺寸 375px * 812px 来写页面，这样一来的话，就可以用下面的 JS 依据当前页面的视口宽度自动计算出根元素 html 的基准 font-size 是多少。
js复制代码(function (doc, win) {
var docEl=doc.documentElement,
resizeEvt='orientationchange' in window ? 'orientationchange' : 'resize',
psdWidth=750, // 设计图宽度
recalc=function () {
var clientWidth=docEl.clientWidth;
if ( !clientWidth ) return;
if ( clientWidth >=640 ) {
docEl.style.fontSize=200 * ( 640 / psdWidth ) + 'px';
} else {
docEl.style.fontSize=200 * ( clientWidth / psdWidth ) + 'px';
}
};
if ( !doc.addEventListener ) return;
// 绑定事件的时候最好配合防抖函数
win.addEventListener( resizeEvt, debounce(recalc, 1000), false );
doc.addEventListener( 'DOMContentLoaded', recalc, false );
function debounce(func, wait) {
var timeout;
return function () {
var context=this;
var args=arguments;
clearTimeout(timeout)
timeout=setTimeout(function(){
func.apply(context, args)
}, wait);
}
}
})(document, window);
比如当视口是 375px 的时候，经过计算 html 的 font-size 会是 100px，这样有什么好处呢？好处就是方便写样式，比如从设计图量出来的 header 高度是 50px 的，那我们写样式的时候就可以直接写：
css复制代码header {
height: 0.5rem;
}
每个从设计图量出来的尺寸只要除于 100 即可得到当前元素的 rem 值，都不用经过计算，非常方便。偷偷告诉你，如果你把上面那串计算 html 标签 font-size 的 JS 代码中的 200 替换成 2，那在计算 rem 的时候就不需要除于 100 了，从设计图量出多大 px，就直接写多少个 rem。
vw 和 vh 分别是相对于屏幕视口宽度和高度而言的长度单位：
在 JS 中 100vw=window.innerWidth，100vh=window.innerHeight。
vw/vh 的出现使得多了一种写自适应布局的方案，开发者不再局限于 rem 了。
相对视口的单位，除了 vw/vh 外，还有 vmin 和 vmax：
CSS 中用于表示颜色的值种类繁多，足够构成一个体系，所以这里就专门拿出一个小节来讲解它。
根据 CSS 颜色草案 中提到的颜色值类型，大概可以把它们分为这几类：
颜色关键字（color keywords）是不区分大小写的标识符，它表示一个具体的颜色，比如 white（白），黑（black）等；
可接受的关键字列表在CSS的演变过程中发生了改变：
如下这张图是 16 个基础色，又叫 VGA 颜色。截止到目前为止 CSS 颜色关键字总共有 146 个，这里可以查看 完整的色彩关键字列表。
需要注意的是如果声明的时候的颜色关键字是错误的，浏览器会忽略它。
transparent 关键字表示一个完全透明的颜色，即该颜色看上去将是背景色。从技术上说，它是带有 alpha 通道为最小值的黑色，是 rgba(0,0,0,0) 的简写。
透明关键字有什么应用场景呢？
实现三角形
下面这个图是用 4 条边框填充的正方形，看懂了它你大概就知道该如何用 CSS 写三角形了。
css复制代码div {
border-top-color: #ffc107;
border-right-color: #00bcd4;
border-bottom-color: #e26b6b;
border-left-color: #cc7cda;
border-width: 50px;
border-style: solid;
}
用 transparent 实现三角形的原理：
看下示例：
增大点击区域
常常在移动端的时候点击的按钮的区域特别小，但是由于现实效果又不太好把它做大，所以常用的一个手段就是通过透明的边框来增大按钮的点击区域：
css复制代码.btn {
border: 5px solid transparent;
}
currentColor 会取当前元素继承父级元素的文本颜色值或声明的文本颜色值，即 computed 后的 color 值。
比如，对于如下 CSS，该元素的边框颜色会是 red：
css复制代码.btn {
color: red;
border: 1px solid currentColor;
}
RGB[A] 颜色是由 R(red)-G(green)-B(blue)-A(alpha) 组成的色彩空间。
在 CSS 中，它有两种表示形式：
十六进制符号
RGB 中的每种颜色的值范围是 00~ff，值越大表示颜色越深。所以一个颜色正常是 6 个十六进制字符加上 # 组成，比如红色就是 #ff0000。
如果 RGB 颜色需要加上不透明度，那就需要加上 alpha 通道的值，它的范围也是 00~ff，比如一个带不透明度为 67% 的红色可以这样写 #ff0000aa。
使用十六进制符号表示颜色的时候，都是用 2 个十六进制表示一个颜色，如果这 2 个字符相同，还可以缩减成只写 1 个，比如，红色 #f00；带 67% 不透明度的红色 #f00a。
函数符
当 RGB 用函数表示的时候，每个值的范围是 0~255 或者 0%~100%，所以红色是 rgb(255, 0, 0)， 或者 rgb(100%, 0, 0)。
如果需要使用函数来表示带不透明度的颜色值，值的范围是 0~1 及其之间的小数或者 0%~100%，比如带 67% 不透明度的红色是 rgba(255, 0, 0, 0.67) 或者 rgba(100%, 0%, 0%, 67%)
需要注意的是 RGB 这 3 个颜色值需要保持一致的写法，要嘛用数字要嘛用百分比，而不透明度的值的可以不用和 RGB 保持一致写法。比如 rgb(100%, 0, 0) 这个写法是无效的；而 rgb(100%, 0%, 0%, 0.67) 是有效的。
在第 4 代 CSS 颜色标准中，新增了一种新的函数写法，即可以把 RGB 中值的分隔逗号改成空格，而把 RGB 和 alpha 中的逗号改成 /，比如带 67% 不透明度的红色可以这样写 rgba(255 0 0 / 0.67)。另外还把 rgba 的写法合并到 rgb 函数中了，即 rgb 可以直接写带不透明度的颜色。
HSL[A] 颜色是由色相(hue)-饱和度(saturation)-亮度(lightness)-不透明度组成的颜色体系。
写法上可以参考 RGB 的写法，只是参数的值不一样。
给一个按钮设置不透明度为 67% 的红色的 color 的写法，以下全部写法效果一致：
css复制代码button {
color: #ff0000aa;
color: #f00a;
color: rgba(255, 0, 0, 0.67);
color: rgb(100% 0% 0% / 67%);
color: hsla(0, 100%, 50%, 67%);
color: hsl(0deg 100% 50% / 67%);
}
小提示：在 Chrome DevTools 中可以按住 shift + 鼠标左键可以切换颜色的表示方式。
媒体查询是指针对不同的设备、特定的设备特征或者参数进行定制化的修改网站的样式。
你可以通过给 <link> 加上 media 属性来指定该样式文件只能对什么设备生效，不指定的话默认是 all，即对所有设备都生效：
html复制代码<link rel="stylesheet" src="styles.css" media="screen" />
<link rel="stylesheet" src="styles.css" media="print" />
都支持哪些设备类型？
需要注意的是：通过 media 指定的 资源尽管不匹配它的设备类型，但是浏览器依然会加载它。
除了通过 <link> 让指定设备生效外，还可以通过 @media 让 CSS 规则在特定的条件下才能生效。响应式页面就是使用了 @media 才让一个页面能够同时适配 PC、Pad 和手机端。
css复制代码@media (min-width: 1000px) {}
媒体查询支持逻辑操作符：
媒体查询还支持众多的媒体特性，使得它可以写出很复杂的查询条件：
css复制代码/* 用户设备的最小高度为680px或为纵向模式的屏幕设备 */
@media (min-height: 680px), screen and (orientation: portrait) {}
之前我们通常是在预处理器里才可以使用变量，而现在 CSS 里也支持了变量的用法。通过自定义属性就可以在想要使用的地方引用它。
自定义属性也和普通属性一样具有级联性，申明在 :root 下的时候，在全文档范围内可用，而如果是在某个元素下申明自定义属性，则只能在它及它的子元素下才可以使用。
自定义属性必须通过 --x 的格式申明，比如：--theme-color: red; 使用自定义属性的时候，需要用 var 函数。比如：
css复制代码<!-- 定义自定义属性 -->
:root {
--theme-color: red;
}
<!-- 使用变量 -->
h1 {
color: var(--theme-color);
}
上图这个是使用 CSS 自定义属性配合 JS 实现的动态调整元素的 box-shadow，具体可以看这个 codepen demo。
Retina 显示屏比普通的屏幕有着更高的分辨率，所以在移动端的 1px 边框就会看起来比较粗，为了美观通常需要把这个线条细化处理。这里有篇文章列举了 7 中方案可以参考一下：7种方法解决移动端Retina屏幕1px边框问题
而这里附上最后一种通过伪类和 transform 实现的相对完美的解决方案：
只设置单条底部边框：
css复制代码.scale-1px-bottom {
position: relative;
border:none;
}
.scale-1px-bottom::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
background: #000;
width: 100%;
height: 1px;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
同时设置 4 条边框：
css复制代码.scale-1px {
position: relative;
margin-bottom: 20px;
border:none;
}
.scale-1px::after {
content: '';
position: absolute;
top: 0;
left: 0;
border: 1px solid #000;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 200%;
height: 200%;
-webkit-transform: scale(0.5);
transform: scale(0.5);
-webkit-transform-origin: left top;
transform-origin: left top;
}
什么是浮动：浮动元素会脱离文档流并向左/向右浮动，直到碰到父元素或者另一个浮动元素。
为什么要清楚浮动，它造成了什么问题？
因为浮动元素会脱离正常的文档流，并不会占据文档流的位置，所以如果一个父元素下面都是浮动元素，那么这个父元素就无法被浮动元素所撑开，这样一来父元素就丢失了高度，这就是所谓的浮动造成的父元素高度坍塌问题。
父元素高度一旦坍塌将对后面的元素布局造成影响，为了解决这个问题，所以需要清除浮动，让父元素恢复高度，那该如何做呢？
这里介绍两种方法：通过 BFC 来清除、通过 clear 来清除。
前面介绍 BFC 的时候提到过，计算 BFC 高度的时候浮动子元素的高度也将计算在内，利用这条规则就可以清楚浮动。
假设一个父元素 parent 内部只有 2 个子元素 child，且它们都是左浮动的，这个时候 parent 如果没有设置高度的话，因为浮动造成了高度坍塌，所以 parent 的高度会是 0，此时只要给 parent 创造一个 BFC，那它的高度就能恢复了。
而产生 BFC 的方式很多，我们可以给父元素设置overflow: auto 来简单的实现 BFC 清除浮动，但是为了兼容 IE 最好用 overflow: hidden。
css复制代码.parent {
overflow: hidden;
}
通过 overflow: hidden 来清除浮动并不完美，当元素有阴影或存在下拉菜单的时候会被截断，所以该方法使用比较局限。
我先把结论贴出来：
css复制代码.clearfix {
zoom: 1;
}
.clearfix::after {
content: "";
display: block;
clear: both;
}
这种写法的核心原理就是通过 ::after 伪元素为在父元素的最后一个子元素后面生成一个内容为空的块级元素，然后通过 clear 将这个伪元素移动到所有它之前的浮动元素的后面，画个图来理解一下。
可以结合这个 codepen demo 一起理解上图的 clear 清楚浮动原理。
上面这个 demo 或者图里为了展示需要所以给伪元素的内容设置为了 ::after，实际使用的时候需要设置为空字符串，让它的高度为 0，从而父元素的高度都是由实际的子元素撑开。
该方式基本上是现在人人都在用的清除浮动的方案，非常通用。
参考：CSS中的浮动和清除浮动，梳理一下
针对同一个类型的 HTML 标签，不同的浏览器往往有不同的表现，所以在网站制作的时候，开发者通常都是需要将这些浏览器的默认样式清除，让网页在不同的浏览器上能够保持一致。
针对清除浏览器默认样式这件事，在很早之前 CSS 大师 Eric A. Meyer 就干过。它就是写一堆通用的样式用来重置浏览器默认样式，这些样式通常会放到一个命名为 reset.css 文件中。比如大师的 reset.css 是这么写的：
css复制代码html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
他的这份 reset.css 据说是被使用最广泛的重设样式的方案了。
除了 reset.css 外，后来又出现了 Normalize.css 。关于 Normalize.css, 其作者 necolas 专门写了一篇文章介绍了它，并谈到了它和 reset.css 的区别。这个是他写那篇文章的翻译版：让我们谈一谈 Normalize.css。
文章介绍到：Normalize.css 只是一个很小的CSS文件，但它在默认的 HTML 元素样式上提供了跨浏览器的高度一致性。相比于传统的 CSS reset，Normalize.css 是一种现代的、为 HTML5 准备的优质替代方案，现在已经有很多知名的框架和网站在使用它了。
Normalize.css 的具体样式可以看这里 Normalize.css
区别于 reset.css，Normalize.css 有如下特点：
默认：字符太长溢出了容器
字符超出部分换行
字符超出位置使用连字符
单行文本超出省略
多行文本超出省略
查看以上这些方案的示例： codepen demo
有意思的是刚好前两天看到 chokcoco 针对文本溢出也写了一篇文章，主要突出的是对整块的文本溢出处理。啥叫整块文本？比如，下面这种技术标签就是属于整块文本：
另外他还对 iOS/Safari 做了兼容处理，感兴趣的可以去阅读下：CSS 整块文本溢出省略特性探究。
让元素在父元素中呈现出水平垂直居中的形态，无非就 2 种情况：
以下列到的所有水平垂直居中方案这里写了个 codepen demo，配合示例阅读效果更佳。
水平居中
此类元素需要水平居中，则父级元素必须是块级元素(block level)，且父级元素上需要这样设置样式：
css复制代码.parent {
text-align: center;
}
垂直居中
方法一：通过设置上下内间距一致达到垂直居中的效果：
css复制代码.single-line {
padding-top: 10px;
padding-bottom: 10px;
}
方法二：通过设置 height 和 line-height 一致达到垂直居中：
css复制代码.single-line {
height: 100px;
line-height: 100px;
}
方法一：absolute + 负 margin
方法二：absolute + margin auto
方法三：absolute + calc
这里列了 6 种方法，参考了颜海镜 写的文章 ，其中的两种 line-height 和 writing-mode 方案看后让我惊呼：还有这种操作？学到了学到了。
方法一：absolute + transform
方法二：line-height + vertical-align
方法三：writing-mode
方法四：table-cell
方法五：flex
方法六：grid
针对以下这些方案写了几个示例： codepen demo
方法一：float + overflow（BFC 原理）
方法二：float + margin
方法三：flex
方法四：grid
针对以下这些方案写了几个示例： codepen demo
方法一：圣杯布局
方法二：双飞翼布局
方法三：float + overflow（BFC 原理）
方法四：flex
方法五：grid
结合示例阅读更佳：codepen demo
方法一：padding + 负margin
方法二：设置父级背景图片
列了 4 种方法，都是基于如下的 HTML 和 CSS 的，结合示例阅读效果更佳：codepen demo
html复制代码<div class="layout">
<header></header>
<main>
<div class="inner"></div>
</main>
<footer></footer>
</div>
css复制代码html,
body,
.layout {
height: 100%;
}
body {
margin: 0;
}
header,
footer {
height: 50px;
}
main {
overflow-y: auto;
}
方法一：calc
方法二：absolute
方法三：flex
方法四：grid
这是我断断续续写了 2 周完成的文章，算是自己对 CSS 的一个总结，虽然写得很长，但不足以覆盖所有 CSS 的知识，比如动画和一些 CSS3 的新特性就完全没涉及，因为这要写下来估计得有大几万字（其实就是懒 ）。
码字作图不易，如果喜欢或者对你有丝毫帮助的话，帮忙点个 哈，点赞就是我的动力。同时也希望自己能坚持认真的写下去，因为在总结提升自己的同时如果也能帮助更多的前端er，那将会让我感觉很开心。
作者：大海我来了
链接：https://juejin.cn/post/6941206439624966152
前端安全攻防的意义主要体现在以下几个方面：
综上所述，前端安全攻防的意义非常重要，必须要引起开发者的足够重视与关注，从前端层面保障用户和业务的安全。
前端安全攻防的范畴主要包括 JavaScript、CSS、HTML 等前端代码，以及网络通信协议和构建过程等多个层面。攻击手段目前主要涵盖 XSS、CSRF、Clickjacking 等方式。攻防流程主要包括：安全评估、漏洞挖掘、修复漏洞和安全培训等环节。
具体而言，前端安全攻防的流程包括以下步骤：
综上所述，前端安全攻防是一个协作的攻防流程，需要多个部门协作完成攻防任务，保障系统和用户的安全。
XSS攻击（Cross-Site Scripting攻击）是一种利用Web应用程序中存在的漏洞，向客户端注入恶意代码，使之在用户的浏览器上执行的攻击方式。
XSS攻击主要是利用Web应用程序没有对用户输入的数据进行充分的过滤和验证，使攻击者得以在页面上注入恶意代码，从而在用户访问Web应用程序时，植入恶意代码实现攻击。
XSS攻击可以分为三个主要的类型：反射型 XSS、存储型 XSS、DOM-based XSS。
具体的分类如下：
综上所述，XSS攻击是通过对Web应用程序的注入攻击达到攻击效果的一种方式，攻击者主要通过利用Web应用程序未能充分过滤和验证用户的输入，将恶意代码注入目标页面进行攻击，对于开发者来说需要注重应用中用户输入数据的过滤和验证，防范XSS攻击。
预防和防御 XSS 攻击的方法包括以下几个方面：
综上所述，对于开发人员来说，需要注意加强对XSS攻击的防范，提高自身编码水平，对用户输入的数据进行充分过滤和验证，使用CSP配置， 安全编码等措施加强代码安全性。另外也需要注意与用户的安全教育，提高用户信息安全意识，避免被攻击者利用和误导。
CSRF攻击（Cross-Site Request Forgery 攻击）是一种利用用户在已登录的Web应用程序中的身份识别信息，通过从受害用户处获取的Cookie，伪造发起跨站请求的攻击方式。
攻击者通过构造一个包含攻击代码的恶意链接，诱导用户点击，从而在用户不知情的情况下将恶意代码提交到目标网站，引发一系列渗透攻击和数据窃取。
CSRF攻击可以分为两种类型：GET型和POST型。
具体而言
综上所述，CSRF攻击利用用户的登录状态伪造请求，从而越过了目标网站对用户权限的防护。
为了有效防御CSRF攻击，业界提出了以下几种预防和防御的策略：
综上所述，防御和预防CSRF攻击需要综合考虑多个方面，包括后端措施和前端措施，如在代码实现中增加Token验证、Referer验证、使用双重 Cookies、登录跨站点确认等措施，结合用户的安全教育，加强安全意识，提高应对CSRF攻击能力。
预防和防御 CSRF 攻击主要包括以下几点：
综上所述，预防和防御CSRF攻击需要在多个方面上下功夫。开发人员需要在代码实现过程中增加Token验证、Referer验证、设置SameSite属性、双重验证等措施，同时在用户使用过程中，需要加强安全意识，比如不向陌生人泄露账号信息等，从而避免攻击者利用CSRF攻击，保障用户的安全和数据的保密性。
客户端JavaScript安全主要包括以下几个方面：
综上所述，客户端JavaScript安全是Web应用开发中必须要非常注重的一个方面，主要需要开发人员从多个方面思考和考虑，包括充分过滤和验证用户的输入数据，使用 HTTPS 加密数据传输，使用 JavaScript 混淆工具等方式来保护前端代码安全，同时也要针对用户加强安全教育，提高其安全意识和预防风险的能力。
服务器端JavaScript安全主要包括以下几个方面：
综上所述，服务器端JavaScript安全是Web应用安全的重要环节之一，在服务端代码的开发过程中必须要注重安全，充分考虑并控制代码执行的权限，防止注入攻击和拒绝服务攻击，使用合适的加密算法进行数据保护以及进行定期检测测试，保证服务器端代码的安全性和稳定性。
JavaScript 代码审计是一种从代码层面来分析、检查和评估应用程序的安全性的方法，对于 Web 应用的开发和维护非常必要，可以有效地发现潜在的安全风险和漏洞，避免因漏洞造成的数据泄露、拒绝服务等安全问题。
在 JavaScript 代码审计的过程中，需要注意以下几个方面：
综上所述，JavaScript 代码审计是一项非常重要的安全工作，主要围绕输入过滤、数据流和控制流、客户端和服务器端的安全性、框架和库的安全问题以及多种手段的结合等方面来进行。只有从多个维度和角度进行审计，才能发现更多的潜在漏洞和安全风险，从而提高应用程序的安全性和稳定性。
CSS 注入攻击是一种利用CSS样式表的漏洞来进行攻击的方式。攻击者利用恶意 CSS 代码，将样式表中的一些属性值改变，使网页显示出不正常的样式。
CSS注入攻击的危害主要包括以下几点：
下面是一些防范 CSS 注入攻击的方法：
综上所述，开发者需要重视 CSS 注入攻击的预防和防御，并采取相应的措施，以避免安全事件的发生和用户数据的泄露，从而保障网站的安全性和稳定性。
HTML 注入攻击是一种利用HTML页面的漏洞，往网站中插入恶意 HTML 代码，从而导致用户隐私数据被窃取的攻击方式。
常见的 HTML 注入攻击主要包括以下几种：
防止 HTML 注入攻击需要采取以下措施：
综上所述，为了防止 HTML 注入攻击，需要重视输入数据校验和过滤、限制 HTML 标记、对表单数据进行处理和防范 XSS 攻击等方面，从多个角度对 HTML 注入攻击进行预防和防御。
安全框架（Security Framework）是用来保证应用程序安全性的软件框架，也称之为安全开发框架（Secure Development Framework）。
主要包含以下几个方面的功能：
安全框架的优点有以下几点：
总之，安全框架是一种提高应用程序安全性的有效手段，能够保护用户的隐私数据、避免安全漏洞和攻击等，从而避免因安全问题引起的业务风险和数据泄露等事件。
常见的安全框架有：
以上是一些常见的安全框架，各有特点和应用场景，可以根据不同项目的需求和特点选择合适的安全框架。同时，为了防止安全漏洞和攻击，开发人员应该始终保持警惕，采取最佳实践和标准来处理敏感数据和用户隐私信息。
HTTPS是通过加密通道实现HTTP协议通信的协议，通过使用加密技术确保数据在客户端和服务器之间传输时不被窃取、篡改或伪造。HTTPS的意义有以下几点：
综上所述，使用HTTPS安全传输协议可以保护用户的隐私、防止网络攻击和黑客攻击，同时增强了用户对网站的信任感，提高了网站的安全性和品牌声誉。目前，许多网站和应用程序因为安全问题加密了它们的通信协议，所以使用HTTPS协议已经成为了 Web 安全的最佳实践。
HTTPS（Hypertext Transfer Protocol Secure）是通过加密通道实现HTTP协议通信的协议，工作原理如下：
综上所述，HTTPS的加密技术主要是基于公钥和对称密钥机制实现。首先在握手阶段通过公钥加密方法协商生成会话密钥，然后使用会话密钥来对数据进行加密和解密，保证了网络传输的数据安全性。
HTTP劫持攻击（HTTP Hijacking）是指黑客截获了用户的HTTP请求，并在用户不知情的情况下修改了HTTP请求或返回的结果。攻击者可以读取和修改HTTP报文中的内容，篡改HTTP请求的参数，获取用户敏感信息等。HTTP协议采用明文传输方式，容易被黑客进行窃听和篡改，因此容易受到HTTP劫持攻击。
HTTPS劫持攻击（HTTPS Hijacking）是指黑客通过欺骗或者伪造证书等方式，将HTTPS报文的加密通信解密，篡改或修改用户的HTTPS请求或响应信息的一种攻击方式。HTTPS采用的是加密传输方式，提高了数据的安全性，但只要攻击者掌握合法的证书，即可欺骗受害者，使其误认为通信双方是正确的，而进行对话，同时，黑客则可以在通信过程中篡改或窃取受害者的信息。
在HTTP劫持攻击中，攻击者可以直接读取和修改HTTP报文中的内容，而在HTTPS劫持攻击中，攻击者需要解密HTTPS加密通信才能对通信进行攻击，难度更大，但一旦攻击成功，造成的影响也会更加具有破坏性。
为避免HTTP劫持攻击和HTTPS劫持攻击，我们应该使用安全的通信协议，如HTTPS协议，以确保通信过程的安全和机密性。此外，了解安全威胁和冷静应对攻击也是非常重要的。
为了预防和防御HTTP劫持攻击或HTTPS劫持攻击，我们可以采取以下措施：
综上所述，能够预防和防御HTTP劫持攻击和HTTPS劫持攻击需要采取多重措施，包括使用加密通信协议、加强安全意识培训、设置访问控制、使用安全DNS服务等。但是有一点我们需要明白，完全的安全是不存在的，只能不断提升安全性，减少被攻击概率。
同源策略（Same-Origin Policy）是一种安全机制，主要用于控制Web浏览器如何访问来自不同源（即不同协议、主机名或端口）的网站资源。同源策略的作用是限制某个文档或者脚本，仅在与其来源相同的环境中执行，从而防止恶意代码通过跨站点脚本攻击（XSS攻击）等方式窃取用户的敏感数据或者执行恶意操作。
同源策略要求在同一个域名、端口和协议下的网页脚本才能相互访问，而不同源的网页脚本之间是相互隔离的。同源策略可以防止恶意网站将各种资源注入到其它网站并获取数据，从而保护用户的安全和隐私。
比如，对于JavaScript脚本而言，如果一个页面中加载了另一个来自不同源的网站的脚本，即使这个脚本是来自于一个已经标记为危险的站点，也不能直接访问页面的DOM（文档对象模型），从而避免了XSS攻击。
同源策略虽然提高了Web应用程序的安全性，但也带来了一些限制，为了实现跨域的交互，需要使用一些跨域技术，如JSONP、CORS等实现跨域消息传递。
总之，同源策略可以防止Web应用程序中的安全漏洞，避免恶意网站窃取用户的敏感信息并限制对互联网信息资源的访问。
绕过同源策略的攻击技术主要有以下几种：
请注意这些都是用于学术和研究目的，严禁用于不道德和违法用途。
前端安全攻防可以从以下几个方面进行总结：
1. XSS 攻击
跨站脚本攻击（XSS）是指攻击者通过注入恶意脚本，在受害者的浏览器中运行，以获取受害者敏感信息或实现其他攻击行为。前端防御 XSS 攻击可采取如下措施：
2. CSRF 攻击
跨站请求伪造（CSRF）是指攻击者发起伪造请求，利用受害者的权限完成某些操作，例如转账、修改密码等。前端防御 CSRF 攻击可采取如下措施：
3. 点击劫持攻击
点击劫持（Clickjacking）是利用透明 iframe 将可点击的目标伪装成看似无关的按钮或链接，使受害者在不知情的情况下执行了一些恶意操作。前端防御点击劫持攻击可采取如下措施：
最后，需要强调的是，前端安全防御不能仅仅局限于前端，还需要结合后端、数据库等其他方面进行综合防御，从而确保整个 web 应用系统的安全。
在实际项目中，为了预防和处理安全问题，可以采取以下措施：
总之，针对安全问题，项目需要采取多种措施综合防范和处理，确保系统的安全性。同时，需要时刻关注最新的安全问题和漏洞，并采取相应的措施予以解决。
做项目的过程中，使用正则表达式来匹配一段文本中的特定种类字符，是比较常用的一种方式，下面是对常用的正则匹配做了一个归纳整理。
1、匹配中文:[\u4e00-\u9fa5]
2、英文字母:[a-zA-Z]
3、数字:[0-9]
4、匹配中文，英文字母和数字及下划线：^[\u4e00-\u9fa5_a-zA-Z0-9]+$
同时判断输入长度：
[\u4e00-\u9fa5_a-zA-Z0-9_]{4,10}
5、
(?!_) 不能以_开头
(?!.*?_$) 不能以_结尾
[a-zA-Z0-9_\u4e00-\u9fa5]+ 至少一个汉字、数字、字母、下划线
$ 与字符串结束的地方匹配
6、只含有汉字、数字、字母、下划线，下划线位置不限：
^[a-zA-Z0-9_\u4e00-\u9fa5]+$
7、由数字、26个英文字母或者下划线组成的字符串
^\w+$
8、2~4个汉字
"^[\u4E00-\u9FA5]{2,4}$";
9、最长不得超过7个汉字，或14个字节(数字，字母和下划线)正则表达式
^[\u4e00-\u9fa5]{1,7}$|^[\dA-Za-z_]{1,14}$
10、匹配双字节字符(包括汉字在内)：[^x00-xff]
评注：可以用来计算字符串的长度（一个双字节字符长度计2，ASCII字符计1）
11、匹配空白行的正则表达式：ns*r
评注：可以用来删除空白行
12、匹配HTML标记的正则表达式：<(S*?)[^>]*>.*?|<.*? />
评注：网上流传的版本太糟糕，上面这个也仅仅能匹配部分，对于复杂的嵌套标记依旧无能为力
13、匹配首尾空白字符的正则表达式：^s*|s*$
评注：可以用来删除行首行尾的空白字符(包括空格、制表符、换页符等等)，非常有用的表达式
14、匹配Email地址的正则表达式：^[a-zA-Z0-9][\w\.-]*[a-zA-Z0-9]@[a-zA-Z0-9][\w\.-]*[a-zA-Z0-9]\.[a-zA-Z][a-zA-Z\.]*[a-zA-Z]$
评注：表单验证时很实用
15、手机号：^((13[0-9])|(14[0-9])|(15[0-9])|(17[0-9])|(18[0-9]))\d{8}$
16、身份证：(^\d{15}$)|(^\d{17}([0-9]|X|x)$)
17、匹配网址URL的正则表达式：[a-zA-z]+://[^s]*
评注：网上流传的版本功能很有限，上面这个基本可以满足需求
18、匹配帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)：^[a-zA-Z][a-zA-Z0-9_]{4,15}$
评注：表单验证时很实用
19、匹配国内电话号码：d{3}-d{8}|d{4}-d{7}
评注：匹配形式如 0511-4405222 或 021-87888822
20、匹配腾讯QQ号：[1-9][0-9]{4,}
评注：腾讯QQ号从10000开始
21、匹配中国邮政编码：[1-9]d{5}(?!d)
评注：中国邮政编码为6位数字
22、匹配身份证：d{15}|d{18}
评注：中国的身份证为15位或18位
23、匹配ip地址：d+.d+.d+.d+
评注：提取ip地址时有用
24、匹配特定数字：
^[1-9]d*$ //匹配正整数
^-[1-9]d*$ //匹配负整数
^-?[1-9]d*$ //匹配整数
^[1-9]d*|0$ //匹配非负整数（正整数 + 0）
^-[1-9]d*|0$ //匹配非正整数（负整数 + 0）
^[1-9]d*.d*|0.d*[1-9]d*$ //匹配正浮点数
^-([1-9]d*.d*|0.d*[1-9]d*)$ //匹配负浮点数
^-?([1-9]d*.d*|0.d*[1-9]d*|0?.0+|0)$ //匹配浮点数
^[1-9]d*.d*|0.d*[1-9]d*|0?.0+|0$ //匹配非负浮点数（正浮点数 + 0）
^(-([1-9]d*.d*|0.d*[1-9]d*))|0?.0+|0$ //匹配非正浮点数（负浮点数 + 0）
评注：处理大量数据时有用，具体应用时注意修正
25、匹配特定字符串：
^[A-Za-z]+$ //匹配由26个英文字母组成的字符串
^[A-Z]+$ //匹配由26个英文字母的大写组成的字符串
^[a-z]+$ //匹配由26个英文字母的小写组成的字符串
^[A-Za-z0-9]+$ //匹配由数字和26个英文字母组成的字符串
^w+$ //匹配由数字、26个英文字母或者下划线组成的字符串
26、
在使用RegularExpressionValidator验证控件时的验证功能及其验证表达式介绍如下:
只能输入数字：“^[0-9]*$”
只能输入n位的数字：“^d{n}$”
只能输入至少n位数字：“^d{n,}$”
只能输入m-n位的数字：“^d{m,n}$”
只能输入零和非零开头的数字：“^(0|[1-9][0-9]*)$”
只能输入有两位小数的正实数：“^[0-9]+(.[0-9]{2})?$”
只能输入有1-3位小数的正实数：“^[0-9]+(.[0-9]{1,3})?$”
只能输入非零的正整数：“^+?[1-9][0-9]*$”
只能输入非零的负整数：“^-[1-9][0-9]*$”
只能输入长度为3的字符：“^.{3}$”
只能输入由26个英文字母组成的字符串：“^[A-Za-z]+$”
只能输入由26个大写英文字母组成的字符串：“^[A-Z]+$”
只能输入由26个小写英文字母组成的字符串：“^[a-z]+$”
只能输入由数字和26个英文字母组成的字符串：“^[A-Za-z0-9]+$”
只能输入由数字、26个英文字母或者下划线组成的字符串：“^w+$”
验证用户密码:“^[a-zA-Z]w{5,17}$”正确格式为：以字母开头，长度在6-18之间，
只能包含字符、数字和下划线。
验证是否含有^%&',;=?$"等字符：“[^%&',;=?$x22]+”
只能输入汉字：“^[u4e00-u9fa5],{0,}$”
验证Email地址：“^w+[-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*$”
验证InternetURL：“^http://([w-]+.)+[w-]+(/[w-./?%&=]*)?$”
验证身份证号（15位或18位数字）：“^d{15}|d{}18$”
验证一年的12个月：“^(0?[1-9]|1[0-2])$”正确格式为：“01”-“09”和“1”“12”
验证一个月的31天：“^((0?[1-9])|((1|2)[0-9])|30|31)$”
正确格式为：“01”“09”和“1”“31”。
匹配中文字符的正则表达式： [u4e00-u9fa5]
匹配双字节字符(包括汉字在内)：[^x00-xff]
匹配空行的正则表达式：n[s| ]*r
匹配HTML标记的正则表达式：/<(.*)>.*|<(.*) />/
匹配首尾空格的正则表达式：(^s*)|(s*$)
匹配Email地址的正则表达式：w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*
匹配网址URL的正则表达式：http://([w-]+.)+[w-]+(/[w- ./?%&=]*)?
*请认真填写需求信息，我们会在24小时内与您取得联系。
