`
deng131
  • 浏览: 672673 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

块级元素(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 – 客户端脚本
分享到:
评论

相关推荐

    html中的行内元素和块级元素有哪些.pdf

    可以通过设置 display 属性来转换行内元素和块级元素。例如: * 设置 display:block; 可以将行内元素转换为块级元素。 * 设置 display:inline; 可以将块级元素转换为行内元素。 * 设置 display:inline-block; 可以...

    HTML+CSS中完全的行内元素(inline element)和块元素(block element)

    了解HTML中行内元素和块元素的区别对于网页设计至关重要。这些元素不仅决定了网页内容如何布局,还影响了页面的结构和可读性。通过合理选择合适的元素类型,开发者可以更有效地控制页面布局,提高用户体验。同时,...

    浅谈CSS块级元素与行内元素(内联元素)的区别和联系

    在css盒子模型中,我们提到了html元素中的块元素(block element)和内联元素(inline element)。那么它们究竟是什么呢? 其实,这两种元素都是html规范中的概念。块元素(block element)一般是其他元素的容器元素...

    css块状元素与内联元素以及inline-block

    CSS 块状元素、内联元素和 inline-block elementos CSS 中的块状元素(Block Elements)和内联元素(Inline Elements)是两种基本的元素类型,它们在网页布局和样式设计中扮演着非常重要的角色。块状元素和内联元素...

    进一步理解CSS编程中的块级元素和行内元素

    Inline element 内联元素通俗点来说就是文本的显示方式,与块级元素相反,内联元素的高度宽度都是不可以设置的,其宽度就是自身文字或者图片的宽度。我们常用到的、、都属于内联元素。内联元素的显示特点就是像文

    块级元素和内联元素及可变元素汇总

    在HTML中,元素的布局和显示方式主要分为两种类型:块级元素(Block Element)和内联元素(Inline Element)。这两种元素具有不同的特性,对网页的结构和样式有着重要影响。 **块级元素**是HTML中最基本的构建单元...

    详解HTML常用的标签中行内元素和块级元素

    块级元素和行内元素的不同主要体现在它们的布局方式上,以及如何与周围的元素交互。 首先,块级元素(block element)的特性是它们会独占一行显示,其后自动换行,好像一个盒子一样,占据一整行空间。块级元素可以...

    重要知识XHTML标签的嵌套规则.pdf

    不能随意嵌套,例如,不应该将一个块级元素(block element)嵌套在内联元素(inline element)中,反之亦然。这是因为块级元素通常占据一整行,而内联元素则并排显示在同一行内。 块级元素和内联元素的主要区别...

    《网友设计与开发》中块元素与行内元素详解

    下面我们将对块元素和行内元素进行详细的介绍。 块元素(block element) 块元素是指占据一整行空间的元素。块元素通常具有以下特点: * 占据一整行空间 * 可以设置宽高、边框、背景色等样式 * 可以包含其他元素 ...

    display:inline-block的实际应用

    `display:inline-block` 是 `display` 的一个值,它结合了块级元素(block-level element)和内联元素(inline element)的一些特性,为网页布局提供了更灵活的选择。在本篇文章中,我们将深入探讨 `display:inline-...

    html 块级标签与内联标签的区别

    2. Inline element: 指依附其他块级元素存在, 紧接于被联元素之间显示, 而不换行. 常用的内联元素包括: img, span, li, br等; 3. Top-level element: 包括html, body, frameset, 表现如Block-level element, 属于...

    解决layui的input独占一行的问题

    块级元素(block-level element)通常表现为整个新行,如div、p等,而行内元素(inline element)则不会独占一行,如span、a等。在layui中,input默认被设计为块级元素,因此它会独占一行。而button默认也是块级元素...

    块状元素与内联元素大全

    在HTML中,根据元素的默认显示方式,可以将所有的HTML标签大致分为两大类:块状元素(Block-level Element)与内联元素(Inline Element)。这两种类型的元素在网页布局中扮演着重要的角色,并且对前端的开发设计...

    display属性介绍和使用

    * Display 属性只能应用于块元素和内联元素,不能应用于替换元素(如 img、input 等)。 * Display 属性的值不能与其他样式属性同时使用,例如不能与 `float` 属性同时使用。 * Display 属性的值可能会影响元素的...

    div嵌套 img 空白解决方法

    这个问题的出现,主要是因为HTML中的div元素默认是块级元素(block-level element),而img元素则是内联元素(inline element)。内联元素之间的空白(如换行符、空格)会被浏览器解释为间隙,从而在图片之间形成了...

    span设CSS样式总是不起作用的解决方法

    但是,当涉及到布局属性时,如宽度、高度和边距,需要确保 `span` 已被正确转换为块级元素或使用内联块级元素(`display: inline-block;`)。 最后,`<span>` 标签的设计初衷是为了进行文本级别的样式控制和结构化...

Global site tag (gtag.js) - Google Analytics