CSS中單位的計(jì)算示例

這篇文章給大家分享的是有關(guān)CSS中單位的計(jì)算示例的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考。一起跟隨小編過來看看吧。

CSS單位總結(jié)

公共部分css

body {
  background-color: #000;
  color: skyblue;
  margin: 0;
  padding: 0;
}
body>div>div {
  border: 1px solid cyan;
  padding: 10px;
  margin: 10px;
  font-weight: bolder;
}
.s {
  background-color: #ddd;
  margin: 10px;
  white-space: nowrap;
  color: yellowgreen;
}

長(zhǎng)度

px

像素，同一屏幕分辨率下是絕對(duì)單位。屏幕分辨率不同時(shí)，像素等比縮放。

/* list1 */
#length .list1s1 {
  width: 100px;
  height: 100px;
}

#length .list1s2 {
  width: 50px;
  height: 50px;
}

<div class="list1">
  <p>px</p>
  <p>像素，同一屏幕分辨率下是絕對(duì)單位。屏幕分辨率不同時(shí)，像素等比縮放。</p>
  <div class="list1s1 s">100px X 100px</div>
  <div class="list1s2 s">50px X 50px</div>
</div>

em

相對(duì)單位，相對(duì)于父元素的字體大小

如果父元素font-size是20px，那么2em就是40px

em可精確到小數(shù)點(diǎn)后3位

/* list2 */
#length .list2fa1 {
  font-size: 18px;
}

#length .list2fa2 {
  font-size: 22px;
}

#length .list2s1 {
  width: 5em;
  height: 5em;
}

#length .list2s2 {
  width: 5em;
  height: 5em;
}

<div class="list2">
  <p>em</p>
  <p>相對(duì)單位，相對(duì)于父元素的字體大小</p>
  <p>如果父元素font-size是20px，那么2em就是40px</p>
  <p>em可精確到小數(shù)點(diǎn)后3位</p>
  <div class="list2fa1 fa">
    <div class="list2s1 s">5em X 5em</div>
  </div>
  <div class="list2fa2 fa">
    <div class="list2s2 s">5em X 5em</div>
  </div>
</div>

rem

相對(duì)單位，相對(duì)于html的字體大小

/* list3 */
#length .list3s1 {
  width: 5rem;
  height: 5rem;
}

<div class="list3">
  <p>rem</p>
  <p>相對(duì)單位，相對(duì)于html的字體大小</p>
  <div class="list3s1 s">5rem X 5rem</div>
</div>

ex

• 相對(duì)單位，相對(duì)于字符的高度，通常為字體高度的一半

• 如果文字高度未設(shè)置，則相對(duì)于瀏覽器字體大小高度

/* list4 */
#length .list4s1 {
  width: 10ex;
  height: 1ex;
}

#length .list4s2 {
  width: 10ex;
  height: 2ex;
}

#length .list4fa3 {
  font-size: 20px;
}

#length .list4s3 {
  width: 10ex;
  height: 2ex;
}

<div class="list4">
  <p>ex</p>
  <p>相對(duì)單位，相對(duì)于字符的高度，通常為字體高度的一半</p>
  <p>如果文字高度未設(shè)置，則相對(duì)于瀏覽器字體大小高度</p>
  <div class="list4fa1 fa">
    <div class="list4s1 s">10ex X 1ex</div>
  </div>
  <div class="list4fa2 fa">
    <div class="list4s2 s">10ex X 2ex</div>
  </div>
  <div class="list4fa3 fa">
    <div class="list4s3 s">10ex X 2ex</div>
  </div>
</div>

ch

• 相對(duì)單位，數(shù)字的寬度

/* list5 */

#length .list5s1 {
  width: 3ch;
}

#length .list5s2 {
  width: 3ch;
}

#length .list5fa2 {
  font-size: 20px;
}

#length .list5s3 {
  width: 3ch;
}

<div class="list5">
  <p>ch</p>
  <p>相對(duì)單位，數(shù)字的寬度</p>
  <div class="list5fa1 fa">
    <div class="list5s1 s">111</div>
    <div class="list5s2 s">111111</div>
  </div>
  <div class="list5fa2 fa">
    <div class="list5s3 s">111</div>
  </div>
</div>

vw/vh

• 相對(duì)單位

• 視口橫向被分割成100個(gè)vw，縱向被分割成100個(gè)vh

• 對(duì)于PC端來說，視口是瀏覽器可視區(qū)域

