css中em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。
在响应式和移动端设计的大前提下,使用em能够更方便快捷的一次性调整web文档及其HTML元素的字体大小、宽度、边距、边框等一系列属性,一般来说使用em作为单位比px更灵活。
浏览器中的文本一般默认为16px,也就是说,默认的情况下:
1em=16px
我们可以改变这个值,如:
body { font-size: 24px; width: 10em; /* 10em = 24px * 10 = 240px */}
示例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>CSS长度单位em-CSS大小em详解</title> <style> body{font-size:14px;} h1{font-size:16px;} .size1 p{font-size:1em;} .size2 p{font-size:2em;} .size3 p{font-size:3em;} </style> </head> <body> <h1>假定当前默认字体尺寸是14px,n em即为14px字体尺寸的n倍:</h1> <ul> <li> <strong>1em</strong>: <p>1em大小的文字</p> </li> <li> <strong>2em</strong>: <p>2em大小的文字</p> </li> <li> <strong>3em</strong>: <p>3em大小的文字</p> </li> </ul> </body> </html>
效果图:
以上就是css中em什么意思?的详细内容,更多请关注易知道|edz.cc其它相关文章!