块级元素（块级元素一般当做容器使用，既可以容纳内联元素也可以容纳块级元素）
特点：
1.每个块级元素都是独自占一行，其后的元素也只能另起一行，并不能两个元素共用一行。
2.元素的高度、宽度、行高和顶底边距都是可以设置的。
3.元素的宽度如果不设置的话，默认为父元素的宽度。
4.块级元素对应属性display：block；
常见的块级元素:
（1）div：主要用来进行框架布局。
（2）h1～h6：用来设置不同级别的标题。
（3）p:创建段落，会自动在其前后创建一些空白。
（4）hr:用来创建分隔先。
（5）ol:创建有序列表。
（6）ul:创建无序列表。
行内元素（任何不是块级元素的可见元素都是行内元素。行内元素只能够容纳文本或者行内元素。）
特点：
1.可以和其他元素处于一行，不用必须另起一行。
2.元素的高度、宽度及顶部和底部边距不可设置。
3.元素的宽度就是它包含的文字、图片的宽度，不可改变。
4.行内元素对应属性display：inline；
常见的内联元素:
（1）strong：加粗强调。
（2）em：斜体强调。
（3）s：删除线。
（4）u：下划线。
（5）a：超链接。
（6）span：常用行级，可定义文档中的行内元素。
（7）img：图片。
（8）input:表单。
行级元素与块级元素的转换
如果想将块级元素与行级元素相互转换，该怎么办呢？
可以在css样式中用display:inline将块级元素设为行级元素
同样，也可以用display:block将行级元素设为块级元素
行级-块级元素
如果又想设置高度、宽度、行高以及顶和底边距，又想元素处于一行，该怎么办呢？
此时就可以用display:inline-block将元素设置为行级-块级元素。
块级元素和行内元素的分类
html中的块级元素：
html中的行内元素：
相信大家对行内元素的认识大多是不换行，不能设置宽高，又或者是来自经典的垂直水平居中内联元素的面试题，把line-height设置成父盒子的高度，但在昨天练习切图的过程中，发现将一行内联元素在垂直方向上对齐很困难，特别是包含img元素，于是决定深入了解一下这行内元素的细节
1.分类：内联元素分为替换元素和非替换元素
MDN上对可替换元素是这么说的
翻译过来就是
这些特殊的行内元素，虽然不换行，但可以设置宽高，四周padding和margin
而普通的行内元素（非替换元素，向span，a等）不能设置宽高，四周margin无效，四周padding有效，
但上下padding比较特殊，不会撑大内容区，但会撑大行高(line-height),下面我们细说
！此处注意：虽然替换元素特殊，但也是行内元素，下面介绍行内元素的一些概念
每个行内元素都有一条基线，规则如下
1.非替换元素中的基线是英文字母x的下端，什么意思，如图，红色的就是这个非替换元素的基线
2.替换元素中的基线就是margin-bottom的外沿
有了基线的知识，我们现来说说一行的行内元素是怎么排列的，只有两步
1.找到本行第一个行内元素，确定它的基线
2.找到下一个行内元素，确定它的基线并与第一个基线对齐，以此类推，直到排完本行内的所有行内元素
等一行的行内元素都排完了，这一行的行框就确定了，为什么叫行框，那肯定是把一行的行内元素都包含进去的框嘛，所以说行框的高度就是本行内最高的行内元素的top line 到最低的行内元素的bottom line。
line-height就是行内元素的内容区+padding，也就是一个行内元素的top line 到bottom line的距离
所以设置line-height为父盒子高度的一半就可以把元素挤到中间。
设置行内元素和本行框基线的对齐方式
