CSS單位計算總結
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: #ddd;
margin: 10px;
white-space: nowrap;
color: yellowgreen;
}
長度
px
- 像素，同一屏幕分辨率下是絕對單位。屏幕分辨率不一樣時，像素等比縮放。
/* list1 */
#length .list1s1 {
width: 100px;
height: 100px;
}
#length .list1s2 {
width: 50px;
height: 50px;
}
<div class="list1"> <p>px</p> <p>像素，同一屏幕分辨率下是絕對單位。屏幕分辨率不一樣時，像素等比縮放。</p> <div class="list1s1 s">100px X 100px</div> <div class="list1s2 s">50px X 50px</div> </div>
em
- 相對單位，相對於父元素的字體大小
- 若是父元素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;
}
<div class="list2">
<p>em</p>
<p>相對單位，相對於父元素的字體大小</p>
<p>若是父元素font-size是20px，那麼2em就是40px</p>
<p>em可精確到小數點後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
- 相對單位，相對於html的字體大小
/* list3 */
#length .list3s1 {
width: 5rem;
height: 5rem;
}
<div class="list3"> <p>rem</p> <p>相對單位，相對於html的字體大小</p> <div class="list3s1 s">5rem X 5rem</div> </div>
ex
- 相對單位，相對於字符的高度，一般爲字體高度的一半
- 若是文字高度未設置，則相對於瀏覽器字體大小高度
/* 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>相對單位，相對於字符的高度，一般爲字體高度的一半</p>
<p>若是文字高度未設置，則相對於瀏覽器字體大小高度</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
- 相對單位，數字的寬度
/* 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>相對單位，數字的寬度</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
- 相對單位
- 視口橫向被分割成100個vw，縱向被分割成100個vh
- 對於PC端來講，視口是瀏覽器可視區域
- 對於移動端來講，不論橫屏仍是豎屏，vw始終表示橫向寬度，vh始終表示縱向寬度
/* list6 */
#length .list6s1 {
width: 10vw;
height: 10vh;
}
<div class="list6"> <p>vw/vh</p> <p>相對單位</p> <p>視口橫向被分割成100個vw，縱向被分割成100個vh</p> <p>對於PC端來講，視口是瀏覽器可視區域</p> <p>對於移動端來講，不論橫屏仍是豎屏，vw始終表示橫向寬度，vh始終表示縱向寬度</p> <div class="list6s1 s">10vw X 10vh</div> </div>
vmin/vmax
- 相對單位
- 視口的寬度和高度中比較小的爲100vmin
- 視口的寬度和高度中比較大的爲100vmax
/* list7 */
#length .list7s1 {
width: 10vmin;
height: 10vmin;
}
#length .list7s2 {
width: 10vmax;
height: 10vmax;
}
<div class="list7"> <p>vmin/vmax</p> <p>相對單位</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
- 絕對單位，釐米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>絕對單位，釐米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
- 絕對單位，英寸in
/* list9 */
#length .list9s1 {
width: 10in;
height: 10in;
}
<div class="list9"> <p>in</p> <p>絕對單位，英寸in</p> <div class="list8s1 s">10in X 10in</div> </div>
pt/pc
- 絕對單位，點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>絕對單位，點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>
%
- %
- 相對數值，百分比，相對父元素
/* 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>相對數值，百分比，相對父元素</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，轉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)
}
<div class="list1"> <p>deg/grad/rad/turn</p> <p>度deg，梯度grad，弧度rad，轉turn</p> <p>一個圓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>
時間
- s/ms
- 秒s，毫秒ms
- 用於設定動畫執行的時間
頻率
- Hz/kHz
- 用於設定聲音元素頻率
佈局
- fr
- 用於分配必定長度內的剩餘空間
/* 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;
}
<div class="list1">
<p>fr</p>
<p>用於分配必定長度內的剩餘空間</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
- 每英寸包含點的數量dpi
- 每釐米包含點的數量dpcm
- 每像素包含點的數量dppx
顏色
color name
- 使用顏色關鍵字指定顏色
/* 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>使用顏色關鍵字指定顏色</p> <div class="list1s1 s">darkseagreen</div> <div class="list1s2 s">salmon</div> </div>
HEX
- 使用十六進制整數指定顏色
/* 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>使用十六進制整數指定顏色</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色調，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%);
}
<div class="list5"> <p>HSL</p> <p>H:hue色調，0或者360表示紅色，120表示綠色，240表示藍色</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色調，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);
}
<div class="list6"> <p>HSLA</p> <p>H:hue色調，0或者360表示紅色，120表示綠色，240表示藍色</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至關於繼承color顏色
/* list8 */
#color .list8s1 {
width: 100px;
height: 100px;
background-color: currentColor;
}
<div class="list8"> <p>currentColor</p> <p>color具備繼承性，currentColor至關於繼承color顏色</p> <div class="list8s1 s">currentColor</div> </div>
函數
- calc()
- calc(四則運算)
- 用於動態計算長度值，運算符先後要加空格
/* 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(四則運算)</p> <p>用於動態計算長度值，運算符先後要加空格</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>
生成內容
- 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;
}
<div class="list1"> <p>attr()</p> <p>用於content屬性，取當前元素的屬性值</p> <p>能夠拼接字符串</p> <div class="list1s1 s" datamsgb="before" datamsga="after">實際元素</div> </div>
相關文章
- 1. Css定位總結
- 2. CSS 定位總結
- 3. css定位總結
- 4. CSS定位總結
- 5. CSS - 四種定位總結
- 6. 位運算總結
- 7. 計算rem單位
- 8. LeetCode總結，位運算總結
- 9. css的簡單總結
- 10. 計算機的計算單位
- 更多相關文章...
- • jQuery Mobile CSS 類 - jQuery Mobile 教程
- • CSS 指南 - 網站建設指南
- • 算法總結-雙指針
- • 算法總結-回溯法
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 字節跳動21屆秋招運營兩輪面試經驗分享
- 2. Java 3 年，25K 多嗎？
- 3. mysql安裝部署
- 4. web前端開發中父鏈和子鏈方式實現通信
- 5. 3.1.6 spark體系之分佈式計算-scala編程-scala中trait特性
- 6. dataframe2
- 7. ThinkFree在線
- 8. 在線畫圖
- 9. devtools熱部署
- 10. 編譯和鏈接
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. Css定位總結
- 2. CSS 定位總結
- 3. css定位總結
- 4. CSS定位總結
- 5. CSS - 四種定位總結
- 6. 位運算總結
- 7. 計算rem單位
- 8. LeetCode總結，位運算總結
- 9. css的簡單總結
- 10. 計算機的計算單位