4.1 行内元素

简介

  例子: span a b strong i em s br u textarea input select lable img sup big small

  内联元素是指本身属性为display:inline
的元素。因为它自身的特点，我们通常使用行内元素进行文字、小图标（小结构）的搭建。

行内元素的特点

  1.不独占一行

  2.排列方式:从左往右

  3.设置宽高不起作用 如要起作用 需要转换为块/行内块

  4.不设置宽高是它的本身内容的宽高

   5.天数自带 display:inline

  6.行内元素里不能嵌套块级元素（特殊a）

4.2 块级元素

简介

  例子: div h1-h6 hr menu ol ul li dl dt dd table p form

  本身属性为 display:block的元素；因为它自身的特点，我们通常使用块级元素进行大布局（大结构的搭建）

块级元素的特点

  1.独占一行,每一个块级元素都会从新的一行重新开始

  2.排列方式:从上往下

  3.可以设置宽高以及盒子模型的其他属性

  4.不设置宽高的情况下 他的宽度和父元素的宽度 它的高度是本身内容的高度

  5.天生自带display：block

  6.ul ol 下面只能是li dl 下面只能是dt dd

  7.p里面不能嵌套任何的块级元素 包括它自己本身 可以嵌套行内元素

4.3 行内块

简介

  行内块状元素综合了行内元素和块状元素的特性，但是各有取舍。因此行内块状元素在日常的使用中，由于其特性，使用的次数也比较多。

行内块元素的特点

  (1)不自动换行

  (2)能够识别宽高

  (3)默认排列方式为从左到右

4.4 元素之间的互相转换

行内元素 => display:inline

块级元素 => display:block

行内块元素 => display:inline-block