大小單位

• 大小單位：px。
• 字體相對單位：em、rem；根據(jù) [font-size] 進行計算。
• 視窗相對單位：vm、vh、vmax、vmin；根據(jù) [視窗大小] 進行計算。

em、rem

• em：相對于元素本身的 font-size 值。如果元素本身沒有設(shè)置 font-size，會繼承父元素的 font-size。
• rem：相對于根元素（html 元素）的 font-size 值。

假如一個元素的 font-size 值為 20px，則 1.5em 為 30px。

vw、vh、vmax、vmin

• vw：視窗寬度的百分比。
• vh：視窗高度的百分比。
• vmax：vh 和 vw 中的較大值。
• vmin：vh 和 vw 中的較小值。

假如一個瀏覽器的高度是 800px，寬度為 1200px：
那么 1vh 的值就是 8px、 1vw 的值就是 12px、 1vmin 就是 8px，1vmax 就是 12px。

時間單位

• CSS 中的時間單位有 2 個：s、 ms。
• 1s = 1000ms。
• 時間單位主要用于動畫的設(shè)置，用于定義持續(xù)時間或延遲時間：

div {
    transition-duration: 2.5s;
}

角度單位

• CSS 中的角度單位有 4 個：deg、grad、rad、turn。
• 當(dāng)旋轉(zhuǎn)值為正值時，元素會順時針旋轉(zhuǎn)；當(dāng)旋轉(zhuǎn)值為負值時，元素會逆時針旋轉(zhuǎn)。
• 角度單位一般用于設(shè)置元素的旋轉(zhuǎn)，包括 2D 旋轉(zhuǎn)、3D 旋轉(zhuǎn)。也可以用于設(shè)置線性漸變的方向：

background: linear-gradient(45deg, #000, #fff);

deg

• deg (Degress)，表示度。
• 一個圓總共 360 度。

transform: rotate(2deg);

grad

• grad (Gradient)，表示梯度。
• 一個圓總共 400 梯度。

transform: rotate(2grad);

rad

• rad (Radians)，表示弧度。
• 一個圓總共 2π 弧度（即 2 * Math.PI 弧度）。

transform: rotate(90rad);

turn

• turn (Turns)，表示圈。
• 一個圓總共一圈。

transform: rotate(0.5turn);

百分比單位

• 不同屬性使用 % 的效果可能會不一樣。

標(biāo)準(zhǔn)盒模型中的百分比

• width：根據(jù) [包含塊] 的 width 進行計算。
• height：根據(jù) [包含塊] 的 height 進行計算。
• padding、margin：根據(jù) [包含塊] 的 width 進行計算。
• border 不接受百分比作為單位的。

<div class="parent">
    <div class="son">test</div>
</div>

div.parent {
    width: 1000px;
    height: 500px;
    background-color: #ccc;
    overflow: hidden;
}

div.son {
    width: 10%;
    height: 10%;
    background-color: #999;
    margin: 10%;
    padding: 10%;
}

文本中的百分比

• font-size：根據(jù)父元素的 font-size 進行計算。
• line-height：根據(jù)當(dāng)前元素的 font-size 進行計算。
• vertical-align：根據(jù)當(dāng)前元素的 line-height 進行計算。
• text-indent：如果是水平的，則根據(jù)當(dāng)前元素的 width 進行計算；如果是垂直的，則根據(jù) height 進行計算。

定位中的百分比

right、left / top、bottom 都是根據(jù) [包含塊] 的 width / height。

變換中的百分比

CSS 中的 transform 屬性中的 translate 和 transform-origin 值也可以設(shè)置百分比：

• translateX() 根據(jù)容器的 width 計算。
• translateY() 根據(jù)容器的 height 計算。
• transform-origin 中橫坐標(biāo)根據(jù)容器的 width 計算；縱坐標(biāo)根據(jù)容器的 height 計算。

注意，translate 還有一個控制 z 軸的函數(shù) translateZ()。它是不接受百分比作為單位的。文章來源地址http://www.zghlxwxcb.cn/news/detail-545593.html

到了這里，關(guān)于【CSS】CSS 常用單位的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！