行内元素与块级元素

时间:2021-10-18 05:02:03

行内元素与块级元素区别:

(1)块级元素会独占一行,行内元素宽度随元素的内容而变化。

(2)一般情况下,块级元素可以设置 width, height属性,行内元素设置width, height无效。

(3)块级元素可以设置margin 和 padding. 行内元素的水平方向的padding-left,padding-right,margin-left,margin-right 都产生边距效果,但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果。(水平方向有效,竖直方向无效)

行内元素:

  a - 锚点
  abbr - 缩写
  bdo - bidi override
  big - 大字体
  br - 换行
  cite - 引用
  code - 计算机代码(在引用源码的时候需要)
  dfn - 定义字段
  em - 强调
  i - 斜体
  img - 图片
  input - 输入框
  kbd - 定义键盘文本
  label - 表格标签
  q - 短引用
  samp - 定义范例计算机代码
  select - 项目选择
  small - 小字体文本
  span - 常用内联容器,定义文本内区块
  strong - 粗体强调
  sub - 下标
  sup - 上标
  textarea - 多行文本输入框
  tt - 电传文本
  var - 定义变量

块级元素:

  address - 地址
  blockquote - 块引用
  div
  dl - 定义列表
  fieldset - form控制组
  form - 表单
  h1 -h6 标题
  hr - 水平分隔线
  menu - 菜单列表
  noscript - 可选脚本内容(对于不支持script的浏览器显示此内容)
  ol - 有序列表
  p - 段落
  pre - 格式化文本
  table - 表格
  ul - 无序列表

可变元素:

 可变元素为根据上下文语境决定该元素为块元素或者内联元素。
  button - 按钮
  del - 删除文本
  iframe - inline frame
  ins - 插入的文本
  map - 图片区块(map)
  object - object对象
  script - 客户端脚本