[分享]css中em的应用实例

CSS的em单位是相对于父元素字体大小的计算单位。下面是一些关于CSS中em的应用实例。

/* HTML代码 */
<div class="parent">
  <p class="child">这是一段文字。</p>
</div>

/* CSS代码 */
.parent {
  font-size: 20px;
}
.child {
  font-size: 1.2em;
} 

在以上例子中，父元素div的字体大小是20px。而子元素p的字体大小使用了1.2em作为单位，表示子元素p字体大小为1.2倍的父元素div字体大小，即24px。这个例子也证明了em单位可以用来做响应式设计，随着父元素字体大小的变化而改变。

/* HTML代码 */
<div class="box">
  <a href="#">这是一个链接</a>
</div>

/* CSS代码 */
.box {
  font-size: 16px;
}
.box a {
  font-size: 0.8em;
} 

在以上例子中，给父元素div设置了字体大小16px。而a标签的字体大小使用了0.8em作为单位，表示a标签字体大小为父元素div字体大小的0.8倍，即12.8px。这个例子也展示了em单位可以用于调整链接的大小，使其与其他文字大小一致。