【原文转载自 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 hr aside fighure canvas video audio footer
其中img 和 input 是行内块元素。
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, 行内元素设置宽高无效， 而且块级元素即使设置宽高也还是独占一行。 注意当块级元素没有明确指定width和height时，块级元素的尺寸由内容确定， 当指定了宽高，内容超出块级元素的尺寸就会溢出，这时候块级元素呈现什么行为要看overflow值（visible hidden scroll auto）
4.块级元素可以设置margin和padding属性，行内元素水平方向的margin和padding（如magin-leftpadding-right）可以产生边距效果，但是垂直方向的margin-top、margin-bottom 不起作用。
5.行内元素的pading-top和padding-bottom会起作用，不过就像脱离了标准流一样, 并不会占据位置，并且还会把其他元素给盖住了。但是，如果行内元素没有内容，padding-top、padding-bottom将不起作用。如果想要起作用，只需要给padding-left或者padding-right设置一个值，或者当行内元素有内容时就会起作用。
6.当行内块元素inline-block碰到同类（inline、inline-block）时，谁的margin、padding或者line-height大就听谁的。除非他是行内元素inline,因为行内元素inline的margin是不起作用的，且inline的padding是不占空间的。
7.行内元素inline和行内块元素inline-block会引起间距的空格，这个间距是换行或者回车导致的，有以下解决办法
1.将空格删除，放到一行
2.在空格代码中加入注释
3.设置margin-left为负值，但是每个浏览器的间距不一样，所以基本上不用这种方法。
4.给父元素增加“font-size：0px”
5.给父元素增加letter-spacing负值，然后通过子元素清除letter-spacing值