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

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

一、行内元素(内联元素) 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

三、行内块级元素

行内块级元素的特性

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

常见的行内块级元素

img、input、button

猜你喜欢

转载自blog.csdn.net/weixin_42043532/article/details/106965235