`

html块级元素和内联元素

阅读更多
块级元素:就是一个方块,像段落一样,默认占据一行出现;

内联元素:又叫行内元素,顾名思义,只能放在行内,就像一个单词,不会造成前后换行,起辅助作用。

一般的块级元素诸如段落<p>、标题<h1><h2>...、列表,<ul><ol><li> 、表格<table>、表单<form>、DIV<div>和BODY<body>等元素。而内联元素则如: 表单元素<input>、超级链接<a>、图像<img>、<span> ........ 块级无素的显著特点是:每个块级元素都是从一个新行开始显示,而且其后的无素也需另起一行进行显示。
<body>
<span>行元素或者内联元素</span>
<ul>
<li>块元素</li>
</ul>
<p>body 元素的内容会显示在浏览器中。</p>
<p>title 元素的内容会显示在浏览器的标题栏中。</p>
</body>

从上图的例子可以看出,块级元素默认占据一行,相当于在它之前和之后各插入了一个换行;而内联元素span没对显示效果造成任何影响,事实也是如此;em只是让字体变成了斜体,也没有单独占据一行。这就是块级元素和内联元素,正因为有了这些元素,才使我们的网页变得丰富多彩。

如果没有css的作用,块元素会顺序以每次另起一行的方式一直往下排。而有了css以后,我们可以改变这种html的默认布局模式,把块元素摆放到你想要的位置上去。而不是每次都愚蠢的另起一行。也就是说,可以用css的display:inline将块级元素改变为内联元素,也可以用display:block将内联元素改变为块元素。
分享到:
评论
1 楼 Branding 2011-11-18  
受教!感谢!

相关推荐

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

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

    CSS文档流与块级元素,css

    ### CSS文档流与块级元素、内联...理解和掌握CSS文档流以及块级元素与内联元素的概念,对于构建灵活、响应式和语义化的网页布局至关重要。通过合理利用这些元素的特性和CSS属性,可以创建出既美观又实用的网页设计。

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

    HTML中的行内元素和块级元素 在 HTML 中,元素可以分为两大类:行内元素(inline element)和块级元素(block element)。这两种元素在布局和样式上有着很大的不同。 行内元素(inline element) 行内元素是指在...

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

    理解块级元素和内联元素的概念对于编写高效、结构化的HTML代码至关重要。在实际开发中,开发者经常通过CSS来调整元素的显示方式,比如将内联元素转换为块级元素,或者让块级元素在一行内显示,以此来实现复杂的布局...

    html 内联元素和html 块级元素概述及区别

    HTML中的元素分为两种主要类型:块级元素和内联元素,它们在网页布局中扮演着至关重要的角色。理解这两种元素的区别对于创建有效的网页结构至关重要。 **块级元素(Block Elements)**: 1. **特性**:块级元素总是...

    html-内联元素和html-块级元素概述及区别.doc

    html-内联元素和html-块级元素概述及区别.doc

    web前端:表单、块级元素、内联元素、iframe嵌套框架、扩展后端mvc模式

    内容偏门,适合打基础,补足基础的同志们

    html内联元素和块级元素的基本概念及使用示例

    html标签分为两种,内联元素和块级元素,首先我们先了解一下内联元素和块级元素的概念: 块级元素:一般是其它元素的容器,可容纳内联元素和其它块级元素,块级元素排斥其它元素与其位于同一行,可设置宽度(width)...

    htmlcss多选题及答案,前端面试题含答案——HTML、CSS相关.docx

    HTML/CSS 相关知识点 ...本节我们详细介绍了 HTML 和 CSS 相关的知识点,包括 HTML 文档类型定义、块级元素和内联元素、HTML 文档结构、HTML 元素、CSS 简介、CSS 选择器、CSS 属性和 CSS 布局等。

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

    这类元素包括html、body、frameset等,它们是HTML文档的根元素,具有块级元素的特性,但更为特殊,因为它们定义了整个文档的框架和结构。例如,html元素是所有HTML代码的容器,body元素则包含网页的所有可见内容,...

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

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

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

    块级元素可以包含行内元素和其他块级元素,比如常用的、、到、、、、、等都是典型的块级元素。块级元素默认宽度为100%,除非通过CSS进行宽度控制。 行内元素(inline element),也称为内联元素,特点是它们不会...

    标签 li 是不是块级元素分析

    在HTML中,元素被分为两种主要类型:块级元素(Block-level)和内联元素(Inline-level)。块级元素通常会在新的一行开始显示,并占据页面的整个宽度,它们可以包含其他块级或内联元素。而内联元素则只占据其内容所...

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

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

    html小练习.docx

    在 HTML 中,元素可以分为块级元素、内联元素和内联块元素三种。块级元素占据整个宽度,垂直排列,而内联元素在同一行内显示,水平排列。内联块元素则是指同时具有块级元素和内联元素特征的元素。 页 1-1:性别选择...

    CSS块级元素与行级元素详解

    块级元素通常会在新的一行开始,并且可以包含内联元素和其他块级元素。例如,`&lt;p&gt;`标签(段落)、`&lt;form&gt;`标签(表单)、以及`&lt;div&gt;`标签(通用布局容器)都是常见的块级元素。块级元素的特点是它们会占据整个宽度,...

Global site tag (gtag.js) - Google Analytics