块级元素和行内元素

Posted 2020-09-19

块级元素：块元素又名块级元素(block element)，和其对应的是内联元素(inline element)，都是html规范中的概念。块元素和内联元素的基本差异是块元素一般都从新行开始，相邻的块级元素将会在不同行显示。而当加入了css控制以后，块元素和内联元素的这种属性差异就不成为差异了。比如，我们完全可以把内联元素加上display:block这样的属性，让它也有每次都从新行开始的属性，即成为块元素。同样我们可以把块元素加上display:inline这样的属性，让它也在一行上排列。

特点：

①总是在新行上开始；

②高度，行高以及外边距和内边距都可控制；

③宽度缺省是它的容器的100%，除非设定一个宽度。

④它可以容纳内联元素和其他块元素

常见块元素(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 - 非排序列表（无序列表）

行内元素：内联元素（html规范中的概念）英文：inline element，其中文叫法有多种，如：内联元素、内嵌元素、行内元素、直进式元素等。基本上没有统一的翻译。另外提到内联元素，通常会涉及到的属性是display:inline；这个属性能够修复著名的IE双倍浮动边界问题。内联元素的显示，为了帮助理解，可以形象的称为“文本模式”，即一个挨着一个，都在同一行按从左至右的顺序显示，不单独占一行。而当加入了css控制以后，块元素和内联元素的这种属性差异就不成为差异了

特点

1、和其他元素都在一行上；

2、高度、行高和顶以及底边距都不可改变；

3、宽度就是它的文字或图片的宽度，不可改变。

常见的内联元素：

1 a – 锚点

2 abbr – 缩写

3 acronym – 首字

4 b – 粗体(不推荐)

5 bdo – bidi override

6 big – 大字体

7 br – 换行

8 cite – 引用

9 code – 计算机代码(在引用源码的时候需要)

10 dfn – 定义字段

11 em – 强调

12 font – 字体设定(不推荐)

13 i– 斜体

14 img – 图片

15 input – 输入框

16 kbd – 定义键盘文本

17 label – 表格标签

18 q – 短引用

19 s – 中划线(不推荐)

20 samp – 定义范例计算机代码

21 select – 项目选择

22 small – 小字体文本

23 span – 常用内联容器，定义文本内区块

24 strike – 中划线

25 strong – 粗体强调

26 sub – 下标

27 sup – 上标

28 textarea– 多行文本输入框

29 tt – 电传文本

30 u – 下划线

31 var – 定义变量

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