• 對(duì)于移動(dòng)端來說，不論橫屏還是豎屏，vw始終表示橫向?qū)挾?，vh始終表示縱向?qū)挾?/p>

/* list6 */
#length .list6s1 {
  width: 10vw;
  height: 10vh;
}

<div class="list6">
  <p>vw/vh</p>
  <p>相對(duì)單位</p>
  <p>視口橫向被分割成100個(gè)vw，縱向被分割成100個(gè)vh</p>
  <p>對(duì)于PC端來說，視口是瀏覽器可視區(qū)域</p>
  <p>對(duì)于移動(dòng)端來說，不論橫屏還是豎屏，vw始終表示橫向?qū)挾?，vh始終表示縱向?qū)挾?lt;/p>
  <div class="list6s1 s">10vw X 10vh</div>
</div>

vmin/vmax

• 相對(duì)單位

• 視口的寬度和高度中比較小的為100vmin

• 視口的寬度和高度中比較大的為100vmax

/* list7 */
#length .list7s1 {
  width: 10vmin;
  height: 10vmin;
}

#length .list7s2 {
  width: 10vmax;
  height: 10vmax;
}

<div class="list7">
  <p>vmin/vmax</p>
  <p>相對(duì)單位</p>
  <p>視口的寬度和高度中比較小的為100vmin</p>
  <p>視口的寬度和高度中比較大的為100vmax</p>
  <div class="list7s1 s">10vmin X 10vmin</div>
  <div class="list7s2 s">10vmax X 10vmax</div>
</div>

cm/mm/q

• 絕對(duì)單位，厘米cm，毫米單位mm，1/4毫米q

/* list8 */
#length .list8s1 {
  width: 3cm;
  height: 3cm;
}

#length .list8s2 {
  width: 30mm;
  height: 30mm;
}

#length .list8s3 {
  width: 120q;
  height: 120q;
}

<div class="list8">
  <p>cm/mm/q</p>
  <p>絕對(duì)單位，厘米cm，毫米單位mm，1/4毫米q</p>
  <div class="list8s1 s">3cm X 3cm</div>
  <div class="list8s2 s">30mm X 30mm</div>
  <div class="list8s3 s">120q X 120q</div>
</div>

in

• 絕對(duì)單位，英寸in

/* list9 */
#length .list9s1 {
  width: 10in;
  height: 10in;
}

<div class="list9">
  <p>in</p>
  <p>絕對(duì)單位，英寸in</p>
  <div class="list8s1 s">10in X 10in</div>
</div>

pt/pc

• 絕對(duì)單位，點(diǎn)pt，派卡pc

/* list10 */
#length .list10s1 {
  width: 5pt;
  height: 5pt;
}

#length .list10s2 {
  width: 50pt;
  height: 50pt;
}

#length .list10s3 {
  width: 5pc;
  height: 5pc;
}

<div class="list10">
  <p>pt/pc</p>
  <p>絕對(duì)單位，點(diǎn)pt，派卡pc</p>
  <div class="list10s1 s">5pt X 5pt</div>
  <div class="list10s2 s">50pt X 50pt</div>
  <div class="list10s3 s">5pc X 5pc</div>
</div>

%

• %

• 相對(duì)數(shù)值，百分比，相對(duì)父元素

/* list11 */
#length .list11f1 {
  width: 100px;
  height: 100px;
}

#length .list11s1 {
  width: 80%;
  height: 70%;
}

#length .list11f2 {
  width: 80px;
  height: 70px;
}

#length .list11s2 {
  width: 80%;
  height: 70%;
}

<div class="list11">
  <p>%</p>
  <p>相對(duì)數(shù)值，百分比，相對(duì)父元素</p>
  <div class="list11f1">
    <div class="list11s1 s">80% X 70%</div>
  </div>
  <div class="list11f2">
    <div class="list11s2 s">80% X 70%</div>
  </div>
</div>

角度

• deg/grad/rad/turn

• 度deg，梯度grad，弧度rad，轉(zhuǎn)turn

• 一個(gè)圓360deg，400grad，2πrad，1turn

/* list1 */
#angle .list1s1 {
  width: 80px;
  height: 80px;
  transform: rotate(10deg)
}

#angle .list1s2 {
  width: 80px;
  height: 80px;
  transform: rotate(10grad)
}

#angle .list1s3 {
  width: 80px;
  height: 80px;
  transform: rotate(0.314rad)
}

