CSS的em单位是相对于父元素字体大小的计算单位。下面是一些关于CSS中em的应用实例。/* HTML代码 */ <div class= parent > <
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单位可以用于调整链接的大小,使其与其他文字大小一致。
粉丝
0
关注
0
收藏
0