块级元素 一般都是新起一行，可以容纳行内元素和其他块级元素；
行内元素 一般都是语义级别的基本元素，一般只能容纳文本或者其他行内元素。
二、块级元素和行内元素的区别
1、块级元素会独占一行，其宽度自动填满其父元素宽度；行内元素会排列到同一行里，其宽度随元素的内容变化而变化。
2、块级元素可以设置宽高；行内元素设置宽高无效。
3、块级元素可以设置margin，padding属性；行内元素的水平方向的padding会有边距效果，但是竖直方向的padding没有效果。
常用块级元素列表：
<div> 定义文档中的分区或节
<h1>、<h2>、<h3>、<h4>、<h5>、<h6> 定义标题，数字越小字体越大越粗
<p> 段落标签
<ul> 定义无序列表
<ol> 定义有序列表
<li> 定义列表项目
<dl> 定义列表
<dt> 定义列表中的项目
<dd> 定义列表中的条目
<hr> 创建一条水平线
常用行级元素列表：
<span> 组合文档中的行内元素
<i> 倾斜文本
<em> 定义为强调的内容
<b> 字体加粗
<strong> 语气更强的强调内容
<a> 标签可定义锚
<img> 嵌入图片
<input> 输入框
<select> 创建单选或多选菜单
<textarea> 多行文本输入框
<button> 按钮标签
<sub> 下标文本
<sup> 上标文本
1.下表列出了内联元素和块级元素的主要区别
块元素：不管内容多少，块元素都会在浏览器中独占一行。可设置宽高，如果不设置宽高那么它的宽度是100%（占满父级元素一整行）
缺点：1.相邻元素垂直。相邻外边距会重叠。margin-bottom和margin-top重叠（重叠之后的值是两个值中的最大值）
第一种解决方案：原理bfc相关
2.父子的相邻，父元素的margin-top和子元素的margin-top发生重叠 （重叠之后的值是两个值中的最大值）
关于父子相邻的解决方案：
第一种解决方案.取消相邻，给父元素设置border或者padding-top 让相邻之间有间隔。
第二种解决方案，父元素加overflow:hidden属性 -- 原理bfc相关
块元素包括：div， h1-h6 ， p ，ul，li，ol， dl，dt, hr，form,table ，tr，td
行内元素：内容决定所占空间的多少，内容多少就占多少空间。不能设置宽高（默认宽高是0）。margin垂直方向无效（margin-top,margin-bottom）,如果设置垂直方向用line-height属性。
多个行内元素排列在一起，他们之间会出席空格。
行内元素包括：font , span, b , i , u, sub, sup, a ,
标红为常见的块元素和行内元素。
行内块：共享一行，可设置宽高,多个行内元素排列在一起，他们之间会出席空格。可设置margin,padding属性。集合了块和行内的所有优点。
行内块元素包括：img,input
注意：设置两个并排的div.一个width:20%,一个width:80%.用display:inline-block 让两个div并排，会使右侧的div向下排列
效果图：
产生该问题的原因是：div1+div2的宽度：100%.但是display:inline-block 的设置会使两个div之间有空格。width就为100%再加上空格 大于 父级的宽度，所以会折行。
处理方式：将div1和div2之间的空格去掉
text-align这个属性在水平方向上对行内（inline），行内块(inline-block)以及文字都起作用（行内元素或行内块元素设置水平居中用text-align属性）
行内元素：垂直居中用line-height属性
行内块：设置垂直居中，不能line-height会出问题，应该用vertical-align.多个行内块元素并排，同时设置居中
同级中找设置一个最高的行内块元素(这个行内块元素内容为空，仅仅用来做对齐的标尺)，让其他元素向它对齐。
块元素：
块元素水平居中：用margin-left和margin-right设置为auto的方式 类似：margin:0 auto
块元素水平垂直居中：
情况1子级元素定宽定高(宽高各为100px)：
情况2：子级元素宽高不定：
第一种：
第二种：
块元素：display:block
行内：display:inline
行内块：display:inline-block
让块消失：display:none（元素结构还在，但是在页面不显示，也不占位置）
vertical-align属性：垂直方向的对齐方式，对齐依据找到同级别最高的元素，以该元素为参照进行vertical-align的设置。
值：top,middle,bottom