#angle .list1s4 {
  width: 80px;
  height: 80px;
  transform: rotate(0.2turn)
}

<div class="list1">
  <p>deg/grad/rad/turn</p>
  <p>度deg，梯度grad，弧度rad，轉(zhuǎn)turn</p>
  <p>一個(gè)圓360deg，400grad，2πrad，1turn</p>
  <div class="list1s1 s">10deg</div>
  <div class="list1s2 s">10grad</div>
  <div class="list1s3 s">0.314rad</div>
  <div class="list1s4 s">0.2turn</div>
</div>

時(shí)間

• s/ms

• 秒s，毫秒ms

• 用于設(shè)定動(dòng)畫執(zhí)行的時(shí)間

頻率

• Hz/kHz

• 用于設(shè)定聲音元素頻率

布局

• fr

• 用于分配一定長(zhǎng)度內(nèi)的剩余空間

/* list1 */
#layout-specific .list1fa1 {
  width: 100px;
  height: 100px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

#layout-specific .list1fa1 p {
  border: 5px solid skyblue;
}

<div class="list1">
  <p>fr</p>
  <p>用于分配一定長(zhǎng)度內(nèi)的剩余空間</p>
  <div class="list1fa1">
    <div class="list1s1 s"></div>
    <div class="list1s2 s"></div>
    <div class="list1s3 s"></div>
    <div class="list1s4 s"></div>
  </div>
</div>

分辨率

• dpi/dpcm/dppx

• 每英寸包含點(diǎn)的數(shù)量dpi

• 每厘米包含點(diǎn)的數(shù)量dpcm

• 每像素包含點(diǎn)的數(shù)量dppx

顏色

color name

• 使用顏色關(guān)鍵字指定顏色

/* list1 */
#color .list1s1 {
  width: 100px;
  height: 100px;
  background-color: darkseagreen;
}
#color .list1s2 {
  width: 100px;
  height: 100px;
  background-color: salmon;
}

<div class="list1">
  <p>color name</p>
  <p>使用顏色關(guān)鍵字指定顏色</p>
  <div class="list1s1 s">darkseagreen</div>
  <div class="list1s2 s">salmon</div>
</div>

HEX

• 使用十六進(jìn)制整數(shù)指定顏色

/* list2 */
#color .list2s1 {
  width: 100px;
  height: 100px;
  background-color: #f1d2b3;
}
#color .list2s2 {
  width: 100px;
  height: 100px;
  background-color: #a3c2e1;
}

<div class="list2">
  <p>HEX</p>
  <p>使用十六進(jìn)制整數(shù)指定顏色</p>
  <div class="list2s1 s">#f1d2b3</div>
  <div class="list2s2 s">#a3c2e1</div>
</div>

RGB

• R:red;G:green;B:blue;

• 顏色的比例指定顏色

• 值在0到255之間

/* list3 */
#color .list3s1 {
  width: 100px;
  height: 100px;
  background-color: rgb(111,222,123);
}
#color .list3s2 {
  width: 100px;
  height: 100px;
  background-color: rgb(0,1,2);
}

<div class="list3">
  <p>RGB</p>
  <p>R:red;G:green;B:blue;</p>
  <p>顏色的比例指定顏色</p>
  <p>值在0到255之間</p>
  <div class="list3s1 s">rgb(111,222,123)</div>
  <div class="list3s2 s">rgb(0,1,2)</div>
</div>

RGBA

• R:red;G:green;B:blue;A:alpha;

• 顏色的比例指定顏色,alpna指定透明度

• 值在0到255之間，alpha的值在0到1之間，0.2可以用.2表示

/* list4 */
#color .list4s1 {
  width: 100px;
  height: 100px;
  background-color: rgba(111,222,123,0.2);
}
#color .list4s2 {
  width: 100px;
  height: 100px;
  background-color: rgba(111,222,123,.2);
}

<div class="list4">
  <p>RGBA</p>
  <p>R:red;G:green;B:blue;A:alpha;</p>
  <p>顏色的比例指定顏色,alpna指定透明度</p>
  <p>值在0到255之間，alpha的值在0到1之間，0.2可以用.2表示</p>
  <div class="list4s1 s">rgba(111,222,123,0.2)</div>
  <div class="list4s2 s">rgba(111,222,123,.2)</div>
</div>

HSL

