CSS彻底理解行内、块级元素 及display属性转换

最明显的区别就是：块级元素会自动换行，而行内元素不会自动换行

行内元素与块级函数可以相互转换，通过修改display属性值来切换块级元素和行内元素

转换行内元素display：inline
行内元素和其他行内元素都会在一条水平线上排列，不可以设置宽高，宽度高度随文本内容的变化而变化，但是可以设置行高（line-height），同时在设置margin、padding上下无效，左右有效

转换块级元素display：block
块级元素却总是会在新的一行开始排列，各个块级元素独占一行，垂直向下排列块，独占一行可以设置宽高，并且宽度高度以及外边距，内填充都可随意控制。

转换行内块display：inline-block
默认排列方式为从左到右、不自动换行、能够识别宽高

注意：块级元素可以包含行内元素和块级元素，还可以容纳内联元素和其他元素；行内元素不能包含块级元素，只能容纳文本或者其他行内元素。