溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下css中em指的是什么意思，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
em是css中的一個相對長度單位，相對于當前對象內文本的字體尺寸；如當前對行內文本的字體尺寸未被人為設置，則相對于瀏覽器默認字體尺寸。可以作用在width、height、line-height、margin、border等樣式的設置上。
CSS中有眾多單位，常用的px是絕對單位，em則是相對單位。在響應式和移動端的大前提下，使用em能夠更方便快捷的一次性調整web文檔極其HTML元素的字體大小、寬度、邊距、邊框等一系列屬性，可以說在某些方面，使用em作為單位比px更靈活。
em是CSS中的一個相對單位，它的單位長度是根據元素的文本垂直長度來決定的。可以作用在width、height、line-height、margin、padding、border等樣式的設置上。
1em=元素中文本的1個垂直高度
根據上面的規則：如果元素中文本的大小為16px，那么1em=16px;如果元素中文本大小為20px,那么1em=20px……
瀏覽器中的文本一般默認為16px，也就是說，默認的情況下：
1em=16px
那如何改變這個設定呢？只要顯式的設置body元素的font-size即可。eg:
body {
font-size: 24px;
width: 10em; /* 10em = 24px * 10 = 240px */
}在CSS中，如果一個元素沒有設置font-size，那么它的font-size值就是它父元素的font-size值，這很好理解，就是簡單的繼承而已。eg:
<style>
body {
font-size: 12px;
}
div {
/* 該元素沒有設置font-size，因此繼承了父元素的font-size: 12px; */
width: 10em; /* 10em = 12px * 10 = 120px */
}
</style>
<body>
<div></div>
</body>需要注意的是，子元素p繼承了父元素body的font-size，所以其實在p的樣式表中隱含了一句“font-size: 12px;”。現在如果顯性的為子元素設置font-size的話，那么子元素將按照自己的font-size計算em的絕對長度。eg:
<style>
body {
font-size: 12px;
}
div {
font-size: 20px;
width: 10em; /* 10em = 20px * 10 = 200px */
}
</style>
<body>
<div></div>
</body>注意上例中p的font-size使用了px作為單位，那如果想使用em怎么辦呢？需要注意的是，在設置font-size中使用em作為單位，那么em將是其父元素font-size的相對值。eg:
<style>
body {
font-size: 12px;
}
div {
font-size: 2em; /* 2em = 12px * 2 = 24px */
width: 10em; /* 10em = 24px * 10 = 240px */
}
</style>
<body>
<div></div>
</body>子元素p的font-size是根據其父元素body的font-size確定的，因此2em = 12px * 2, = 24px；而p的width是相對于自己的font-size確定的，因此10em = ( 12px * 2 ) * 10 = 240px。所以p中2em=24px，10em=240px也就不奇怪了。
事實上，不僅是width，子元素中除了font-size的em是根據父元素的font-size確定的，其他所有em都是根據自身的font-size確定的。
<style>
body {
font-size: 16px;
}
div {
font-size: 1.25em; /* 1.25em = 16px * 1.25 = 20px */
width: 10em; /* 10em = 20px * 10 = 200px */
height: 5em; /* 5em = 20px * 5 = 100px */
border: 0.05em solid #000; /* 0.05em = 20px * 0.05 = 1px */
margin: 0.25em; /* 0.25em = 20px * 0.25 = 5px */
padding: 0.75em; /* 0.75em = 20px * 0.75 = 15px */
line-height: 1.5em; /* 1.5em = 20px * 1.5 = 30px */
}
</style>
<body>
<div></div>
</body>使用在線工具PXtoEM（http://pxtoem.com/）可以輕松快捷的根據px計算出所需要的em值。
由下面的例子可以反向推導出px轉em的計算公式
<style>
div {
font-size: 16px;
width: 2em; /* 2em = 16px * 2 = 32px */
}
</style>px = 參考文本大小 * em => em = px / 參考文本大小
上面的公式中，“ 參考文本大小”需要格外注意：
如果元素自身設置了font-size，那么參考文本大小就是自身的font-size大小
如果元素自身沒有設置font-size，那么參考文本大小就是父元素的font-size大小
為元素設置font-size時，如果使用em作為單位，那么參考文本大小是父元素的font-size大小
以上是“css中em指的是什么意思”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
