css中各種單位總結

阿新 • • 發佈：2019-01-18

絕對單位：

相對單位：

根據上面的圖表寫了一段程式碼測試了一下效果，程式碼如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css單位</title>
<style>
html{
	font-size: 16px;
}
.absolute-cm{
	font-size: 5cm;
}

.absolute-mm{
	font-size: 5mm;
}

.absolute-in{
	font-size: 5in;
}

.absolute-px{
	font-size: 15px;
} 

.absolute-pt{
	font-size: 15pt;
}

.absolute-pc{
	font-size: 5pc;
}

.relative-em{
	font-size: 0.1em;
}

.relative-ex{
	font-size: 2ex;
}

.relative-ch{
	font-size: 0.1ch;
}

.relative-rem{
	font-size: 2rem;
} 

.relative-vw{
	font-size: 5vw;
}

.relative-vh{
	font-size: 5vh;
}

div{
	width: 300px;
	height: 200px;
	font-size: 64px;
}

</style>
</head>
<body>
<p class="absolute-cm">這是5cm的大小<span class="relative-em">這是0.1*5cm(0.1em)的大小</span></p>
<p class="absolute-mm">這是5mm的大小<span class="relative-rem">這是2*16px(2rem)的大小</span></p>
<p class="absolute-in">這是5in的大小0<span class="relative-ch">這是相對5in中0大小的0.1ch的大小</span></p>
<p class="absolute-px">這是15px的大小<span class="relative-ex">這是相對15px中x大小的2ex大小</span></p>
<p class="absolute-pt">這是15pt的大小<span class="relative-vw">這是5vw的大小</span></p>
<p class="absolute-pc">這是5pc的大小<span class="relative-vh">這是5vh的大小</span></p>
<div><p style="font-size: 50%;">這是font size是64px的div的50%的大小</p></div>
<p style="font-size: 32px;">這是32px的大小</p>
</body>
</html>

程式碼中對單位的測試並不完全，vmin和vmax並沒有包含在其中，在菜鳥教程中有相對應的測試案列，拉伸瀏覽器的長寬可以看出菜鳥教程的案列中字型大小的變化。

css中各種單位總結

絕對單位：相對單位：根據上面的圖表寫了一段程式碼測試了一下效果，程式碼如下：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css單位</

Java中各種集合總結（一）

分享圖片 link 抽象類解決集合 1.0 分享 arr 抽象（一）集合與數組數組：（存基本數據類型）-->存對象的一種容器，長度固定，【不適合在對象數量未知的情況下使用】集合：（存對象，對象類型可以不一樣）-->長度可變，可在多數情況下使用。（二）

CSS中的單位

自適應屏幕一個 eight 一半一個點應用如果尺寸 height % 百分比 in 英寸 cm 厘米 mm 毫米 em 1em 等於當前的字體尺寸。 2em 等於當前字體尺寸的兩倍。例如，如果某元素以 16px 顯示，那麽 2em 是32px。在 CSS 中，

css中關於單位的一些問題

單位字體結果大寫 roo bsp 自身很多最好 Css 單位 Px：像素或許被認為是最好的“設備像素”，而這種像素長度和你在顯示器上看到的文字屏幕像素無關。px實際上是一個按角度度量的單位。在web上，像素仍然是典型的度量單位，很多其他長度單位直接映射成像素，最

JAVA中各種異常總結

1.java.lang.nullpointerexception這個異常大家肯定都經常遇到，異常的解釋是"程式遇上了空指標"，簡單地說就是呼叫了未經初始化的物件或者是不存在的物件，這個錯誤經常出現在建立圖片，呼叫陣列這些操作中，比如圖片未經初始化，或者圖片建立時的路徑錯誤等等。對陣列操作中出現空

css中字型單位與超連結樣式

設定字型大小位畫素可以完全定死 h1 {font-size:40px;} 用em來設定字型的大小來代替畫素px 1em和當前字型大小相等,在瀏覽器中預設的文字大小是16px 1em = 16px 可以通過如下公式將畫素轉為em px / 16 = em

