整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
em、em和px都是CSS中用于設置元素尺寸的單位，它們的區別和計算方式如下：
px，像素，是一個絕對單位，它提供了一個具體的、固定的尺寸。1像素等于屏幕上的一個實際像素點，是相對于顯示器屏幕分辨率而言的，是一個絕對單位，不隨頁面縮放而變化。因此，px單位指定的大小在不同設備和屏幕上保持不變，不受其他因素的影響。計算方式為：1px=1/96英寸。
em，一個相對長度單位，是相對于元素自身的字體大小而言的，如果元素沒有設置字體大小，則相對于父元素的字體大小。1em等于元素的字體大小。因此，em的大小會根據上下文而變化。計算方式為：1em=元素字體大小。
3. rem，根元素字體大小單位，是相對于根元素（即html元素）的字體大小而言的，它不受元素字體大小和父元素字體大小的影響，只受根元素字體大小的影響。計算方式為：1rem=根元素字體大小。
px單位的尺寸是固定的，不會根據用戶的偏好或設備屏幕的大小而改變。這使得它在某些情況下很有用，如確保文本大小的一致性。
em單位更靈活，可以根據用戶的字體大小設置和父元素的字體大小來自動調整。這對于響應式設計和用戶可訪問性非常有用。
rem單位更靈活，可以根據根元素的字體大小來自動調整。這對于適配不同型號的設備屏幕更為有用。
px通常用于設置固定大小的元素，如邊框、內邊距或其他元素的尺寸。
rem和em通常用于調整文本大小，以及在響應式設計中，以便根據不同的視口大小和字體設置來自動調整元素的大小。
px單位的尺寸不受父元素字體大小的影響。它是絕對的，不會繼承任何值。
rem單位的尺寸是相對的，會繼承根元素的字體大小。這可以用于創建相對于根元素字體大小的布局。
em單位的尺寸是相對的，會繼承父元素的字體大小。這可以用于創建相對于父元素字體大小的布局。
綜上所述，在實際開發中，通常使用rem作為單位，因為它可以根據根元素字體大小的變化而自適應調整元素尺寸，適用于響應式布局。而px和em則適用于一些特定的場景，例如設置邊框、陰影、字體大小等。
hoto by Charles Deluvio on Unsplash
我決定寫這個博客的目的是希望探索更多有關使用CSS調整大小的方法。 有這么多種可能性，很容易感到不知所措和困惑。 瀏覽器當前支持16種度量單位：像素，英寸，皮卡，厘米，毫米，點，百分比，em，rem，視口尺寸（vw，vh），ex，ch，Vmax（最大視口）和vmin （viewportmin）在這16個單位中有兩類：相對長度和絕對長度。
首先要了解相對長度，它們會在其他物體上獲得尺寸，這些尺寸在您要設定尺寸的元素之外或相對于它們，例如，父級的尺寸，字體大小和視口尺寸。
百分比基于其父元素。 因此，如果一個元素為200px * 200px，并且該元素的子元素的寬度為50％，高度為50％，則該子元素的等效尺寸為100px * 100px，因為200px的50％為100px。
在這里，我們有一個名為" parent-box"的div元素和一個名為" child-box"的子div元素。
在css文件中，我將父盒的高度和寬度設置為200px，子盒的寬度和高度設置為50％，這意味著現在子盒將是父盒尺寸的50％，因此 如果父框為200px * 200px，則表示子框為100px * 100px，結果如下：
如您所見，藍色元素（即子元素）正好是粉紅色框（即父元素）的50％。
當前有四種類型的視口尺寸單位，vw（視口寬度），vh（視口高度），vmin（視口最小）和vmax（視口最大）。 使用這些單位時要知道的第一件事是，它們會自動將瀏覽器的屏幕劃分為100 x 100的不可見網格，網格中的每個正方形或單位將根據情況代表一個vw，vh，vmin或vmax。
因此，讓我們更深入地研究這兩個。 如果我們聲明一個元素的寬度為50vw且高度為50vh，我們將看到該元素將恰好占據頁面高度的一半，并且占據頁面寬度的一半，每個vw或vh現在相當于那個不可見的100 *中的一個單元 100，所以如果我們聲明一個元素為50vw，它將是瀏覽器寬度的一半，下面我們來看一個示例。
在這里，我們看到父元素恰好是瀏覽器高度和寬度的一半。
這些單位比較棘手。 因此，這些單元的工作方式是將使用高度或寬度的最大或最小長度。 例如，讓我們聲明父框的寬度為50vmax，如果瀏覽器的寬度為800px，高度為500px，則父框的寬度為400px，因為寬度大于高度，所以 元素將從瀏覽器的水平部分的不可見網格中獲取50個單位，現在，如果高度為1000px，寬度為500px，則父框的寬度現在為500px，因為瀏覽器的高度現在大于寬度，因此父元素 box將占據瀏覽器垂直邊100平方中的50平方，并使用它來聲明父對象的框寬。
現在進入vmin。 假設我們聲明父級框的寬度為50vmin，那么從最小視口尺寸開始，父級框的寬度將占據50個網格單位。 同樣的示例，如果瀏覽器的寬度為800px，高度為500px，則父框的寬度現在將為250px，因為我們聲明父框的寬度為最小視口尺寸的50個單位， 在這種情況下，是高度。 現在，如果高度為1000像素，寬度為600像素，則父框的寬度現在為300像素，我知道這非常令人困惑，因此讓我們回到第一個示例：
Here we declare the width to be 50vmax (50 units out of 100 from the BIGGEST viewport dimension)
這樣看起來像這樣：
我們可以看到父框現在恰好是瀏覽器寬度長度的一半，這是因為瀏覽器的寬度大于高度。 現在，如果我們改變一切，將會得到不同的結果。
Here we declare the width to be 50vmin (50 units out of 100 from the SMALLEST viewport dimension)
所以看起來像這樣：
我們可以看到父框現在恰好是瀏覽器高度的一半，這是因為瀏覽器的高度小于寬度。
我從未使用過這些單元，但讓我們看看它們是如何工作的。 所以首先讓我們從ex開始。 這個單位測量您正在使用的任何字體系列的字母" X"的高度，這是指字母" X"的高度？ 因此，如果此" X"的高度為10px（字面的字母為" X"），則1ex將為10px，假設您使用的是另一個字體系列中的" X"，其中" X"的高度為9px，所以現在1ex 是9px。
ch的行為方式非常相似，不同之處在于1ch的長度將基于字體家族的字母" O"的寬度，因此，如果字母" O"的寬度為5px，則1ch將等于5px 。
此單位響應父元素的字體大小，因此，如果父元素的字體大小為10px，則每個em現在等于10 px。
在這里，我們在父框內聲明一個10px字體大小，并將子元素的寬度和高度設置為5em，因此，如果父元素的字體大小為10px，則意味著每個em值10px，因此我們的子元素將為50px * 50像素
em的作用是它們級聯，這意味著什么？ 因此，如果子元素內有另一個元素，并且將其尺寸設置為5em，則第二個子元素將為100px * 100px
發生這種情況的原因是，當一個孩子中有另一個元素時，第二個孩子會將值乘以2，瘋狂嗎？ 這就是為什么在使用em時我們必須小心。
現在，rem與em有所不同，因為rem基于根字體大小而不是父字體來確定其尺寸。 rem一詞的意思是" root em"，這解決了我們在em元素級聯時遇到的問題，通過基于root取其維度，rem值在整個文件中都相同。 因此，讓我們看一下相同的示例，但帶有rem。
因此，如果將本示例與上面的示例進行比較，我們可以看到父框的字體大小現在為30，但是第一個和第二個子控件的字體大小較小，我們還可以看到元素沒有級聯， 是因為以10px的字體大小聲明了根，所以無論何時我們現在使用rem，它都將始終引用10px。
絕對長度不會根據其他因素或頁面，父級，視口等其他因素來決定其大小。
因此，我覺得關于這些度量單位的解釋很多。 如果您將某物聲明為1in，則無論屏幕大小如何，該值都將為1in。 厘米和毫米也一樣
因此，points和picas是印刷術語。 point是1/72英寸，因此很小，12點活字就是12點或1/6英寸。
最后但并非最不重要…
現在，像素是絕對長度，但是它們的大小可能取決于您所使用的設備，某些設備的像素比其他設備大，這取決于它們的密度和分辨率。
(本文翻譯自Sebastian Delima的文章《CSS: Units Of Measurement (px, em, rem, vw, %, etc.)》，參考：https://medium.com/swlh/css-units-of-measurement-px-em-rem-vw-etc-ed8522620775)
在HTML中，大多數元素都被定義為塊級元素或內聯元素。
塊級元素通常會獨立成行，而內聯元素會并排顯示。
在我們學過的元素中，
塊級元素如：<h> <p> <table>這些。
內聯元素如<td><a><img>
下面我們通過練習來直觀看看他們的區別。
塊級元素展示，代碼如下：
<body>
<h1>第一個網頁</h1><hr><h2>表格元素</h2><hr>
<p>塊級元素與內聯元素</p>
<p>零基礎自學網頁制作</p>
<table border="1" width="50%">
<thead>
<tr>
<td colspan="2">表格的頭部信息</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="2">表格的腳部信息</td>
<tr>
</tfoot>
<tbody>
<caption>表格標題</caption>
<colgroup>
<col span="1" style="background-color:#ff0000;"></col>
</colgroup>
<tr>
<th>姓名</th>
<th>年齡</th>
</tr>
<tr>
<td>
<table border="1" width="100%">
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
</td>
<td>一列二行</td>
</tr>
<tr>
<td>二列一行</td>
<td>二列二行</td>
</tr>
</tbody>
</table>
</body>如圖：
內聯元素展示如下
示例代碼：這段代碼被我放在了</table>后面。
<a href="https://baike.baidu.com/item/%E6%AD%BC-20/1555348?fromtitle=%E6%AD%BC20&fromid=1838467&fr=aladdin">殲20戰斗機</a>
<img src="img/戰斗機/image3.jpg" width="200px"/>效果如圖：
其中，<img>標簽中的width屬性規定了圖片的寬度為200px，也就是200像素。
HTML中，如果只對圖片的寬或高進行數值指定，那么未指定的數值會隨著指定數值進行等比例縮放！
熟知html元素是塊級還是內聯對以后進行頁面布局有一定的指導意義。
<div>與<span>標簽
為了方便開發者對頁面內容進行布局和調整，html開發者為html加入了專門的區塊元素<div></div>。
<div></div>是一個塊級元素，大家可以把它理解為一個容器，它本身是不會顯示在頁面上的。
比如這個！
筆者第一個漫畫作品
如果拋開畫面內容，我們看到的是一堆對畫面進行分割的方格子。像這樣
<div></div>元素的作用就是對頁面進行了這樣的分割。
實際上我們的頁面布局都是基于這樣思路進行分割的，只是頁面上不會像漫畫一樣顯示外邊框而已。例如：
強制為其添加邊框分割：
大家看明白了嗎？<div></div>就是用來對頁面進行分割劃區域的。
通過給<div>標簽設置不同的id屬性，可以在css文件中對不同<div>區塊中的所有信息進行統一調整樣式的操作。
這是對塊級元素整體改變樣式的方法。
但是，如果我們想對一個塊級元素中的不同文字或圖片這些內聯元素進行單獨操作怎么做呢？
html開發者為我們提供了<span></span>這樣的內聯標簽。比如我們對<p>我有一個夢想</p>這個段落元素中的"夢想"兩個字進行變化顏色的操作，我們可以這樣寫：
<p>我有一個<span>夢想</span></p>
通過對<span>指定不同的id或class屬性在CSS文件中對"夢想"二字進行改變顏色的操作而不會影響段落元素中的其他文字。
今天的內容結束了，下一次我們建立一個新的頁面來簡單看看<div>元素的基本用法。
喜歡的小伙伴請關注我，閱讀中遇到任何問題請給我留言，如有疏漏或錯誤歡迎大家斧正，不勝感激！
HTML序章（學習目的、對象、基本概念）——零基礎自學網頁制作
HTML是什么？——零基礎自學網頁制作
第一個HTML頁面如何寫？——零基礎自學網頁制作
HTML頁面中head標簽有啥用？——零基礎自學網頁制作
初識meta標簽與SEO——零基礎自學網頁制作
HTML中的元素使用方法1——零基礎自學網頁制作
HTML中的元素使用方法2——零基礎自學網頁制作
HTML元素中的屬性1——零基礎自學網頁制作
HTML元素中的屬性2（路徑詳解）——零基礎自學網頁制作
使用HTML添加表格1（基本元素）——零基礎自學網頁制作
使用HTML添加表格2（表格頭部與腳部）——零基礎自學網頁制作
使用HTML添加表格3（間距與顏色）——零基礎自學網頁制作
使用HTML添加表格4（行顏色與表格嵌套）——零基礎自學網頁制作
16進制顏色表示與RGB色彩模型——零基礎自學網頁制作
HTML中的塊級元素與內聯元素——零基礎自學網頁制作
初識HTML中的<div>塊元素——零基礎自學網頁制作
在HTML頁面中嵌入其他頁面的方法——零基礎自學網頁制作
封閉在家學網頁制作！為頁面嵌入PDF文件——零基礎自學網頁制作
HTML表單元素初識1——零基礎自學網頁制作
HTML表單元素初識2——零基礎自學網頁制作
HTML表單3（下拉列表、多行文字輸入）——零基礎自學網頁制作
HTML表單4（form的action、method屬性）——零基礎自學網頁制作
HTML列表制作講解——零基礎自學網頁制作
為HTML頁面添加視頻、音頻的方法——零基礎自學網頁制作
音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作
HTML中使用<a>標簽實現文本內鏈接——零基礎自學網頁制作
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
