htm line-height

line-height行高：文本样式，即可以用在块元素，也可以用在内联元素。（因为块和内联都可以直接包含文本）

也可以设置在文字样式font中，如font-size/line-height（font: normal 12px/24px Arial, Helvetica, sans-serif;）

div {

line-height:1em;

font-size:10mm;

background:yellow

}

span{

background:red;

}

<div> 

  <span>ez编程网ez编程网ez编程网ez编程网ez编程网ez编程网ez编程网ez编程网ez编程网ez编程网ez编程网ez编程网ez编程网ez编程网ez编程网ez编程网ez编程网</span>

</div>

当line-height:1em，行间距的大小为font-size的1倍，所以行间不会出现yellow的背景。

 当line-height:2em，效果图如下，行间距：上+font-size+下，即文本居中于行间距。

 

注意：块元素设置line-height会把块元素height撑大或压小，但是内联元素的height只收到自身内容大小的影响，不会应为linet-height的设置而发生变化。

 

div{line-height:1em}

body{font-size:small}

<div> 

  <h2>ez编程网ez编程网ez编程网ez编程网ez编程网ez编程网ez编程网ez编程网ez编程网ez编程网ez编程网ez编程网ez编程网ez编程网ez编程网ez编程网ez编程网</h2>

</div>

会出现h2文本挤压在一起。

因为div继承了body的font-size，div中的所有元素的行间距都基于div的font-size。

所以h2的行间距就是small大小。

我们希望h2的line-height是他自己的font-size的1倍，h1也是它自己的font-size的1倍。

line-heigh有些特殊，可以只用一个数字代替相对值（比如em或%）来设置line-height的值。

如果只用数字1，就是指div中的元素的行间距为他们自己的font-size的1倍，而不是div的font-size的1倍。

<style type="text/css">

div{line-height:1}

body{font-size:small}

</style>

<div> 

  <h1>ez编程网ez编程网ez编程网ez编程网ez编程网ez编程网ez编程网ez编程网ez编程网ez编程网ez编程网ez编程网ez编程网ez编程网ez编程网ez编程网ez编程网</h1>

  <h2>ez编程网ez编程网ez编程网ez编程网ez编程网ez编程网ez编程网ez编程网ez编程网ez编程网ez编程网ez编程网ez编程网ez编程网ez编程网ez编程网ez编程网</h2>

</div>

 

CSS继承

CSS继承指的是子标记会继承父标记的所有样式风格，并可以在父标记样式风格的基础上再加以修改，产生新的样式，而子标记的样式风格完全不会影响父标记。

css继承的体现，height、padding、margin等是不继承的，继承的有例如：color, line-height, font-size, font-family等，多数都是文本有关的样式。

 灰色的代表无法继承的，彩色的代码已经继承的。