CSS 字体大小 | 开创者教程

实例代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>字体单位对比演示 - 开创者教程(kaicz.com)</title>
    <style>
    body {
      font-size: 15px;   /* 根元素字体大小 */
      font-family: Arial, sans-serif;
      line-height: 1.6;
      padding: 20px;
      background-color: #f5f5f5;
    }
    
    .demo-container {
      background: white;
      padding: 20px;
      border-radius: 5px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
      max-width: 600px;
      margin: 0 auto;
    }
    
    h1 {
      color: #333;
      text-align: center;
      font-size: 1.5rem;
    }
    
    p.px {
      font-size: 17px;  /* 固定像素值 */
      color: #e74c3c;
      border-left: 3px solid #e74c3c;
      padding-left: 10px;
    }
    
    p.em {
      font-size: 1.1em;  /* 基于父元素(15px)的1.1倍 */
      color: #3498db;
      border-left: 3px solid #3498db;
      padding-left: 10px;
    }
    
    .em-container {
      font-size: 20px; /* 改变em的参照基准 */
      background: #f9f9f9;
      padding: 10px;
      margin: 10px 0;
    }
    
    span.rem {
      font-size: 1.1rem;  /* 基于根元素(15px)的1.1倍 */
      color: #2ecc71;
      font-weight: bold;
    }
    
    .info {
      background: #f8f9fa;
      padding: 15px;
      border-radius: 5px;
      margin-top: 20px;
      font-size: 0.9rem;
    }
    </style>
</head>
<body>
    <div class="demo-container">
        <h1>CSS字体单位对比演示</h1>
        <p class="px">这段文字使用<strong>17px</strong>固定大小(红色)。无论父元素如何变化，始终保持17像素。</p>
		<p class="em">这段文字使用<strong>1.1em</strong>(蓝色)。基于父元素(15px)的1.1倍 = 16.5px。</p>
		<div class="em-container">
			<p class="em">这段文字同样使用<strong>1.1em</strong>，但父容器字体改为20px，所以实际大小 = 22px。</p>
        </div>
        <p>这段文字包含一个<span class="rem">1.1rem</span>(绿色)的span元素。基于根元素(15px)的1.1倍 = 16.5px，不受父元素影响。</p>
       
        <div class="info">
            <h3>单位说明：</h3>
            <ul>
                <li><strong>px</strong> - 绝对单位，固定像素值</li>
                <li><strong>em</strong> - 相对单位，基于<em>父元素</em>的字体大小</li>
                <li><strong>rem</strong> - 相对单位，基于<em>根元素(html)</em>的字体大小</li>
            </ul>
            <p>当前根元素(body)字体大小设置为15px。</p>
        </div>
    </div>
</body>
</html>