HTML常见元素
什么是元素：
元素和标签通常描述的就是同样的意思，但严格的来讲html元素包含了开始和结束标签。
元素分类：
行内元素（不可以设置宽高、margin左右无效padding设置上下左右都有效）
块级元素（可以设置宽高、margin与padding都有效、自动换行）
行内块（可以设置宽高、margin与padding都能够识别、切不会自动换行）
应用场景：
行内元素如进行内容的显示内容自适应宽高、也可以多个行内元素同处一行
块级元素如内容需要设置左右边距、独占一行
行内块：可以满足既需要行内元素特点也需要块级元素的部分如让内容上下左右居中
如何转换：
display:inline可以转换为行内元素
display:block;可以转换为块级元素
display: inline-block 可以转换为行内块;
常见的元素：
常用的行内元素：a、b、em、i、label、span
常用的块元素：div、p、ol、ul、dl、form、h1~h6、menu、table
常见的行内块：button、input、textarea、select、img
嵌套关系：
块级元素可以包含行内元素
块级元素可以包含块级元素（例外：p不能包含div）
行内元素一般不能包含块级元素（例外：a可以包含）（？）
盒模型
什么是盒模型：
盒模型（内容（content）,内边距（padding）,边框（border）,外边距（margin））
这里做个比喻：content:比喻在网上买了几个鸡蛋；
padding：比喻快递员包装鸡蛋用的防撞纸的距离，把鸡蛋牢牢的包裹起来，以免碰撞；
border:外面使用包装箱的厚度；
margin:一个包装箱和另一包装箱的距离；
margin(外边距)：：比喻成包装箱和包装箱的距离
border(边框)：比喻成包装箱子
盒模型分类：
标准盒模型：content不包含其他部分
怪异盒模型：content包含了border和padding
区别：
标准：
根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的；即在标准模式下的盒模型，盒子实际内容（content）的width/height=我们设置的width/height;盒子总宽度/高度=width/height+padding+border+margin。
怪异（ie盒模型）：
在该模式下，浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和；即在怪异模式下的盒模型，盒子的（content）宽度+内边距padding+边框border宽度=我们设置的width(height也是如此)，盒子总宽度/高度=width/height + margin = 内容区宽度/高度 + padding + border + margin。
面试问题:
https://www.imooc.com/article/68238
Line-height
什么是line-height：
line-height 属性设置行间的距离（行高）。
“行高”顾名思意指一行文字的高度。
不允许有负值
可能的值：
Normal 默认。设置合理的行间距. line-height: Normal（font-size * 1.2）
Number 设置数字，此数字会与当前的字体的尺寸 （font-size * Number）相乘来设置行间距
Length 设置固定的行间距。line-height: 20px;
百分比% 基于当前字体尺寸的百分比行间距。（font-size * 100%）
Inherit 规定应该从父元素继承 line-height 属性的值。
行高的垂直居中性：
行高还有一个特性，叫做垂直居中性。line-height的最终表现是通过 line boxes实 现的，而无论line boxes所占据的高度是多少（无论比文 字大还是比文字小）， 其占据的空间都是与文字内容公用水平中垂线的。
使用场景：
css中起高度作用的应该就是height以及line-height了吧！如果一个标签没有定义 height属性(包括百分比高度)，那么其最终表现的高度一定是由line-height起作用， 即使是IE6下11像素左右默认高度bug也是如此。
<!-- html代码： -->
<div style="font-size:20px; line-height:0; border:1px solid #cccccc; background:#eeeeee;" class="test1">测试</div>
<div style="font-size:0; color: #000; line-height:90px; border:1px solid #cccccc; background:#eeeeee;margin-top: 50px;" class="test2">测试</div>
看test1的结果，此时line-height的高度为0，但是它是以文字的水平中垂线对称分布的。这一重要的特性可以用来实现文字或图片的垂直居中对齐。
行高在文章显示中的应用 一般社交型的网站都会有发博文或写日志的功能，其中发表后的文章显示也是有学问的，其中之一就是line-height行高。
首先要知道行高的几种表示方法：px/em，或normal，或百分值，或数值，或inherit继承。
在显示文章的box里，px的表示方法首先是要被淘汰的。因为文章里面的文字是有大有小的，使用px定值，由于继承性，无法实现根据文字大小自动调整间距，会出现大号文字重叠的现象。normal也是不行的，一般文章显示最好是650像素的宽度，1.5倍的行距较好。一般浏览器的normal值在1~1.2之间，使用normal必然文字间距过小，阅读吃力。百分值也有继承性，但是有个很搓的办法可以实现文字间距自动适应于文字的大小，那就是使用“*”通配符，例如：.article_box *{line-height:150%;}就不会出现文字重叠的情况了。网易博客就是使用的这个方法，下图为证： 为什么说这个方法搓呢，使用“*”通配符大大增加了css的渲染，效率低，而且有更好的方法，就是使用数值。150%虽然和1.5在值上是一样的，但是它们也是有差别的，差别在于继承性，使用百分比会计算line-height的值，然后以px像素为单位继承下去，而1.5则是先继承1.5这个值，遍历到了该标签再计算去line-height的像素值。所以同样的效果只需要.article_box{line-height:1.5;}就可以实现了。
使用行高代替高度避免haslayout 在某些情形下，line-height可以和height互换，因为实现的效果一样。都能撑开一 个高度，然而这两个css属性有一个较隐蔽的差异，就是使用height会使标签 haslayout，而使用line-height则不会。以前只有IE6的时候曾流行使用height清除 浮动，就 是利用了IE下height使haslayout的属性。但有时候，haslayout 并不需要，反而要避免。
其原因在于：IE6，IE7下，类似inline-block属性的元素里如果有block属性的元素，如果该block haslayout，则该标签会冲破外部inline-block的显示而宽度100%显示，从使按钮自适应文字大小的效果失效，解决方法就是使用line-height代替height。
上图中第一个标签使用height定高，结果宽度直接100%显示；第二个标签使用line-height定高，结果很规矩，自适应与内部文字大小。其代码如下：
css部分：
.out{display:inline-block; background:#a0b3d6; margin-top:20px;}
.in1{display:block; height:20px;}
.in2{display:block; line-height:20px;}
html部分：
<span class="out">
<span class="in1">height:20px;</span>
</span>
<span class="out">
<span class="in2">line-height:20px;</span>
</span>
