css中em什么意思(环境是什么意思)
本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
CSS中有眾多單位，常用的px是絕對(duì)單位，em則是相對(duì)單位。在響應(yīng)式和移動(dòng)端的大前提下，使用em能夠更方便快捷的一次性調(diào)整web文檔極其HTML元素的字體大小、寬度、邊距、邊框等一系列屬性，可以說在某些方面，使用em作為單位比px更靈活。
一、什么是em
1.em的長(zhǎng)度
em是CSS中的一個(gè)相對(duì)單位，它的單位長(zhǎng)度是根據(jù)元素的文本垂直長(zhǎng)度來決定的?？梢宰饔迷趙idth、height、line-height、margin、padding、border等樣式的設(shè)置上。
1em=元素中文本的1個(gè)垂直高度
登錄后復(fù)制
根據(jù)上面的規(guī)則：如果元素中文本的大小為16px，那么1em=16px;如果元素中文本大小為20px,那么1em=20px……
2.em與HTML文本大小默認(rèn)值
瀏覽器中的文本一般默認(rèn)為16px，也就是說，默認(rèn)的情況下：
1em=16px
登錄后復(fù)制
那如何改變這個(gè)設(shè)定呢？只要顯式的設(shè)置body元素的font-size即可。eg:
body {
font-size: 24px;
width: 10em; /* 10em = 24px * 10 = 240px */
}
登錄后復(fù)制
3.em與繼承
在CSS中，如果一個(gè)元素沒有設(shè)置font-size，那么它的font-size值就是它父元素的font-size值，這很好理解，就是簡(jiǎn)單的繼承而已。eg:
<style>
body {
font-size: 12px;
}
div {
/* 該元素沒有設(shè)置font-size，因此繼承了父元素的font-size: 12px; */
width: 10em; /* 10em = 12px * 10 = 120px */
}
</style>
<body>
<div></div>
</body>
登錄后復(fù)制
需要注意的是，子元素p繼承了父元素body的font-size，所以其實(shí)在p的樣式表中隱含了一句“font-size: 12px;”?，F(xiàn)在如果顯性的為子元素設(shè)置font-size的話，那么子元素將按照自己的font-size計(jì)算em的絕對(duì)長(zhǎng)度。eg:
<style>
body {
font-size: 12px;
}
div {
font-size: 20px;
width: 10em; /* 10em = 20px * 10 = 200px */
}
</style>
<body>
<div></div>
</body>
登錄后復(fù)制
注意上例中p的font-size使用了px作為單位，那如果想使用em怎么辦呢？需要注意的是，在設(shè)置font-size中使用em作為單位，那么em將是其父元素font-size的相對(duì)值。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>
登錄后復(fù)制
子元素p的font-size是根據(jù)其父元素body的font-size確定的，因此2em = 12px * 2, = 24px；而p的width是相對(duì)于自己的font-size確定的，因此10em = ( 12px * 2 ) * 10 = 240px。所以p中2em=24px，10em=240px也就不奇怪了。
事實(shí)上，不僅是width，子元素中除了font-size的em是根據(jù)父元素的font-size確定的，其他所有em都是根據(jù)自身的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>
登錄后復(fù)制
（學(xué)習(xí)視頻分享：css視頻教程）
二、根據(jù)px計(jì)算出正確的em
1.使用PXtoEM計(jì)算器
使用在線工具PXtoEM（http://pxtoem.com/）可以輕松快捷的根據(jù)px計(jì)算出所需要的em值。
2.手動(dòng)計(jì)算em
由下面的例子可以反向推導(dǎo)出px轉(zhuǎn)em的計(jì)算公式
<style>
div {
font-size: 16px;
width: 2em; /* 2em = 16px * 2 = 32px */
}
</style>
登錄后復(fù)制
px = 參考文本大小 * em => em = px / 參考文本大小
3.注意事項(xiàng)
上面的公式中，“ 參考文本大小”需要格外注意：
-
如果元素自身設(shè)置了font-size，那么參考文本大小就是自身的font-size大小
-
如果元素自身沒有設(shè)置font-size，那么參考文本大小就是父元素的font-size大小
-
為元素設(shè)置font-size時(shí)，如果使用em作為單位，那么參考文本大小是父元素的font-size大小
更多編程相關(guān)知識(shí)，請(qǐng)?jiān)L問：編程視頻?。?/p>
以上就是css中em什么意思的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注風(fēng)君子博客其它相關(guān)文章！
總結(jié)
以上是生活随笔為你收集整理的css中em什么意思(环境是什么意思)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python exe文件运行依赖环境_p
- 下一篇： 傻瓜式炒期货方法