行元素、块元素、行内块元素

行元素、块元素、行内块元素

一、行内元素(内联元素) inline element

行内元素特性

1. 可以与其它行内元素同处一行，与块元素不行
2. 设置width，height无效
3. 设置行高line-height有效，并且会占用高度位置(相当于该行内元素有了height值，对下面元素的位置有影响，但该行内标签实际height值并没有改变)
4. 设置margin只有左右有效，上下无效
5. 设置padding上下左右都有效，但只有设置左右时元素内文本位置才会发生改变，而设置上下时文本位置不变。

常见的行内元素

a、span、b、i、s、u、abbr、big、small、strong、sub、label、select

二、块级元素 block element

块级元素特性

1. 独霸一行，总是在新一行开始
2. 设置width、height、margin、padding都有效
3. 不设置width时，默认100%
4. 设置了width和height后依然独占一行

常见的块级元素

div、p、ul、li、ol、pre、form、fieldset、table、h1-h6、hr

三、行内块级元素 inline-block

行内块级元素的特性

1. 可以与其它行内元素或行内块元素同处一行
2. 设置width，height有效
3. 设置margin上下左右都有效
4. 设置padding上下左右都有效

常见的行内块级元素

img、input、button