1、line-height百分比
line-height的值分以下两种:行高具有继承性,带单位的行高子元素继承的是计算值,不带单位的行高则是直接继承行高属性。
<div class="lineHeightOne">
<div class="children">行高测试</div>
</div>
<div class="lineHeightTwo">
<div class="children">行高测试</div>
</div>
<div class="lineHeightThree">
<div class="children">行高测试</div>
</div>
<div class="lineHeightFour">
<div class="children">行高测试</div>
</div>
.lineHeightOne{font-size:14px;line-height: 26px; background: green;padding:10px} // 行高为26px
.lineHeightTwo{font-size:14px;line-height: 150%; background: green;padding:10px} // 行高为21px
.lineHeightThree{font-size:14px;line-height: 1.5em; background: green;padding:10px} // 行高为21px
.lineHeightFour{font-size:14px;line-height: 1.5; background: green;padding:10px} // 行高为39px
.children{font-size:26px;background: red}
上面代码运行下之后就很清晰,带有单位的行高,子元素继承的是经过计算之后的行高值,也就是父元素本身行高的1.5倍。不带单位的行高,子元素继承的就直接是行高这个属性,也就是2倍与自身的行高值。
2、面向对象
封装:把技能放到一个英雄身上,我们不用管他怎么实现这些,我们只负责使用这些技能就可以了,我们不需要知道他是怎么走路的,我们只需要控制它完成走路这个动作就可以了。 继承:不管是瞎子还是刀妹还是蛮王,他们都是继承与一个模型--人类。 多态:继承与同一个类--人,但是他可以是刀妹,可以是蛮王,可以是上单,可以是打野。
3、继承的几种方式
(1)、类继承,将子类的原型指向父类的实例化对象
现在有父类Person,子类Son,类继承的核心就是Son.prototype = new Person(),这样子类就可以访问父类中定义的属性和方法了,而且因为子类的原型链式父类的实例,所以也可以直接访问到父类原型上的属性和方法。 缺点:如果实例化多个子类的话,某一个子类修改了父类中的引用类型数据(数组、对象),那么另一个实例化的子类读取到的数据也会被改变,多个子类之间就有可能会相互影响。
(2)、构造函数继承,将子类的this重定向到父类
现在有父类Person和子类Son,构造函数继承就是在子类的构造函数中,Person.call(this),这样实例化子类的时候,实际上this这时候指向的就是父类,从而实例化出来的每一个子类都会有一个单独的父类的属性和方法,从而就解决了类继承中子类相互影响的问题。 缺点:因为构造函数继承只是改变了this的指向,而写在父类原型上面的方法只能通过类调用或者父类的实例化调用,所以这种方式的继承访问不到父类原型上的方法。同时,因为每一个子类都会有一份属性和方法,对于内存的占用率就会变大。