博客

  • pt / px / em 单位换算说明 + 完整对照表

    一、单位基础定义与换算公式

    1. 各单位含义

    1. pt(point,磅) 物理固定长度单位,1pt = 1/72 英寸。
    2. px(pixel,像素) 屏幕虚拟像素单位,换算物理尺寸依赖 DPI(每英寸像素):
    • Windows 默认:96 DPI
    • Apple / 印刷标准:72 DPI
    1. em(相对字体单位) 相对于当前基础字号的倍数,前端通用基准:1em = 16px

    2. 换算公式(Windows 96DPI)

    [ pt = px \times \frac{72}{DPI} ] 代入 Windows 96DPI: [ pt = px \times \frac{72}{96} = px \times 0.75 ]

    二、字号 pt / px / em 完整对照表(基准 1em=16px,Windows96DPI)

    中文字号 pt(磅) px(像素) em 倍数
    初号 42pt 56px 3.5em
    小初 36pt 48px 3em
    – 34pt 45px 2.75em
    – 32pt 42px 2.55em
    – 30pt 40px 2.45em
    – 29pt 38px 2.35em
    – 28pt 37px 2.3em
    – 27pt 36px 2.25em
    一号 26pt 35px 2.2em
    – 25pt 34px 2.125em
    小一 24pt 32px 2em
    二号 22pt 29px 1.8em
    – 20pt 26px 1.6em
    小二 18pt 24px 1.5em
    – 17pt 23px 1.45em
    三号 16pt 22px 1.4em
    小三 15pt 21px 1.3em
    – 14.5pt 20px 1.25em
    四号 14pt 19px 1.2em
    – 13.5pt 18px 1.125em
    – 13pt 17px 1.05em
    小四 12pt 16px 1em
    – 11pt 15px 0.95em
    五号 10.5pt 14px 0.875em
    – 10pt 13px 0.8em
    小五 9pt 12px 0.75em
    – 8pt 11px 0.7em
    六号 7.5pt 10px 0.625em
    – 7pt 9px 0.55em
    小六 6.5pt 8px 0.5em
    七号 5.5pt 7px 0.4375em
    八号 5pt 6px 0.375em
  • 【CSS】常用样式

    CSS Hack

    书写顺序:Chrome -> FF -> IE8 -> IE7 -> IE6

    * 版本
    _ IE6以下
    \9 IE6+
    * IE7 以下
    *+ IE7
    \0 IE8+ 和 Opera

    Media Queries

    <link rel="stylesheet" href="big.css" media="screen and (min-width: 641px)">
    <link rel="stylesheet" href="small.css" media="screen and (max-width: 640px)">
    <link rel="stylesheet" href="style.css" media="screen and (min-width:640px) and (max-width:900px)">

    Flex水平垂直居中

    {
      display: flex;
      align-item: center;
      justify-content: center;
    }

    屏幕自动居中

    {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 320px;
      transform: translate(-50%, -50%);
    }

    单行文本溢出

    {
      text-overflow: ellipsis;
      white-space: nowrap;
        overflow: hidden;
    }

    多行文本溢出

    {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
    }

    ios平滑滚动效果

    {
      -webkit-overflow-scrolling: touch;
    }

    清除浮动

    :after {
      display: block;
      clear: both;
      content: " ";
    }

    字体&规范

    • OOCSS、SMACSS、BEM

    • 移动端字体

      {
      font-family: Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", sans-self;
      }
    • PC端字体

      {
      font-family: Tahoma, Arial, "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei", Simsun, sans-self;
      }
    • 移动 & PC 字体

      {
      font-family: Tahoma,Arial,Roboto,"Droid Sans","Helvetica Neue","Microsoft YaHei","Droid Sans Fallback","Heiti SC","Hiragino Sans GB",Simsun,sans-self;
      }

    中文两端对齐

    {
      text-justify: inter-ideograph;
      text-align: justify;
    }

    省略文字

    {
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }

    文字适应浏览器宽度
    ```css
    {
      white-space: pre-wrap;
      word-wrap: break-word;
    }
    ```
    
    ### 自动换行
    ```css
    {
      white-space: normal;
      word-wrap: break-word;
      word-break: normal;
    }
    ```
    
    ### 三角形
    ```css
    {
      width: 0;
      height: 0;
      border-right: 50px solid transparent;
      border-left: 50px solid transparent;
      border-bottom: 50px solid red;
    }
    ```
    
    ### 自定义字体
    ```css
    @font-face {
      font-family: 'iconfont';
      src: url('//at.alicdn.com/t/font_657067_0jljwrqiuueo.eot');
      src: url('//at.alicdn.com/t/font_657067_0jljwrqiuueo.eot?#iefix') format('embedded-opentype'),
      url('//at.alicdn.com/t/font_657067_0jljwrqiuueo.woff2') format('woff2'),
      url('//at.alicdn.com/t/font_657067_0jljwrqiuueo.woff') format('woff'),
      url('//at.alicdn.com/t/font_657067_0jljwrqiuueo.ttf') format('truetype'),
      url('//at.alicdn.com/t/font_657067_0jljwrqiuueo.svg#iconfont') format('svg');
    }
    ```
    
    ### 移动端1px
    ```css
    .box {
      position: relative;
      width: 100%;
      height: 1px;
      margin: 20px 0;
    }
    .box::after {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 1px;
      content: '';
      background: red;
      transform: scaleY(0.5);
      transform-origin: 0 0;
    }
    ```
    
    ### calc 函数
    ```css
    #div {
      position: absolute;
      left: 50px;
      width: calc( 100% / (100px * 2) );
      border: 1px solid black;
    }
    ```
    
    ### css 禁止用户选择
    ```css
    body {
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      user-select: none;
    }
    ```
    
    ### 消除 transtration 闪屏
    ```css
    .css {
      -webkit-transform-style: preserve-3d;
      -webkit-backface-visibility: hidden;
      -webkit-perspective: 1000;
    }
    ```
    
    ### 去掉Chrome中input获得焦点时的颜色边框
    ```css
    input {
      outline: none;
    }
    ```
  • 【JS】常用正则表达式

    数字

    判断数字
    ^[0-9]*$
    n位的数字
    ^\d{n}$
    至少n位的数字
    ^\d{n,}$
    m-n位的数字:
    ^\d{m,n}$
    零和非零开头的数字
    ^(0|[1-9][0-9]*)$
    非零开头的最多带两位小数的数字
    ^([1-9][0-9]*)+(\.[0-9]{1,2})?$
    带1-2位小数的正数或负数
    ^(\-)?\d+(\.\d{1,2})$
    正数、负数、和小数
    ^(\-|\+)?\d+(\.\d+)?$
    有两位小数的正实数
    ^[0-9]+(\.[0-9]{2})?$
    有1~3位小数的正实数
    ^[0-9]+(\.[0-9]{1,3})?$
    非零的正整数
    ^[1-9]\d*$
    ^([1-9][0-9]*){1,3}$
    ^\+?[1-9][0-9]*$
    非零的负整数
    ^\-[1-9][]0-9"*$
    ^-[1-9]\d*$
    非负整数
    ^\d+$
    ^[1-9]\d*|0$
    非正整数
    ^-[1-9]\d*|0$
    ^((-\d+)|(0+))$
    非负浮点数
    ^\d+(\.\d+)?$
    ^[1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0$
    非正浮点数
    ^((-\d+(\.\d+)?)|(0+(\.0+)?))$
    ^(-([1-9]\d*\.\d*|0\.\d*[1-9]\d*))|0?\.0+|0$
    正浮点数
    ^[1-9]\d*\.\d*|0\.\d*[1-9]\d*$
    ^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$
    负浮点数
    ^-([1-9]\d*\.\d*|0\.\d*[1-9]\d*)$
    ^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$
    浮点数
    ^(-?\d+)(\.\d+)?$
    ^-?([1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0)$

    字符

    汉字
    ^[\u4e00-\u9fa5]{0,}$
    英文和数字
    ^[A-Za-z0-9]+$ 或 ^[A-Za-z0-9]{4,40}$
    长度为3-20的所有字符
    ^.{3,20}$
    由26个英文字母组成的字符串
    ^[A-Za-z]+$
    由26个大写英文字母组成的字符串
    ^[A-Z]+$
    由26个小写英文字母组成的字符串
    ^[a-z]+$
    由数字和26个英文字母组成的字符串
    ^[A-Za-z0-9]+$
    由数字、26个英文字母或者下划线组成的字符串
    ^\w+$ 或 ^\w{3,20}$
    中文、英文、数字包括下划线
    ^[\u4E00-\u9FA5A-Za-z0-9_]+$
    中文、英文、数字但不包括下划线等符号
    ^[\u4E00-\u9FA5A-Za-z0-9]+$
    ^[\u4E00-\u9FA5A-Za-z0-9]{2,20}$
    可以输入含有^%&’,;=?$\"等字符
    [^%&',;=?$\x22]+
    禁止输入含有~的字符
    [^~\x22]+

    常用验证

    Email地址
    ^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$
    域名
    [a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+\.?
    Internet URL
    [a-zA-z]+://[^\s]*
    ^http://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$
    国内电话号码(0511-4405222、021-87888822)
    \d{3}-\d{8}|\d{4}-\d{7}
    身份证号(15位、18位数字),最后一位是校验位,可能为数字或字符X
    (^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)
    帐号是否合法(字母开头,允许5-16字节,允许字母数字下划线)
    ^[a-zA-Z][a-zA-Z0-9_]{4,15}$
    密码(以字母开头,长度在6~18之间,只能包含字母、数字和下划线)
    ^[a-zA-Z]\w{5,17}$
    强密码(必须包含大小写字母和数字的组合,不能使用特殊字符,长度在 8-10 之间)
    ^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9]{8,10}$
    强密码(必须包含大小写字母和数字的组合,可以使用特殊字符,长度在8-10之间)
    ^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$
    日期格式
    ^\d{4}-\d{1,2}-\d{1,2}
    一年的12个月(01~09和1~12)
    ^(0?[1-9]|1[0-2])$
    一个月的31天(01~09和1~31)
    ^((0?[1-9])|((1|2)[0-9])|30|31)$
    xml文件
    ^([a-zA-Z]+-?)+[a-zA-Z0-9]+\\.[x|X][m|M][l|L]$
    中文字符的正则表达式
    [\u4e00-\u9fa5]
    双字节字符
    [^\x00-\xff]

    (包括汉字在内,可以用来计算字符串的长度(一个双字节字符长度计2,ASCII字符计1))

    空白行的正则表达式
    \n\s*\r

    (可以用来删除空白行)

    HTML标记的正则表达式
    <(\S*?)[^>]*>.*?|<.*? /> 

    ( 首尾空白字符的正则表达式:^\s|\s$或(^\s)|(\s$) (可以用来删除行首行尾的空白字符(包括空格、制表符、换页符等等),非常有用的表达式)

    中国邮政编码
    [1-9]\d{5}(?!\d)

    (中国邮政编码为6位数字)

    IP地址
    ((?:(?:25[0-5]|2[0-4]\\d|[01]?\\d?\\d)\\.){3}(?:25[0-5]|2[0-4]\\d|[01]?\\d?\\d))
    钱的输入格式:
    • 有四种钱的表示形式我们可以接受:"10000.00" 和 "10,000.00", 和没有 "分" 的 "10000" 和 "10,000":
        ^[1-9][0-9]*$
    • 这表示任意一个不以0开头的数字,但是,这也意味着一个字符"0"不通过,所以我们采用下面的形式:
        ^(0|[1-9][0-9]*)$
    • 一个0或者一个不以0开头的数字.我们还可以允许开头有一个负号:
        ^(0|-?[1-9][0-9]*)$
    • 这表示一个0或者一个可能为负的开头不为0的数字.让用户以0开头好了.把负号的也去掉,因为钱总不能是负的吧。下面我们要加的是说明可能的小数部分:
        ^[0-9]+(.[0-9]+)?$
    • 必须说明的是,小数点后面至少应该有1位数,所以"10."是不通过的,但是 "10" 和 "10.2" 是通过的:
        ^[0-9]+(.[0-9]{2})?$
    • 这样我们规定小数点后面必须有两位,如果你认为太苛刻了,可以这样:
        ^[0-9]+(.[0-9]{1,2})?$
    • 这样就允许用户只写一位小数.下面我们该考虑数字中的逗号了,我们可以这样:
        ^[0-9]{1,3}(,[0-9]{3})*(.[0-9]{1,2})?$
    • 1到3个数字,后面跟着任意个 逗号+3个数字,逗号成为可选,而不是必须:
        ^([0-9]+|[0-9]{1,3}(,[0-9]{3})*)(.[0-9]{1,2})?$

    备注:这就是最终结果了,别忘了"+"可以用"*"替代如果你觉得空字符串也可以接受的话(奇怪,为什么?)最后,别忘了在用函数时去掉去掉那个反斜杠,一般的错误都在这里