CSS單位計算總結

468122151 發布于2019-08-29 17:06 / 983人閱讀

摘要：單位總結公共部分長度像素，同一屏幕分辨率下是絕對單位。

CSS單位總結

公共部分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: #ffffd;
  margin: 10px;
  white-space: nowrap;
  color: yellowgreen;
}

長度 px

像素，同一屏幕分辨率下是絕對單位。屏幕分辨率不同時，像素等比縮放。

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

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


  px
  像素，同一屏幕分辨率下是絕對單位。屏幕分辨率不同時，像素等比縮放。
  100px X 100px
  50px X 50px

相對單位，相對于父元素的字體大小

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

em可精確到小數點后3位

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

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

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

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


  em
  相對單位，相對于父元素的字體大小
  如果父元素font-size是20px，那么2em就是40px
  em可精確到小數點后3位
  
    5em X 5em
  
  
    5em X 5em

rem

相對單位，相對于html的字體大小

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


  rem
  相對單位，相對于html的字體大小
  5rem X 5rem

相對單位，相對于字符的高度，通常為字體高度的一半

如果文字高度未設置，則相對于瀏覽器字體大小高度

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

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

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

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


  ex
  相對單位，相對于字符的高度，通常為字體高度的一半
  如果文字高度未設置，則相對于瀏覽器字體大小高度
  
    10ex X 1ex
  
  
    10ex X 2ex
  
  
    10ex X 2ex

相對單位，數字的寬度

/* list5 */

#length .list5s1 {
  width: 3ch;
}

#length .list5s2 {
  width: 3ch;
}

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

#length .list5s3 {
  width: 3ch;
}


  ch
  相對單位，數字的寬度
  
    111
    111111
  
  
    111

vw/vh

相對單位

視口橫向被分割成100個vw，縱向被分割成100個vh

對于PC端來說，視口是瀏覽器可視區域

對于移動端來說，不論橫屏還是豎屏，vw始終表示橫向寬度，vh始終表示縱向寬度

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


  vw/vh
  相對單位
  視口橫向被分割成100個vw，縱向被分割成100個vh
  對于PC端來說，視口是瀏覽器可視區域
  對于移動端來說，不論橫屏還是豎屏，vw始終表示橫向寬度，vh始終表示縱向寬度
  10vw X 10vh

vmin/vmax

相對單位

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

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

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

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


  vmin/vmax
  相對單位
  視口的寬度和高度中比較小的為100vmin
  視口的寬度和高度中比較大的為100vmax
  10vmin X 10vmin
  10vmax X 10vmax

cm/mm/q

絕對單位，厘米cm，毫米單位mm，1/4毫米q

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

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

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


  cm/mm/q
  絕對單位，厘米cm，毫米單位mm，1/4毫米q
  3cm X 3cm
  30mm X 30mm
  120q X 120q

絕對單位，英寸in

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


  in
  絕對單位，英寸in
  10in X 10in

pt/pc

絕對單位，點pt，派卡pc

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

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

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


  pt/pc
  絕對單位，點pt，派卡pc
  5pt X 5pt
  50pt X 50pt
  5pc X 5pc

相對數值，百分比，相對父元素

