CSS取值与单位Values and Units(一)【CSS 长度(Length)】

傷城~ 2021-06-26 16:06 245阅读 0赞

## 长度取值 `Length Data Types` ##

### 长度单位 ###

<table> 
 <thead> 
  <tr> 
   <th align="left">长度取值</th> 
   <th align="left">版本</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">文本相对长度单位</td> 
   <td align="left"></td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">em</td> 
   <td align="left">CSS1</td> 
   <td align="left">相对于当前对象内文本的字体尺寸</td> 
  </tr> 
  <tr> 
   <td align="left">ex</td> 
   <td align="left">CSS1</td> 
   <td align="left">相对于字符“x”的高度。通常为字体高度的一半</td> 
  </tr> 
  <tr> 
   <td align="left">ch</td> 
   <td align="left">CSS3</td> 
   <td align="left">数字“0”的宽度</td> 
  </tr> 
  <tr> 
   <td align="left">rem</td> 
   <td align="left">CSS3</td> 
   <td align="left">相对于根元素(即html元素)font-size计算值的倍数</td> 
  </tr> 
  <tr> 
   <td align="left">视口相对长度单位</td> 
   <td align="left"></td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">vw</td> 
   <td align="left">CSS3</td> 
   <td align="left">相对于视口的宽度。视口被均分为100单位的vw</td> 
  </tr> 
  <tr> 
   <td align="left">vh</td> 
   <td align="left">CSS3</td> 
   <td align="left">相对于视口的高度。视口被均分为100单位的vh</td> 
  </tr> 
  <tr> 
   <td align="left">vmax</td> 
   <td align="left">CSS3</td> 
   <td align="left">相对于视口的宽度或高度，总是相对于大的那个。视口的宽度或高度被均分为100单位的vmax</td> 
  </tr> 
  <tr> 
   <td align="left">vmin</td> 
   <td align="left">CSS3</td> 
   <td align="left">相对于视口的宽度或高度，总是相对于小的那个。视口的宽度或高度被均分为100单位的vmin</td> 
  </tr> 
  <tr> 
   <td align="left">绝对长度单位</td> 
   <td align="left"></td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">cm</td> 
   <td align="left">CSS1</td> 
   <td align="left">厘米</td> 
  </tr> 
  <tr> 
   <td align="left">mm</td> 
   <td align="left">CSS1</td> 
   <td align="left">毫米</td> 
  </tr> 
  <tr> 
   <td align="left">q</td> 
   <td align="left">CSS3</td> 
   <td align="left">1/4毫米（quarter-millimeters）; 1q = 0.25mm</td> 
  </tr> 
  <tr> 
   <td align="left">in</td> 
   <td align="left">CSS1</td> 
   <td align="left">英寸（inches）; 1in = 2.54cm</td> 
  </tr> 
  <tr> 
   <td align="left">pt</td> 
   <td align="left">CSS1</td> 
   <td align="left">点（points）; 1pt = 1/72in</td> 
  </tr> 
  <tr> 
   <td align="left">pc</td> 
   <td align="left">CSS1</td> 
   <td align="left">派卡（picas）; 1pc = 12pt</td> 
  </tr> 
  <tr> 
   <td align="left">px</td> 
   <td align="left">CSS1</td> 
   <td align="left">像素（pixels）; 1px = 1/96in</td> 
  </tr> 
 </tbody> 
</table>

## `<length>` ##

说明：  
`<number>`接长度单位

*  特殊值`0`可以省略单位。例如：`margin:0px`可以写成`margin:0`
 *  一些属性可能允许有负长度值，或者有一定的范围限制。如果不支持负长度值，那应该变换到能够被支持的最近的一个长度值。
 *  长度单位包括包括：相对单位和绝对单位。
 *  相对长度单位包括有：`em,ex,ch,rem,vw,vh,vmax,vmin`
 *  绝对长度单位包括有：`cm,mm,q,in,pt,pc,px`

## rem ##

相对长度单位，相对于根元素(即`html`元素)`font-size`计算值的倍数

实例

<!DOCTYPE html>
    <html lang="zh-cmn-Hans">
    <head>
    <meta charset="utf-8" />
    <title></title>
    
    <style> html, h1 { font-size: 12px; } p { font-size: 2rem; } </style>
    </head>
    <body>
    <h1>下面的文字将是html定义的字体大小的2倍：</h1>
    <p>我是html定义的12px的2倍，字体大小为24px</p>
    </body>
    </html>

效果图：  
![在这里插入图片描述][20190614233100667.png]

## px ##

相对长度单位，像素（Pixels）

1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px

示例代码：

div{ font-size:12px;}
    p{ text-indent:24px;}

实例

<!DOCTYPE html>
    <html lang="zh-cmn-Hans">
    <head>
    <meta charset="utf-8" />
    <title></title>
    
    <style> h1{ margin:10px 0;font-size:16px;} ul{ margin:0;padding:0;list-style:none;} li{ margin-top:8px;background:#ccc;} .in{ width:1in;} .pt{ width:72pt;} .pc{ width:6pc;} .px{ width:96px;} .cm{ width:2.54cm;} .mm{ width:25.4mm;} </style>
    </head>
    <body>
    <h1>单位转换对比：</h1>
    <ul>
    	<li class="in">1in</li>
    	<li class="pt">72pt</li>
    	<li class="pc">6pc</li>
    	<li class="px">96px</li>
    	<li class="cm">2.54cm</li>
    	<li class="mm">25.4mm</li>
    </ul>
    <p>1in = 2.54cm = 25.4 mm = 72pt = 6pc = 96px</p>
    </body>
    </html>

效果图：  
![在这里插入图片描述][20190614233342736.png]

[20190614233100667.png]: /images/20210626/2355abd5f96a40e2b0e1cd09be641952.png
[20190614233342736.png]: /images/20210626/fb5d3f1423b44da9bd4a857036d5cfdb.png