【原文转载自 https://segmentfault.com/a/1190000015202771】
学习总结：
1.行内元素一般是内容的容器，块级元素一般是其他容器的容器， 行内元素适合显示具体内容，块级元素适合做布局
块级元素block：独占一行, 对狂傲的属性值生效，如果不给宽度，块级元素就默认显示浏览器的宽度，就是100%宽。
行内元素inine: 可以多个标签存在一行，对宽高属性值不生效，完全靠内容撑开宽高。
行内块元素inline-block:结合行内和块级的优点， 既可以设置宽高，可以让padding和magin生效，又可以和其他行内元素并排。
常见的行内元素有： a input img b strong label button select textarea
常见的块元素有： header form ul ol table article div he aside fighure canvas video audio footer
其中img 和 inoput 是行内块元素。
2. 行内元素与块元素之间的转换：
1.float:当把行内元素设置完float：left/right后，该行内元素的display属性被赋予block值， 且拥有浮动特性。行内元素去除了之间的莫名空白。
2.position:档位行内元素进行定位时， position:absolute与position:fixed都会使得原来的行内元素编程块级元素。
3.display:
块级元转换为行内元素：display：inline
行内元素转换为块元素：display:block
转换为行内块元素：display:inline-block
常用的display可能的值还有 table table-cell table-row table-column flex inline-flex grid
3.一些特性总结：
1.text-align属性对块级元素起作用，对行内元素不起作用
原因是块级标签如果不给宽度，那么就默认为浏览器的宽度，即100%宽， 那么在100%的宽度中居中生效；但是行内元素的宽度完全是靠内容撑开。所以宽度就是内容撑开的宽
所以会计元素是在盒子中间居中了，凡是行内元素的宽就是内容宽，没有可居中的空间，所以txt-align:center既没有作用 但是转换为块级就可以啦
2.块级元素独占一行且跨度会占满父元素的宽度，行内元素不会独占一行，相邻行内元素可以排在同一行，直至一行放不下
3.块级元素可以设置宽高weith和height, 行内元素设置宽高无效， 而且