/* 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%;
}


  %
  相對數值，百分比，相對父元素
  
    80% X 70%
  
  
    80% X 70%

角度

deg/grad/rad/turn

度deg，梯度grad，弧度rad，轉turn

一個圓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)
}


  deg/grad/rad/turn
  度deg，梯度grad，弧度rad，轉turn
  一個圓360deg，400grad，2πrad，1turn
  10deg
  10grad
  0.314rad
  0.2turn

時間

s/ms

秒s，毫秒ms

用于設定動畫執行的時間

頻率

Hz/kHz

用于設定聲音元素頻率

布局

用于分配一定長度內的剩余空間

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

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


  fr
  用于分配一定長度內的剩余空間

分辨率

dpi/dpcm/dppx

每英寸包含點的數量dpi

每厘米包含點的數量dpcm

每像素包含點的數量dppx

顏色 color name

使用顏色關鍵字指定顏色

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


  color name
  使用顏色關鍵字指定顏色
  darkseagreen
  salmon

HEX

使用十六進制整數指定顏色

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


  HEX
  使用十六進制整數指定顏色
  #f1d2b3
  #a3c2e1

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);
}


  RGB
  R:red;G:green;B:blue;
  顏色的比例指定顏色
  值在0到255之間
  rgb(111,222,123)
  rgb(0,1,2)

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);
}


  RGBA
  R:red;G:green;B:blue;A:alpha;
  顏色的比例指定顏色,alpna指定透明度
  值在0到255之間，alpha的值在0到1之間，0.2可以用.2表示
  rgba(111,222,123,0.2)
  rgba(111,222,123,.2)

HSL

H:hue色調，0或者360表示紅色，120表示綠色，240表示藍色

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%);
}


  HSL
  H:hue色調，0或者360表示紅色，120表示綠色，240表示藍色
  S:saturation飽和度，取值在0.0%到100.0%之間
  L:lightness亮度，取值在0.0%到100.0%之間
  hsl(280, 50%, 60%)
  hsl(50, 50%, 60%)

HSLA

H:hue色調，0或者360表示紅色，120表示綠色，240表示藍色

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);
}


  HSLA
  H:hue色調，0或者360表示紅色，120表示綠色，240表示藍色
  S:saturation飽和度，取值在0.0%到100.0%之間
  L:lightness亮度，取值在0.0%到100.0%之間
  A:alpha透明度
  hsla(280, 50%, 60%,0.6)
  hsla(50, 50%, 60%,.6)

transparent

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

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


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

currentColor

color具有繼承性，currentColor相當于繼承color顏色

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


  currentColor
  color具有繼承性，currentColor相當于繼承color顏色
  currentColor

函數

calc()

calc(四則運算)

用于動態計算長度值，運算符前后要加空格

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

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


  calc()
  calc(四則運算)
  用于動態計算長度值，運算符前后要加空格
  calc(50% - 20rem) X calc(20em - 200px)
  calc(20rem - 150px) X calc(200px - 6em)

生成內容

attr()

用于content屬性，取當前元素的屬性值

可以拼接字符串

/* 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;
}


  attr()
  用于content屬性，取當前元素的屬性值
  可以拼接字符串
  實際元素

云服務器 GPU云服務器單位云計算對于云計算的總結計算機進行數據存儲的基本單位是年終總結

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114104.html

CSS屬性中經常出現的百分比

摘要：絕對單位英寸磅相對單位與元素字號掛鉤與元素字體的高度掛鉤與根元素字號掛鉤與像素掛鉤另一屬性值的百分比。定義基于父元素寬度的百分比的縮進。參考權威教程節樣式可以使用百分比的屬性總結淺析屬性之中經常出現的百分比起源：一道面試題（貓眼電影）問題：css中的單位都有哪些？可以取百分數的單位有哪些？其中margin-top取百分數時是相對于誰來計算的？回答：（1）css中的單位：CSS規...

mylxsw 2019-08-29 11:11 評論0 收藏0
css-開發總結

摘要：重疊的外邊距當上下垂直的外邊距同時存在時會發生外邊距折疊。與邊框包含在元素的寬度或高度中。比如一個元素設置為那么它的總寬就是包括與邊框。 1.重疊的外邊距當上下垂直的外邊距同時存在時會發生外邊距折疊。就是只保留兩個margin值中較大的那個。 html: css: .div1{ width: 600px; heig...

douzifly 2019-08-30 11:15 評論0 收藏0
CSS單位計算總結

摘要：單位總結公共部分長度像素，同一屏幕分辨率下是絕對單位。 CSS單位總結公共部分css body { background-color: #000; color: skyblue; margin: 0; padding: 0; } body>div>div { border: 1px solid cyan; padding: 10px; margin: 1...

zorpan 2019-08-02 11:52 評論0 收藏0
【CSS練習】IT修真院--練習3-簡單界面

摘要：任務三一個最簡單的移動端頁面今天完成的事情運用布局知識跟隨設計圖進行布局，完成簡單并繼續學習優化讓布局更好適應屏幕變化使用了盒模型及百分比了解區別在中應用圖片處理學習明天計劃的事情深度思考手機分辨率和網頁的區別周末補學任務四計劃及簡單編寫遇任務三、一個最簡單的移動端頁面今天完成的事情運用布局知識跟隨設計圖進行布局，完成簡單Demo并繼續學習優化. 讓布局更好適應屏幕變化(使用...

MrZONT 2019-08-29 15:36 評論0 收藏0
愈發熟練的 CSS 技巧

摘要：適配方案簡單解析相對于根元素的的大小來計算坐作為一個單位是根據手淘團隊，比較，改寫的一個插件，兼容豎屏轉橫屏出現的，自定義視覺設計稿的寬度，設定最大寬度這里有的地址，下載下來用即可第一個參數是視覺設計稿的寬度，一般視覺設計稿有，可 showImg(https://segmentfault.com/img/bVbbjpG?w=1366&h=660); rem + simple-flexi...

Lin_YT 2019-08-29 15:33 評論0 收藏0