国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

CSS單位計(jì)算總結(jié)

zorpan / 2836人閱讀

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

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: #ffffd;
  margin: 10px;
  white-space: nowrap;
  color: yellowgreen;
}
長度 px

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

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

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

  
px

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

  
100px X 100px

  
50px X 50px

em

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

如果父元素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;
}

  
em

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

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

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

  

    
5em X 5em

  

  

    
5em X 5em

rem

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

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

  
rem

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

  
5rem X 5rem

ex

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

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

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

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

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

  

    
10ex X 1ex

  

  

    
10ex X 2ex

  

  

    
10ex X 2ex

ch

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

/* list5 */

#length .list5s1 {
  width: 3ch;
}

#length .list5s2 {
  width: 3ch;
}

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

#length .list5s3 {
  width: 3ch;
}

  
ch

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

  

    
111

    
111111

  

  

    
111

vw/vh

相對單位

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

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

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

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

  
vw/vh

  
相對單位

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

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

  
對于移動(dòng)端來說，不論橫屏還是豎屏，vw始終表示橫向?qū)挾龋瑅h始終表示縱向?qū)挾?/p>
  
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

絕對單位，英寸in

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

  
in

  
絕對單位，英寸in

  
10in X 10in

pt/pc

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

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

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

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

  
pt/pc

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

  
5pt X 5pt

  
50pt X 50pt

  
5pc X 5pc

%

%

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

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

  
%

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

  

    
80% X 70%

  

  

    
80% X 70%

角度

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

  
deg/grad/rad/turn

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

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

  
10deg

  
10grad

  
0.314rad

  
0.2turn

時(shí)間

s/ms

秒s，毫秒ms

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

頻率

Hz/kHz

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

布局

fr

用于分配一定長度內(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 div {
  border: 5px solid skyblue;
}

  
fr

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

分辨率

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

  
color name

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

  
darkseagreen

  
salmon

HEX

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

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

  
HEX

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

  
#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色調(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%);
}

  
HSL

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

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

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

  
hsl(280, 50%, 60%)

  
hsl(50, 50%, 60%)

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

  
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透明度

  
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相當(dāng)于繼承color顏色

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

  
currentColor

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

  
currentColor

函數(shù)

calc()

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

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

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

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

  
calc()

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

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

  
calc(50% - 20rem) X calc(20em - 200px)

  
calc(20rem - 150px) X calc(200px - 6em)

生成內(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;
}

  
attr()

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

  
可以拼接字符串

  
實(shí)際元素

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/53173.html

相關(guān)文章

  • CSS屬性中經(jīng)常出現(xiàn)的百分比

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

    mylxsw 評(píng)論0 收藏0

  • css-開發(fā)總結(jié)

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

    douzifly 評(píng)論0 收藏0

  • CSS單位計(jì)算總結(jié)

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

    468122151 評(píng)論0 收藏0

  • 【CSS練習(xí)】IT修真院--練習(xí)3-簡單界面

    摘要：任務(wù)三一個(gè)最簡單的移動(dòng)端頁面今天完成的事情運(yùn)用布局知識(shí)跟隨設(shè)計(jì)圖進(jìn)行布局，完成簡單并繼續(xù)學(xué)習(xí)優(yōu)化讓布局更好適應(yīng)屏幕變化使用了盒模型及百分比了解區(qū)別在中應(yīng)用圖片處理學(xué)習(xí)明天計(jì)劃的事情深度思考手機(jī)分辨率和網(wǎng)頁的區(qū)別周末補(bǔ)學(xué)任務(wù)四計(jì)劃及簡單編寫遇 任務(wù)三、 一個(gè)最簡單的移動(dòng)端頁面 今天完成的事情 運(yùn)用布局知識(shí)跟隨設(shè)計(jì)圖進(jìn)行布局，完成簡單Demo并繼續(xù)學(xué)習(xí)優(yōu)化. 讓布局更好適應(yīng)屏幕變化(使用...

    MrZONT 評(píng)論0 收藏0

  • 愈發(fā)熟練的 CSS 技巧

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

    Lin_YT 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<