• H:hue色調(diào)，0或者360表示紅色，120表示綠色，240表示藍(lán)色

• S:saturation飽和度，取值在0.0%到100.0%之間

• L:lightness亮度，取值在0.0%到100.0%之間

/* list5 */
#color .list5s1 {
  width: 100px;
  height: 100px;
  background-color: hsl(280, 50%, 60%);
}
#color .list5s2 {
  width: 100px;
  height: 100px;
  background-color: hsl(50, 50%, 60%);
}

<div class="list5">
  <p>HSL</p>
  <p>H:hue色調(diào)，0或者360表示紅色，120表示綠色，240表示藍(lán)色</p>
  <p>S:saturation飽和度，取值在0.0%到100.0%之間</p>
  <p>L:lightness亮度，取值在0.0%到100.0%之間</p>
  <div class="list5s1 s">hsl(280, 50%, 60%)</div>
  <div class="list5s2 s">hsl(50, 50%, 60%)</div>
</div>

HSLA

• H:hue色調(diào)，0或者360表示紅色，120表示綠色，240表示藍(lán)色

• S:saturation飽和度，取值在0.0%到100.0%之間

• L:lightness亮度，取值在0.0%到100.0%之間

• A:alpha透明度

/* list6 */
#color .list6s1 {
  width: 100px;
  height: 100px;
  background-color: hsla(280, 50%, 60%,0.6);
}
#color .list6s2 {
  width: 100px;
  height: 100px;
  background-color: hsla(50, 50%, 60%,.6);
}

<div class="list6">
  <p>HSLA</p>
  <p>H:hue色調(diào)，0或者360表示紅色，120表示綠色，240表示藍(lán)色</p>
  <p>S:saturation飽和度，取值在0.0%到100.0%之間</p>
  <p>L:lightness亮度，取值在0.0%到100.0%之間</p>
  <p>A:alpha透明度</p>
  <div class="list6s1 s">hsla(280, 50%, 60%,0.6)</div>
  <div class="list6s2 s">hsla(50, 50%, 60%,.6)</div>
</div>

transparent

• 全黑透明色，即rgba(0,0,0,0)

/* list7 */
#color .list7s1 {
  width: 100px;
  height: 100px;
  background-color: transparent;
}

<div class="list7">
  <p>transparent</p>
  <p>全黑透明色，即rgba(0,0,0,0)</p>
  <div class="list7s1 s">transparent</div>
</div>

currentColor

• color具有繼承性，currentColor相當(dāng)于繼承color顏色

/* list8 */
#color .list8s1 {
  width: 100px;
  height: 100px;
  background-color: currentColor;
}

<div class="list8">
  <p>currentColor</p>
  <p>color具有繼承性，currentColor相當(dāng)于繼承color顏色</p>
  <div class="list8s1 s">currentColor</div>
</div>

函數(shù)

• calc()

• calc(四則運(yùn)算)

• 用于動(dòng)態(tài)計(jì)算長(zhǎng)度值，運(yùn)算符前后要加空格

/* list1 */
#function .list1s1 {
  width: calc(50% - 20rem);
  height: calc(20em - 200px);
}

#function .list1s2 {
  width: calc(20rem - 150px);
  height: calc(200px - 6em);
}

<div class="list1">
  <p>calc()</p>
  <p>calc(四則運(yùn)算)</p>
  <p>用于動(dòng)態(tài)計(jì)算長(zhǎng)度值，運(yùn)算符前后要加空格</p>
  <div class="list1s1 s">calc(50% - 20rem) X calc(20em - 200px)</div>
  <div class="list1s2 s">calc(20rem - 150px) X calc(200px - 6em)</div>
</div>

生成內(nèi)容

• attr()

• 用于content屬性，取當(dāng)前元素的屬性值

• 可以拼接字符串

/* list1 */
#content .list1s1 {
  width: 100px;
  height: 100px;
}
#content .list1s1:before {
  content: "("attr(datamsgb)")";
  font-size: 12px;
}
#content .list1s1:after {
  content: attr(datamsga);
  font-size: 14px;
}

<div class="list1">
  <p>attr()</p>
  <p>用于content屬性，取當(dāng)前元素的屬性值</p>
  <p>可以拼接字符串</p>
  <div class="list1s1 s" datamsgb="before" datamsga="after">實(shí)際元素</div>
</div>

感謝各位的閱讀！關(guān)于CSS中單位的計(jì)算示例就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！