`

块级(block)元素和行内(inline)元素的区别(转)

    博客分类:
  • css
阅读更多
转自:http://www.cnblogs.com/stormtea/articles/1958620.html

对于 HTML 等文档类型,如果使用 display 不谨慎会很危险,因为可能违反 HTML 中已经定义的显示层次结构。block和inline是display的常用属性。
block 此元素将显示为块级元素,此元素前后会带有换行符。inline是display默认属性,此元素会被显示为内联元素,元素前后没有换行符。



下面是 block 级对象和 inline 级对象的基本区别:
  • Block 级对象会自然地水平充满其父容器,因此没有必要为之设置 100% 宽度属性
  • Block 级对象的起始摆放位置是其父容器的左上边界,并顺排在其前面的兄弟 Block 对象的下方(除非设置 float 或绝对位置)
  • Inline 级对象会忽略其宽度和高度设置
  • Inline 级对象会随着文字排版,并受排版属性的影响(如 white-space, font-size, letter-spacing)
  • Inline 级对象可以使用 vertical-align 属性控制其垂直对齐,block 级对象不可以
  • 一个设置为 float 的 inline 对象将变成 block 对象
  • 大小: 12.7 KB
分享到:
评论

相关推荐

    关于块级元素和行内元素

    本文将从块级元素和行内元素的定义、特点、区别、应用场景等方面,对它们进行详细的讲解。 块级元素(Block Element) 块级元素是指占据整个横向宽度的元素,它们可以包含其他元素,例如 div、h1-h6、p、ul、ol 等...

    行内元素和块级元素 displayDemo.html

    在HTML中,元素被分为两种主要类型:行内元素(Inline Elements)和块级元素(Block-level Elements)。这两种元素在页面布局中起着至关重要的作用,它们各自有不同的特性和使用场景。 1. 行内元素(Inline ...

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

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

    HTML行内元素与块级元素有哪些及区别?

    想起之前工作面试时,面试官问的一个问题:行内元素有哪些,和块级元素有什么区别?这是一道蛮基础的面试题,但是很多初学者平时只注重标签语义,忽视了标签行内和块级的特性, 因此对于上述问题很有可能答不上来...

    CSS文档流与块级元素(block)、内联元素(inline)

    通过本文的介绍,我们了解了文档流的基本概念以及块级元素和内联元素的区别。这些基础知识对于理解和掌握CSS布局至关重要。在实际开发中,灵活运用这些元素的不同特性可以帮助我们构建更加美观和实用的网页布局。

    行内块级元素.txt

    理解行内元素和块级元素的差异是前端开发的基础之一。合理利用这些元素可以帮助开发者更好地组织网页结构、控制布局,并最终实现美观且易于维护的网站设计。在实际应用中,开发者还可以结合CSS对这些元素进行更细致...

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

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

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

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

    display:inline、block、inline-block的区别(转的)

    本篇文章将深入探讨`display:inline`、`display:block`以及`display:inline-block`这三种主要的显示模式之间的区别,帮助你更好地理解它们在实际开发中的应用。 首先,我们来看`display:inline`。这种模式使得元素...

    CSS文档流与块级元素,css

    - **内联元素(Inline Elements)**:与块级元素相反,内联元素不会独自占据一行,它们可以在同一行内与其他内联元素并排显示。内联元素主要用于文本内容,如`<a>`、`<span>`、`<img>`等。内联元素不能设置宽度和...

    css盒模型和块级、行内元素深入理解

    其中,盒模型和元素的分类(块级元素和行内元素)是理解页面布局的基础。本文将深入探讨这两个概念。 首先,盒模型是CSS中的核心概念,它定义了元素如何占用空间和与其他元素交互。每个HTML元素都可以被视为一个...

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

    HTML 元素详解 - 块元素与行内元素 在 HTML 中,元素可以分为两大类:块元素(block element)和行内元素(inline ...在 HTML 中,块元素和行内元素都是非常重要的概念,理解它们的区别和用法是掌握 HTML 的基础。

    全面了解行内元素与块级元素的区别

    总结起来,行内元素和块级元素的区别主要体现在以下几个方面: 1. 默认显示方式不同:块级元素默认独占一行,而行内元素则不会独占一行,它们在水平方向上连续排列。 2. 宽度高度设置不同:块级元素可以设置宽度和...

    css中行内元素和块级元素的区别

    此外,`display: inline-block`还可以创建一种“行内块级元素”,它结合了行内元素和块级元素的特性,可以在一行内显示,同时可以设置宽高和内外边距。 5. **总结** CSS中的行内元素和块级元素是网页布局的基础,...

    block 和 inline 的区别

    块级元素还可以包含其他块级元素和内联元素,但某些特定元素(如`<p>`)只能包含内联元素,不允许嵌套块级元素。 相比之下,内联元素(如`<span>`、`<a>`、`<strong>`、`<em>`、`<label>`、`<input>`、`<select>`、...

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

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

Global site tag (gtag.js) - Google Analytics