长度单位em rem

来源：互联网发布：c语言合法用户标识符编辑：程序博客网时间：2024/05/01 21:08

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>长度单位em rem</title></head><body><!----><div style="font-size: 12px">    我是第一层    <div style="font-size: 2em">我是第二层        <div style="font-size: 2em">我是第三层            <div style="font-size: 2em"> 我是第四层       </div>        </div>    </div></div>

<div style="font-size: 12px">    我是第一层    <div style="font-size: 2em">我是第二层        <div style="font-size: 2rem">我是第三层            <div style="font-size: 2rem"> 我是第四层            </div>        </div>    </div></div>

<div style="font-size: 12px">    我是第一层    <div style="font-size: 2em">我是第二层        <div style="font-size: 2em">我是第三层            <div style="font-size: 2em"> 我是第四层            </div>        </div>    </div></div></body></html>

<!--CSS3引入了一些新的尺寸单位，重点推荐的rem（根em），和em和百分比不同的是它不是与父元素挂钩，而是和文档的根元素（html）挂钩。em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。我们在之前的web设计中大量使用了px进行布局，因为早期固定布局使用px较为方便，逐渐养成了这种习惯。而使用em单位其实更加灵活，，尤其是在修改样式时，只需要修改一下挂钩元素的哪个大小即可，无须修改每一个元素。默认挂钩元素为父元素。网页默认字号大小为16pxem是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。(引自CSS2.0手册)       任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px,这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。EM特点 1. em的值并不是固定的；2. em会继承父级元素的字体大小。 px：为像素单位。它是显示屏上显示的每一个小点，为显示的最小单位。它是一个绝对尺寸单位；em：它是描述相对于应用在当前元素的字体尺寸，所以它也是相对长度单位。一般浏览器字体大小默认为16px，则2em == 32px；%： 百分比，它是一个更纯粹的相对长度单位。它描述的是相对于父元素的百分比值。如50%，则为父元素的一半。这里需要注意的是：em是相对于应用于当前当前元素的字体尺寸；而百分比则是相对于父元素的尺寸。-->

0 0