html的块级、内联、内联块级元素基础

概念

块级：block

内联：inline

内联块级：inline-block

 

在html元素中，元素会有display属性

display属性默认值是block，那么该元素是块级元素。

display属性默认值是inline，那么该元素是内联元素。

没有元素的display默认值是inline-block。

display属性值可以被设置，比如可以把块级元素div的display的值设成inline，那么它就变成了内联元素，不再独行显示。

 

特征

1.块级元素

  独占一行。

  可设置width，height，margin，padding。

  内部可包含块级或内联元素。

2.内联元素

  和其他inline元素同行显示。

  设置widht，height，margin-top，margin-bottom，padding-top，padding-bottom无效，可以设置margin-left，margin-righ，padding-left，padding-right。

  内部可包含块级或内联元素，内部包含块级元素时，该块级元素继续保持独行显示，下一个内联元素会换行显示。

3.inline-block

  和其他inline元素同行显示。

  和块级元素一样可设置width，height，margin，padding。

  内部可包含块级或内联元素，内部包含块级元素时，该块级元素会在内联元素的内部独行显示，不会影响下一个内联元素的同行显示。

  

常用的块级元素

div，form，p，table，h1~h6，hr，dl，ol，ul，pre等

 

常用的内联元素

a，img，input，span，br，select，strong，em，textarea，label等