你尚未登录,仅允许查看本站部分内容。请登录使用邀请码注册
liermao

css技巧之:line-height属性数值之间的区别,以及实际中的应用 2个回复 专栏 @ CSS

liermao 发布于 5 月前

先举例子。

这是第一段文字这儿的字体是30像素,用的数值。

这是一段文字这儿的字体是30像素,用的百分比。

这是一段文字这儿的字体是30像素,用的em。

有三个盒子,每个盒子里面都有一个段落标签,里面在嵌套一个加粗标签。我们来给定样式。
b{
font-size: 50px; }

    .a,.b,.c{
        width: 300px;
        font-size: 16px;
    }
    .a{
        line-height: 1.5;
    }
    .b{
        line-height: 150%;
    }
    .c{
        line-height: 1.5em;
    }

其中三个盒子分别用了不同表示方法来表示行高。有什么区别?从数值计算上来讲,是没有区别的,算出来都是1.5*16px=24px。但是 实际效果是这样的

我们发现用百分比和用em的效果是一样的。直接用数值则不一样。是因为应用元素有差别。 1. 直接用数值:所有可继承的元素会其继承元素字体大小重新计算行高。也就是会根据 b 标签字体大小重新计算行高。也就是a盒子。
2.用百分比跟em:当前的元素根据字体大小计算出行高,然后继承给下面的元素。也就是b跟c盒子。
所以,全局设置行高的时候,一般推荐直接使用数值。(从别处看来的:一般当body的字体大小为14px的时候,行高为1.4286。算出来的行高的20px。方便以后其他地方计算)。

应用:
单行文字垂直居中:一般写的时候都喜欢的 height:36px; line-height:36px; 其实这儿写height:36px是完全没有必要的。
多行文字垂直居中:直接上代码。
.d{ width: 300px; line-height: 250px; text-align: center; background: #cccccc; } .d p{ text-indent: 15px; padding: 0 10px; display: inline-block; /此处必须设置为内联块。不然不起作用/ line-height: 1.5; text-align: left; vertical-align: middle; }


兼容性ie8+。

  • acrens

    主要考虑单位、百分比、倍数的区别,就可以应用自如

    #1
  • liermao

    你说的对。

    #2
登录后回复,如无账号,请使用邀请码注册