css中字体单位px与em

简介: css中字体单位px与empx是固定大小单位称为像素,em是非固定大小单位称为相对单位字。

css中字体单位px与em

px是固定大小单位称为像素,em是非固定大小单位称为相对单位字。在ie中px单位的文本的字号不随浏览器字号设置的改变而改变。浏览器字号的设置将改变默认em的大小。

例如:当ie文字大小为中时默认的1em相当于16px,当文字大小为较小时默认的1em相当于12px。

当em单位处于具有固定字号的对象中时,em将以此对象中的文字大小为基准单位

 

<div style="font-size:12px;">
12px字体<br /> <span style="font-size:1em; color:blue">12px字内的1em字</span><br /><span style="font-size:2em;color:red">12px字内的2em字</span><br /> </div>
<div style="font-size:13px;">13px字体</div>
<div style="font-size:14px;">14px字体</div>
<div style="font-size:16px;">16px字体</div>
<div style="font-size:1em">1em字体</div>
<div style="font-size:0.85em">0.85em字体<br />
<span style="font-size:1em; color:blue">0.85em字内的1em字</span><br />
<span style="font-size:2em; color:red">0.85em字内的2em字</span><br /> </div>
<div style="font-size:0.75em">0.75em字体<br />
<span style="font-size:14px; color:blue">0.75em字内的14px字</span><br /> <span style="font-size:12px;color:red">0.75em字内的12px字</span><br />
</div>
<div style="font-size:0.5em">0.5em字体</div>


 

文章引用自: http://yeren203.spaces.live.com/ 
相关文章
|
6月前
|
编解码 前端开发 UED
解密CSS单位:px、em、vh的区别与应用
解密CSS单位:px、em、vh的区别与应用
66 1
|
4月前
|
移动开发 编解码 UED
HTML5 中字体大小单位 em 和 rem 的区别
【8月更文挑战第24天】
252 0
|
4月前
|
前端开发
css中px和em的区别
css中px和em的区别
67 0
|
4月前
|
前端开发
CSS——如何使网页字体小于12px
CSS——如何使网页字体小于12px
44 0
|
6月前
|
前端开发 UED 开发者
CSS基础-属性值单位:px, em, rem, %
【6月更文挑战第7天】本文探讨了CSS中四种关键的尺寸单位:像素(px)、相对单位(em)、rem和百分比(%)。px提供稳定显示但不适用于响应式设计;em根据上下文动态调整,但嵌套使用可能导致计算复杂;rem简化了嵌套计算,适合作为响应式设计的选择;%用于流体布局,但可能在复杂结构中引起不稳定。理解各单位特性并结合现代布局技术,能提升网页布局的美观性和用户体验。
89 3
|
5月前
|
前端开发 JavaScript
css相对单位 rem 和 em 的最佳实践
css相对单位 rem 和 em 的最佳实践
40 0
|
7月前
|
编解码 前端开发
CSS 的数值与单位px\em\%
CSS 的数值与单位px\em\%
|
7月前
|
编解码 前端开发
CSS中单位:【px和%】【em和rem】【vw|vh|vmin|vmax】的区别
CSS中单位:【px和%】【em和rem】【vw|vh|vmin|vmax】的区别
173 0
|
编解码 前端开发
css中单位px、pt、em和rem的区别
css中单位px、pt、em和rem的区别
CSS3 px、em、rem 的使用与区别
CSS3 px、em、rem 的使用与区别
61 0

相关实验场景

更多
下一篇
DataWorks