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时，则会实现单行文本居中。