读书人

块级元素(block element)跟内联元素(i

发布时间: 2012-10-26 10:30:59 作者: rapoo

块级元素(block element)和内联元素(inline element)
块级元素生成一个元素框,(默认地)它会填充其父级元素的内容,旁边不能有其他元素。换句话说,他在元素框之前和之后生成了“分隔”符。我们最熟悉的HTML元素是p和div.


内联元素(inline element),也叫行内元素

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


尽管“块”和“内联”这两个词与HTML和XHTML中的块级和行内元素有很多共同点,但也存在一个重要的差别。在HTML和XHTML中,块级元素不能继承自内联元素(即不能嵌套在行内元素中)。但是CSS中,对于显示角色如何嵌套不存在任何限制。

另外提到内联元素,我们会想到有个display的属性是display:inline;这个属性能够修复著名的IE双倍浮动边界问题。

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

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

附:html中的块元素(block element)和内联元素(inline element)分类明细:

块元素(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 客户端脚本

读书人网 >Web前端

热点推荐