内联元素(inline element)

内联元素又名行内元素(inline element),中文叫法有多种,如:内联元素、内嵌元素、行内元素、直进式元素等。和其对应的是块元素(block element),都是html规范中的概念。内联元素的显示,为了帮助理解,可以形象的称为“文本模式”,即一个挨着一个,都在同一行按从左至右的顺序显示,不单独占一行。而当加入了css控制以后,块元素和内联元素的这种属性差异就不成为差异了。比如,我们完全可以把内联元素加上display:block这样的属性,让它也有每次都从新行开始的属性,即成为块元素同样我们可以把块元素加上display:inline这样的属性,让它也在一行上排列。

内联元素在一个文本行内生成元素框,而不会打断这行文本。内联元素最好的例子就是XHTML中的a元素。strong和em也属于内联元素。这些元素不会在它本身之前或之后生成“分隔符”,所以可以出现在另一个元素的内容中,而不会破坏其显示。

通过css:display:inline我们可以把元素转换成内联元素。

对行内元素设置宽度width和高度height无效。我们可以通过line-height来设置高度。设置margin和padding只有左右有效,上下无效。虽然元素范围是增大了,但是对元素周围的内容是没影响的!

特点

    • 和其他元素都在一行上;
    • 高度、行高和顶以及底边距都不可改变;
    • 宽度就是它的文字或图片的宽度,不可改变。

总的来说,内联元素一般都是基于语义级(semantic)的基本元素,它只能容纳文本或者其他内联元素,通常被包括在块元素中使用,常见内联元素有“a、b、br”等。

常见的内连元素

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

发表评论

电子邮件地址不会被公开。 必填项已用*标注