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

时间:2020-6-28 作者:admin


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

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

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:87074139@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。