CSS中各種佈局的背後(*FC)

CSS中各種佈局的背後，實質上是各種*FC的組合。CSS2.1 中只有 BFC 和 IFC, CSS3 中還增加了 FFC 和 GFC。盒模型(Box Model) 上圖為W3C標準盒模型，另外還有一種IE盒模型（IE6以下），唯一的區別就是：前者width = con

css中字型單位px,pt,em ,rem,百分比之間的區別和用法

px 即畫素，一般國內人使用較多,預設大小是16px; pt 印刷行業常用單位 em 相對單位，相對父元素屬性的單位，一般用於移動端佈局 rem 結合相對定位和絕對定位的優勢，相對根元素html

CSS中各種選擇器（ID、類等）的優先順序

按權重：內聯樣式：權重+1000 ID選擇器：權重+100 類、偽類和屬性選擇器：權重+10 選擇器中的各個元素（即標籤）和偽元素：權重+1 結合符合通配選擇器：權重+0 CSS樣式的表現取權重最

6th WEEK BLOG:CSS中的單位（PS調色盤）（doing）

&nb

css中的各種單位

bsp 字符一個寬度常用單位 css 所在百分數 px:單位代表像素，1px代表一個像素點。百分數：設置子元素為父容器的占比。 em：代表該元素中一個字體所占字符，常用在文字首行縮進。其具有繼承性。 rem：始終代表html中的字符所在位置。 vm:1vm代表占

css重置的各種版本總結

button 自己的 aps load ica 手機端 small logs job 個人手機端常用到的： @charset "utf-8"; body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd,

[轉]總結一下CSS中的定位 Position 屬性

pub pos solid 修改 static blog style 分享正常的在CSS中，Position 屬性經常會用到，主要是絕對定位和相對定位，簡單的使用都沒有問題，尤其嵌套起來，就會有些混亂，今記錄總結一下，防止久而忘之。 CSS positi

vim 的各種用法，很實用哦，都是本人是在工作中學習和總結的

運維列表 vim編輯一個 .com 設置 windows ati 有意義（一）初級個性化配置你的vim 1、vim是什麽？ vim是Vi IMproved，是編輯器Vi的一個加強版，一個極其強大並符合IT工程師（程序員、運維）習慣的編輯器。如果你是一名職業的SE，那麽

css中單位px和em,rem的區別

選擇 php 長度單位我們 css3 項目內核重新 com 國內的設計師大都喜歡用px，而國外的網站大都喜歡用em和rem，那麽三者有什麽區別，又各自有什麽優劣呢？ PX特點 1. IE無法調整那些使用px作為單位的字體大小； 2. 國外

openstack項目中遇到的各種問題總結其三（命令匯總）

openstack三、註意事項3.1、掛載目錄是需要註意的事項把分區掛載到目錄下的操作要謹慎小心對於存放系統重要文件的目錄不要掛載，對於目錄下有重要文件的目錄需要做備份，因為掛載過程中會把目錄清空四、命令匯總4.1、openstack命令匯總查看openstack節點上服務狀態[root@YUN-14 ~

今天來談談Python中的各種排序總結，含實現代碼

pro 一個數 append 增量 ice quick 教你指向具體實現下圖是各種排序方法的時間復雜度、空間復雜度和穩定性，大牛編程吧教你如何編程提升。 1.直接插入排序。直接插入的基本思想是每一步將一個數插入到已排序的有序數列中。 python代碼實現： def

CSS中的長度單位及顏色表示

百分比系列 str 不透明度字體大小 htm html元素十六長度單位 CSS中的長度單位及顏色表示長度單位：

CSS百分比單位總結

CSS中的很多地方都是可以使用百分比單位的，之前一直理所當然的認為百分比就是相對於容器的寬高設定的，後來在自己實現垂直居中的多種寫法時，才意識到這個問題，遂收集資料進行整理。相對於容器的寬度的相對於content-box寬度 width | max-wi

css中的尺寸單位

絕對單位：比例： 1 in inches 英寸 2.54 cm centimete

css中各種單位總結

相關推薦