css的font-size属性、line-height属性、height属性

目录

一,字体框

二、font-size属性

三、line-height属性

四、line-height和font-size的联系


        简介:font-size是css中关于字体的样式属性,注意与文本属性text-xxx进行区别。因为文本由一个个字符组成,所以字体属性也会对文本属性造成影响。

一,字体框

      字体框是设计字体时,采用的指定高度,这个高度一旦确定就不会更改。而字体框的宽度会按照比例自行修改。而font-size属性就是指这个字体框的高度。任何字体的基线都是当前字体字母x下端的水平线。 

        而font-size与line-height的关系如下图,下图中蓝色背景色高度就是line-height,当font-size比line-height小的时候,蓝色框会包住字体。实际上,这个蓝色背景是盒模型属性height的值

        由于字体设计的一些特性,导致字体一些约定俗成的协议如下:虽然存在字体框的约束,但是为了字体美观性,超出字体框的现象都存在。比如字母:f、j、g等,但是他们都不可能超过上字体框。

二、font-size属性

        单位px,取值大于0。默认为medium。这个属性会被继承。

语法:
font-size : absolute-size | relative-size | length
参数:
1、absolute-size : 根据对象字体进行调节。xx-small | x-small | small | medium | large | x-large | xx-large
2、relative-size : 相对于父对像中字体尺寸进行相对调节。使用成比例的em单位计算。larger | smaller
3、length : 百分数 | 由浮点数字和单位标识符组成的长度值,不可为负值。其百分比取值是基于父对象中字体的尺寸。

4、<percentage>

用百分比指定文字大小。其百分比取值是基于父对象中字体的尺寸。不允许负值。

默认值为absolute-size的medium值

三、line-height属性

        取值有固定取值,单位px,如100px。还有相对取值,如数字1.5表示是font-size的1.5倍。默认值为normal。也可以是百分比:150%。另外,line-height的取值不能小于0。

四、line-height和font-size的联系

       很多属性比如css属性如boder、width、height虽然我们没有明确指定,但是他们也是默认存在的,采用的是默认值。比如width、height没有指定时,它由内容自动撑开,自动生成一个盒子。line-height没有指定时,他的取值为normal,即由浏览器自动确定,浏览器会根据内容字体的大小选择合适的line-height取值。

        line-height为手动指定时font-size受影响,但是也可以手动指定line-height,指定之后,line-height的变化不会导致font-size的变化,也不会受到font-size的影响。当line-height比font-size小,则会发生字体重叠的现象,当line-height为0时,此时的盒子height也为0,导致背景色消失。

        此外,height属性受到line-height的影响。

        由于盒模型属性height由line-height属性决定撑开,所以当height=line-height时,则会实现单行文本居中

猜你喜欢

转载自blog.csdn.net/weixin_44992737/article/details/130103874