font-size等语法的继承是什么?
需要提前说明的是:line-height的大小与font-size息息相关,除了指定line-height为多少px,剩下的设置方式都是基于font-size算出来的。 下面逐个讲一讲~
inherit 这个其实没什么说的,继承父元素line-height的值,所以父元素的是多少就是多少。 如果其后代元素不设置line-height 的话,也会是这个值。
length 假设设置 line-height 为20px,那么该行的该行的行高就是20px,与 font-size 无关,不会随着 font-size 做相应比例的缩放。 这个长度值(20px)会被后代元素继承,所有的后代元素会使用这个相同的、继承的 line-height (20px),除非后代元素设定 line-height 。
百分比 假设自身的 font-size 为16px,line-height 设为120%。那么其行高为:16 * 120% = 19.2px。即 line-height 是根据自身的 font-size 计算出来的。 子元素会继承父元素的line-height,那么它继承的是什么呢,百分比(120%)?还是19.2px? 答案是后者,19.2px,即父元素line-height计算后的最终值。
normal line-height 设置为 normal 的时候,行高取决于浏览器的解析,一般是1.2。 与前面不同的是,line-height 设置为 normal 的元素,其子元素不再继承其line-height计算后的最终值,而是根据子元素自身的 font-size 进行计算。
纯数字 如果既想要 normal 的灵活,又想设置一个自定义的值,那就要用 纯数字 啦~ 纯数字方式与 normal 唯一的不同,就是数值的大小,纯数字可以自己随意设定,而 normal 的值是浏览器决定的。:
px是像素单位
px: 基于像素的单位。像素是一种有用的单位,因为在任何媒体上都可以保证一个像素的差别确实是可见的。
em : 一般用来测量长度的通用单位(例如元素周转的页边空白和填充),当用于指定字体大小时,em单位是指父元素的字体大小。
比如
这里的字是24px
如果使用em来指定填充,填充的宽度是相对于DIV元素的字体大小而定的。
pt: 印刷业上常使用的单位,磅的意思。一般也用于页面打印排版。
px是像素单位,em是相对单位,pt是绝对单位。它们各自的好处是:px可以在计算机屏幕上,能达到预期的效果,在打印机和其它的高分辨率设备上,它又能取得所希望的效果。em的优点很多,比如在一个页面上,你给定了一个父元素的字体大小,这样就可以通过调整一个元素来成比例的改变所有元素大小。它可以自由缩放,比如用来制作可伸缩的样式表。pt是一种固定长度的度量单位,是能够使用测量设备测得的长度。绝对单位作用有限,因为它们不能够缩放,通常只用在已经知道是用在哪种输出媒体的情况下才使用。但大多数情况下最好使用相对单位。一般都是用px和em这两种种配搭比较好。