css中em什么意思
em是css中的一个相对长度单位，相对于当前对象内文本的字体尺寸；如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器默认字体尺寸。可以作用在width、height、line-height、margin、border等样式的设置上。
本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。
CSS中有众多单位，常用的px是绝对单位，em则是相对单位。在响应式和移动端的大前提下，使用em能够更方便快捷的一次性调整web文档极其HTML元素的字体大小、宽度、边距、边框等一系列属性，可以说在某些方面，使用em作为单位比px更灵活。
一、什么是em
1.em的长度
em是CSS中的一个相对单位，它的单位长度是根据元素的文本垂直长度来决定的。可以作用在width、height、line-height、margin、padding、border等样式的设置上。
1em=元素中文本的1个垂直高度
根据上面的规则：如果元素中文本的大小为16px，那么1em=16px;如果元素中文本大小为20px,那么1em=20px……
2.em与HTML文本大小默认值
浏览器中的文本一般默认为16px，也就是说，默认的情况下：
1em=16px
那如何改变这个设定呢？只要显式的设置body元素的font-size即可。eg:
body {
font-size: 24px;
width: 10em; /* 10em = 24px * 10 = 240px */
}3.em与继承
在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>（学习视频分享：css视频教程）
二、根据px计算出正确的em
1.使用PXtoEM计算器
使用在线工具PXtoEM（http://pxtoem.com/）可以轻松快捷的根据px计算出所需要的em值。
2.手动计算em
由下面的例子可以反向推导出px转em的计算公式
<style>
div {
font-size: 16px;
width: 2em; /* 2em = 16px * 2 = 32px */
}
</style>px = 参考文本大小 * em => em = px / 参考文本大小
3.注意事项
上面的公式中，“ 参考文本大小”需要格外注意：
如果元素自身设置了font-size，那么参考文本大小就是自身的font-size大小
如果元素自身没有设置font-size，那么参考文本大小就是父元素的font-size大小
为元素设置font-size时，如果使用em作为单位，那么参考文本大小是父元素的font-size大小
更多编程相关知识，请访问：编程视频！！
Atas ialah kandungan terperinci css中em什么意思. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1384
52
Cara menggunakan bootstrap di vue
Apr 07, 2025 pm 11:33 PM
Menggunakan bootstrap dalam vue.js dibahagikan kepada lima langkah: Pasang bootstrap. Import bootstrap di main.js. Gunakan komponen bootstrap secara langsung dalam templat. Pilihan: Gaya tersuai. Pilihan: Gunakan pemalam.
Peranan HTML, CSS, dan JavaScript: Tanggungjawab Teras
Apr 08, 2025 pm 07:05 PM
HTML mentakrifkan struktur web, CSS bertanggungjawab untuk gaya dan susun atur, dan JavaScript memberikan interaksi dinamik. Ketiga melaksanakan tugas mereka dalam pembangunan web dan bersama -sama membina laman web yang berwarna -warni.
Cara Menulis Garis Pecah Di Bootstrap
Apr 07, 2025 pm 03:12 PM
Terdapat dua cara untuk membuat garis perpecahan bootstrap: menggunakan tag, yang mewujudkan garis perpecahan mendatar. Gunakan harta sempadan CSS untuk membuat garis perpecahan gaya tersuai.
Cara mengubah saiz bootstrap
Apr 07, 2025 pm 03:18 PM
Untuk menyesuaikan saiz unsur-unsur dalam bootstrap, anda boleh menggunakan kelas dimensi, yang termasuk: menyesuaikan lebar: .col-, .w-, .mw-adjust ketinggian: .h-, .min-h-, .max-h-
Memahami HTML, CSS, dan JavaScript: Panduan Pemula
Apr 12, 2025 am 12:02 AM
WebDevelopmentReliesOnhtml, CSS, andjavascript: 1) HtmlStructuresContent, 2) CSSStylesit, dan3) JavaScriptaddsInteractivity, Formingthebasisofmodernwebexperiences.
Cara Menyiapkan Kerangka untuk Bootstrap
Apr 07, 2025 pm 03:27 PM
Untuk menubuhkan rangka kerja bootstrap, anda perlu mengikuti langkah -langkah ini: 1. Rujuk fail bootstrap melalui CDN; 2. Muat turun dan tuan rumah fail pada pelayan anda sendiri; 3. Sertakan fail bootstrap di HTML; 4. Menyusun sass/kurang seperti yang diperlukan; 5. Import fail tersuai (pilihan). Setelah persediaan selesai, anda boleh menggunakan sistem grid Bootstrap, komponen, dan gaya untuk membuat laman web dan aplikasi yang responsif.
Cara memasukkan gambar di bootstrap
Apr 07, 2025 pm 03:30 PM
Terdapat beberapa cara untuk memasukkan imej dalam bootstrap: masukkan imej secara langsung, menggunakan tag HTML IMG. Dengan komponen imej bootstrap, anda boleh memberikan imej yang responsif dan lebih banyak gaya. Tetapkan saiz imej, gunakan kelas IMG-cecair untuk membuat imej boleh disesuaikan. Tetapkan sempadan, menggunakan kelas IMG-Sempadan. Tetapkan sudut bulat dan gunakan kelas IMG-bulat. Tetapkan bayangan, gunakan kelas bayangan. Saiz semula dan letakkan imej, menggunakan gaya CSS. Menggunakan imej latar belakang, gunakan harta CSS imej latar belakang.
Cara menggunakan butang bootstrap
Apr 07, 2025 pm 03:09 PM
Bagaimana cara menggunakan butang bootstrap? Perkenalkan CSS bootstrap untuk membuat elemen butang dan tambahkan kelas butang bootstrap untuk menambah teks butang
