块元素(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这样的属性，让他也有每次都从新行开始的属性。
可变元素
是基于以上两者随环境而变化的，它的基本概念就是他需要根据上下文关系确定该元素是块元素或者内联元素。可变元素还是属于上述两种元素类别，一旦上下文关系确定了他的类别，他就要遵循块元素或者内联元素的规则限制。
转载至http://www.52css.com/article.asp?id=227
分享到：
相关推荐
在HTML与CSS中，元素被分为两大类：行内元素（inline element）和块元素（block element）。这两种类型的元素有着不同的显示特性和布局行为，了解它们的区别对于网页设计者来说至关重要。 #### 行内元素（inline ...
CSS 块状元素、内联元素和 inline-block elementos CSS 中的块状元素（Block Elements）和内联元素（Inline Elements）是两种基本的元素类型，它们在网页布局和样式设计中扮演着非常重要的角色。块状元素和内联元素...
在css盒子模型中，我们提到了html元素中的块元素（block element）和内联元素（inline element）。那么它们究竟是什么呢？ 其实，这两种元素都是html规范中的概念。块元素(block element)一般是其他元素的容器元素...
在 HTML 中，元素可以分为两大类：块元素（block element）和行内元素（inline element）。块元素是指占据一整行空间的元素，而行内元素是指只占据所需空间的元素。下面我们将对块元素和行内元素进行详细的介绍。 ...
Inline element 内联元素通俗点来说就是文本的显示方式，与块级元素相反，内联元素的高度宽度都是不可以设置的，其宽度就是自身文字或者图片的宽度。我们常用到的、、都属于内联元素。内联元素的显示特点就是像文
`display:inline-block` 是 `display` 的一个值，它结合了块级元素（block-level element）和内联元素（inline element）的一些特性，为网页布局提供了更灵活的选择。在本篇文章中，我们将深入探讨 `display:inline-...
块元素（Block Element）占据整行，通常带有换行符，而内联元素（Inline Element）则不会换行。Display 属性还影响子元素的布局，例如流式布局、网格布局或弹性布局。 Display 属性的值 Display 属性的值有多种，...
在HTML中，根据元素的默认显示方式，可以将所有的HTML标签大致分为两大类：块状元素（Block-level Element）与内联元素（Inline Element）。这两种类型的元素在网页布局中扮演着重要的角色，并且对前端的开发设计...
在 HTML 中，元素可以分为两大类：行内元素（inline element）和块级元素（block element）。这两种元素在布局和样式上有着很大的不同。 行内元素（inline element） 行内元素是指在一行中可以与其他元素共存的...
- **Block Elements vs Inline Elements**：块级元素默认占据整行空间，而内联元素则与其他元素共享同一行。 - **Box Model**：每个HTML元素都可以被视为一个矩形盒子，它由内容、内边距、边框和外边距组成。 - **...
行内块元素（inline-block element）是指display属性为inline-block的元素，如input、button等。要消除行内块的空白间隙，可以使用font-size:0、letter-spacing等方法。 6. 浮动带来的影响 浮动可能会引起父元素...
在HTML中，元素的布局和显示方式主要分为两种类型：块级元素（Block Element）和内联元素（Inline Element）。这两种元素具有不同的特性，对网页的结构和样式有着重要影响。 **块级元素**是HTML中最基本的构建单元...
1. 流动布局（Block and Inline）：块级元素占据整行，行内元素并排显示。 2. Flexbox（弹性盒布局）：提供了一种更灵活的布局方式，可以轻松实现对齐、换行和自适应布局。 3. Grid布局：二维网格系统，用于创建复杂...
首先，我们需要区分块元素（Block Element）和行内元素（Inline Element）。块元素如`<h1>`、`<p>`、`<div>`等，默认占据一整行，前后有换行；行内元素如`<span>`、`<a>`、`<img/>`等，它们在同一行内显示，前后没有...
- **布局技巧**：利用`div`配合CSS的`display`属性（如`inline-block`，`flex`，`grid`），可以实现流式布局、网格布局等多种布局模式。 3. **CSS模板** - **预设样式**：模板通常包含常见的页面元素样式，如头部...
- 为了同时保留内联元素在同一行显示的特点以及块元素可以设置宽高的能力，可以使用`display: inline-block;`来指定元素。 - 示例代码展示了如何使用`inline-block`让`<div>`和`<span>`在同一行显示，并且可以设置...
`display`属性在CSS中起关键作用，可以将元素设置为块级（`block`）、行内（`inline`）、行内块（`inline-block`）等。`flexbox`和`grid`布局系统提供更灵活和响应式的布局解决方案，适应不同屏幕尺寸。 **第5章 ...
1. **display属性**：控制元素的显示方式，如`display:block`使元素成为块级元素，`display:inline`使其成为行内元素，`display:none`则隐藏元素。 2. **float属性**：用于创建浮动布局，`float:left`或`float:right...