zoukankan      html  css  js  c++  java
  • css常用单位

    px

    像素 是屏幕上显示数据的最基本的点 用域网页设计 直观方便

    像素是相对五显示器屏幕分辨率而言的

    比如

    windows的用户所使用的分辨率一般是96像素/英寸  而Mac的用户说使用的分辨率一般是72像素/英寸

    pt 点是印刷行业常用的单位 1pt=1/72英寸  绝对单位

    pc 派卡 绝对单位

    in 英寸 绝对单位

    mm 毫米 绝对单位

    cm  厘米 绝对单位

    换算关系

    1in=2.54cm=25.4mm=72pt=6pc159

    s  秒

    ms 毫秒

    1s=1000ms

    deg 角度

    tum 圈

    1tum=360deg

    em 字符单位  相对于其本身字体大小来讲

    rem  相对与根元素html来讲

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     7     <title>css常用单位</title>
     8     <style>
     9         *{
    10             margin: 0;
    11             padding: 0;
    12         }
    13         p:nth-of-type(2){
    14             /* 首行缩进32个像素 */
    15             text-indent:32px;
    16         }
    17         p:nth-of-type(3){
    18             /* 首行缩进两个字符 
    19             相对于自己本身字体大小进行设置,
    20             如果没有 则继承父元素的字体大小
    21             chrome 默认16px 
    22             2em:2*16=32px;
    23             */
    24             text-indent:2em;
    25         }
    26         p:nth-of-type(4){
    27             /* 相对于根元素字体大小而言 ,根原始字体大小浏览器chrome默认16px   ,2rem=2*16px; */
    28             text-indent:2rem;
    29         }
    30     </style>
    31 </head>
    32 <body>
    33     <p>默认没有设置缩进的文本</p>
    34     <p>设置首行缩进32个像素</p>
    35     <p>设置首行缩进两个字符,字符单位em,相对于自己本身字体大小而言</p>
    36     <p>首行缩进2rem,rem单位相对的是根元html字体大小而言,不受自己本身字体大小的影响</p>
    37 </body>
    38 </html>
    View Code
  • 相关阅读:
    C#正则表达式判断输入日期格式是否正确
    Linq 总结
    sql存储过程
    uploadify多文件上传实例--C#
    Get W3WP List when Debugging
    SharePoint 2010 BI:Chart Web Part
    Versioning SharePoint 2010 Workflow In VS
    Multilingual User Interface (MUI) In SharePoint 2013
    Create Custom Modification Form In VS 2012-Part1
    Create Custom Modification Form In VS 2012-Part2
  • 原文地址:https://www.cnblogs.com/lvlisn/p/14388733.html
Copyright © 2011-2022 走看看