块级元素：块状元素排斥其他元素与其位于同一行，可以设定元素的宽（width）和高（height），块级元素一般是其他元素的容器，可容纳块级元素和行内元素。
行内元素：行内元素不可以设置宽（width）和高（height），但可以与其他行内元素位于同一行，行内元素内一般不可以包含块级元素。行内元素的高度一般由元素内部的字体大小决定，宽度由内容的长度控制。
常见块级元素有：h1,h2,h3,h4,h5,h6,p,div,dl,dt,hr,ol,ul,li,form,pre,table,td,th；
常见内联元素有：em,strong,span,button,input,label,code,select,img,textarea
通过样式display属性来改变元素的显示方式。当display的值设为block时，元素将以块级方式呈现；当display值设为inline时，元素将以行内形式呈现
将div改为行内元素 不换行 缺点： 两个行内元素中间有缝隙但是可以通过margin-left 去掉
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id='app'> <div class="a">aaaa</div> <div class="b">bbbb</div> </div> </body> <style> #app { position: relative; width: 400px; height: 400px; background-color:khaki; } .a { display: inline; background-color: cornsilk; } .b{ display: inline; background-color:lavenderblush ; } </style> </html>span改为块级元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id='app'> <span class="a">aaaa</span> <span class="b">bbbb</span> </div> </body> <style> #app { position: relative; width: 400px; height: 400px; background-color:khaki; } .a { display: block; background-color: cornsilk; } .b{ display: block; background-color:lavenderblush ; } </style> </html>结合前两种优点 display：inline-block 既可以设置宽高，又可以设置padding和margin，又可以排在一行。
