深入理解CSS中的长度单位_html/css_WEB-ITnose

× 目录 [1]px [2]in [3]cm [4]mm [5]q [6]pt [7]pc [8]em [9]rem [10]ex [11]ch [12]vh [13]vw [14]vmin [15]vmax

前面的话

　　本文分为绝对长度单位和相对长度单位来介绍CSS中的长度单位的主要知识

绝对长度单位

　　绝对长度单位代表一个物理测量

像素px(pixels)

　　在web上，像素px是典型的度量单位，很多其他长度单位直接映射成像素。最终，他们被按照像素处理

英寸in(inches)

　　1in = 2.54cm = 96px　　

厘米cm(centimeters)

　　1cm = 10mm = 96px/2.54 = 37.8px

毫米mm(millimeters)

　　1mm = 0.1cm = 3.78px

1/4毫米q(quarter-millimeters)

　　1q = 1/4mm = 0.945px

点pt(points)

　　1pt = 1/72in = =0.0139in = 1/72*2.54cm = 1/72*96px = 1.33px

派卡pc(picas)

　　1pc = 12pt = 1/6in = 1/6*96px = 16px

字体相关相对长度单位

　　em、ex、ch、rem是字体相关的相对长度单位

em

　　em表示元素的font-size属性的计算值，如果用于font-size属性本身，相对于父元素的font-size；若用于其他属性，相对于本身元素的font-size

 .box{font-size: 20px;}.in{    /* 相对于父元素，所以2*2px=40px */    font-size: 2em;    /* 相对于本身元素，所以5*40px=200px */    height: 5em;    /* 10*40px=400px */    width: 10em;    background-color: lightblue;}

测试文字

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did112195

更新时间：2022-11-17 阅读：34次