block( 块元素 )、inline( 内联元素 ) 的差别是什么?

我们首先要了解,所有的 html 元素,都要么是 block( 块元素 )、要么是
inline( 内联元素 )。下面了解一下 block、inline 各自的特点:

block 元素的特点:

  • 总是在新行上开始;
  • 高度,行高以及顶和底边距都可控制;
  • 宽度缺省是它的容器的 100%,除非设定一个宽度。

inline 元素的特点:

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

我们来详细了解它们的情况。

块元素 (block element)
一般是其他元素的容器元素,块元素一般都从新行开始,它可以容纳内联元素和其他块元素
, 常见块元素是段落标签 ‘P”。“form”
这个块元素比较特殊,它只能用来容纳其他块元素。

如果没有 css 的作用,块元素会顺序以每次另起一行的方式一直往下排。而有了
css 以后,我们可以改变这种 html
的默认布局模式,把块元素摆放到你想要的位置上去。而不是每次都愚蠢的另起一行。需要指出的是,table
标签也是块元素的一种,table based layout 和 css based layout
从一般使用者(不包括视力障碍者、盲人等)的角度来看这两种布局,除了页面载入速度的差别外,没有其他的差别。但是如果普通使用者不经意点了查看页面源代码按钮后,两者所表现出来的差异就非常大了。基于良好重构理念设计的
css 布局页面源码,至少也能让没有 web
开发经验的普通使用者把内容快速的读懂。从这个角度来说,css layout code
应该有更好的美学体验。

你能够把块容器元素 div 想象成一个个
box,或者如果你玩过剪贴文载的话,那就更加容易理解了。我们先把需要的文章从各种报纸、杂志总剪
下来。每块剪下来的内容就是一个
block。然后我们把这些纸块按照自己的排版意图,用胶水重新贴到一张空白的新纸上。这样就形成了你自己独特的文摘快报了。作为一种技术的延伸,网页布局设计也遵循了同样的模式。

内联元素 (inline element)
一般都是基于语义级 (semantic)
的基本元素。内联元素只能容纳文本或者其他内联元素,常见内联元素 “a”。

需要说明的是:inline element
的中文叫法,有多种内联元素、内嵌元素、行内元素、直进式元素。基本上没有统一的翻译,爱怎么叫怎么叫吧。另外提到内联元素,我们会想到有个
display 的属性是 display:inline; 这个属性能够修复著名的 IE
双倍浮动边界问题。

块元素 (block element) 和内联元素 (inline element) 都是 html
规范中的概念。块元素和内联元素的基本差异是块元素一般都从新行开始。而当加入了
css
控制以后,块元素和内联元素的这种属性差异就不成为差异了。比如,我们完全可以把内联元素
cite 加上 display:block 这样的属性,让他也有每次都从新行开始的属性。

可变元素是基于以上两者随环境而变化的,它的基本概念就是他需要根据上下文关系确定该元素是块元素或者内联元素。可变元素还是属于上述两种元素类别,一旦上下文关系确定了他的类别,他就要遵循块元素或者内联元素的规则限制。

html 标签的 block、inline 分类明细:

块元素 (block element)

  • address – 地址
  • blockquote – 块引用
  • center – 举中对齐块
  • dir – 目录列表
  • div – 常用块级容易,也是 css layout 的主要标签
  • dl – 定义列表
  • fieldset – form 控制组
  • form – 交互表单
  • h1 – 大标题
  • h2 – 副标题
  • h3 – 3 级标题
  • h4 – 4 级标题
  • h5 – 5 级标题
  • h6 – 6 级标题
  • hr – 水平分隔线
  • isindex – input prompt
  • menu – 菜单列表
  • noframes – frames 可选内容,(对于不支持 frame
    的浏览器显示此区块内容
  • noscript – 可选脚本内容(对于不支持 script 的浏览器显示此内容)
  • ol – 排序表单
  • p – 段落
  • pre – 格式化文本
  • table – 表格
  • ul – 非排序列表

内联元素 (inline element)

  • 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 – 定义变量

可变元素

  • applet – java applet
  • button – 按钮
  • del – 删除文本
  • iframe – inline frame
  • ins – 插入的文本
  • map – 图片区块 (map)
  • object – object 对象
  • script – 客户端脚本

发表评论

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