CSS基础-长度单位
<p><img src="https://www.3bbs.cn/index-diy/img.php?url=https://mmbiz.qpic.cn/sz_mmbiz_jpg/NaYaHjxzUU4yLuYtBgaYdJks1QlNOPN8iaxjkgvS8AjUKs9E1MDwWWJP0vcbHibo4Mfp20ibhiaczWq1OOzxNRiagibg/640?wx_fmt=jpeg&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" alt="图片" /></p><h1>💖简介</h1>
<p>在 <code>CSS</code>中，长度单位分为<strong>绝对长度单位</strong>和<strong>相对长度单位</strong>。这些单位用于定义元素的尺寸、边距、填充、字体大小等属性值</p>
<h1>⭐绝对长度单位</h1>
<blockquote>
<p>绝对长度单位指的是那些无论环境如何变化，其值都是固定不变的单位。它们通常适用于需要精确控制尺寸的情况，例如打印样式表中的页面布局</p>
</blockquote>
<ul>
<li><code>cm</code>（厘米）：<code>1cm = 96px / 2.54 ≈ 37.8px</code>。</li>
<li><code>mm</code>（毫米）：<code>1mm = 1/10th of 1cm = 3.78px</code>。</li>
<li><code>Q</code>（四分之一毫米）：<code>1Q = 1/40th of 1cm = 0.945px</code>。</li>
<li><code>in</code>（英寸）：<code>1in = 2.54cm = 96px</code>。</li>
<li><code>pc</code>（派卡）：<code>1pc = 1/6th of 1in = 16px</code>。</li>
<li><code>pt</code>（磅）：<code>1pt = 1/72th of 1in = 1.33px</code> (对于Windows系统) 或 1px (对于Apple系统)。</li>
<li><code>px</code>（像素）：<code>1px = 1/96th of 1in</code>，是Web开发中最常用的单位，代表屏幕上的一个点 1。</li>
</ul>
<h1>⭐相对长度单位</h1>
<blockquote>
<p>相对长度单位则取决于其他因素，如父元素的尺寸、根元素的字体大小或视窗尺寸。这类单位非常适合响应式设计，因为它们可以根据不同的设备和屏幕尺寸自动调整</p>
</blockquote>
<ul>
<li><code>em</code>：相对于当前对象内本的字体大小，如果当前对象内的字体大小未被设置，则相对于浏览器的默认字体大小。起初排版度量时是基于当前字体写字母 <code>M</code>的宽度的，但现在的定义为相对于当前元素的字体大小。</li>
<li><code>rem</code>：相对于根元素 (<code><html></code>) 的字体大小，避免了嵌套累积的问题，使得整个页面的比例缩放更加容易管理 。</li>
<li><code>ex</code>：相对于字符 <code>"x"</code> 的高度，这个高度通常为字体大小的一半左右。</li>
<li><code>ch</code>：基于字符 <code>"0"</code> 的宽度，主要用于等宽字体中。</li>
<li><code>vw</code>和 <code>vh</code>：分别表示视口宽度和高度的百分比，<code>1vw</code> 等于视口宽度的 <code>1%</code>，<code>1vh</code>等于视口高度的 <code>1%</code>。</li>
<li><code>vmin</code>和 <code>vmax</code>：分别是 <code>vw</code>和 <code>vh</code>中较小的一个和较大的一个，有助于确保元素尺寸适应不同方向的屏幕比例变化。</li>
<li><code><span leaf="">%</span></code>：百分比单位，以百分数形式表示长度值，通常是相对于包含块的相应尺寸。</li>
</ul>
<p>此外，还有一些较少见但同样重要的相对单位，比如 <code>cap</code>（大写字母的高度）、<code>ic</code>（全角汉字的平均宽度）、<code>lh</code> 和 <code>rlh</code>（行高），以及 <code>vi</code> 和 <code>vb</code>（视口内联轴和块轴上的尺寸）。</p>
页:
[1]