CSS之 块、行内、行内块元素

块元素

独占一行 如h1-h6、p、div、ul、ol、li等；

​ 宽高内外边距可以调；

​ 宽度默认是父级宽度100%；

​ 都是容器盒子，里面可以放行内或块级元素。

​ 注意点：文字类元素如p、h1-h6里面不能放块元素div

行内元素

（也叫内联元素）一行可以放多个 如 a、span、strong、b、em、i、del、s、ins、u等

​ 相邻行内元素在一行上，一行可以显示多个；

​ 宽高直接设置是无效的；

​ 默认宽度就是本身内容宽度；

​ 行内元素只能容纳文本或其他行内元素。

​ 注意点：a里面不能放a，a里面可以放块级元素

• 行内元素为了照顾兼容性，尽量只设置左右内外边距（一行有多个行内元素情况下），不设置上下内外边距，因为设置了上下也不生效，除非转化为行内块或块级元素才可以。
  

行内块元素

同时具有块元素和行内元素的特点，如img、inptut、td

​ 和相邻行内元素（行内块）在一行上，但是之间有空白缝隙。一行可以显示多个

​ 默认宽度是本身内容宽度

​ 高度、行高、内外边距都可以控制（块元素特点）

tip

• 把行内元素转换为块元素 用 display:block;

• 把块元素转换为行内元素 用 display:inline;

• 转换为行内块元素 用 display:inline-block;