[分享]css先一条线长度

CSS中有一种非常方便的长度单位，它叫做“em”。所谓“em”就是指相对于当前元素的字体大小来计算长度。例如，如果一个元素的字体大小为16像素，那么一个长度为1em的线段就等于16像素。.line {...

CSS中有一种非常方便的长度单位，它叫做“em”。所谓“em”就是指相对于当前元素的字体大小来计算长度。例如，如果一个元素的字体大小为16像素，那么一个长度为1em的线段就等于16像素。

.line {
  width: 1em;
  height: 2px;
  background-color: black;
} 

上述代码片段中定义了一个类名为“line”的样式，其中宽度为1em，高度为2像素，即宽度和字体大小成比例。当应用到一个元素上后，这个元素的宽度会自动与其字体大小相同，也就是说，不论字体大小多大，这条线段的宽度都会与之相适应。

值得注意的是，“em”长度单位不仅可以用来指定长度，还可以用来指定各种与尺寸相关的属性，如边框大小、内边距、外边距等。使用“em”长度单位，既可以让尺寸随着元素的字体大小自适应，又可以保持各个元素之间的比例关系。