关于行高line-height相对单位继承问题

行高的常见表达方式有以下三种:

        /* 方法一 2em */
        .demo1 {
            font: 20px/2em 'microsoft yahei';
            background: #f00;
        }
        /* 方法二 200% */
        .demo2 {
            font: 20px/200% 'microsoft yahei';
            background: #0f0;
        }
        /* 方法三 2 */
        .demo3 {
            font: 20px/2 'microsoft yahei';
            background: #00f;
        }
        p {
            font-size: 40px;
        }

其中方法1与方法2是相同的,都是直接继承父元素的已经计算好的行高值,本身的font-size不影响行高的值。白话说就是,‘拿过来就用’,举个不恰当的例子就好比是,小明继承了爸爸的房子,直接就帮进去住

方法3则是只继承行高的数字然后结合自身的font-size大小再计算。白话就是,‘拿回来还得再加工’,比如小明继承了爸爸的房子,感觉房间布置不是自己的style,所以根据自身的喜好重新装修了下

show you my code (原谅我的Chinglish)




    
    line-height
    


    

demo1

demo2

demo3

关于行高line-height相对单位继承问题_第1张图片
line-height.png

好了,先写这么点,以后会把行高的其他内容补全

你可能感兴趣的:(关于行高line-height相对单位继承问题)