`

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  
受教!感谢!

相关推荐

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

    块元素又名块级元素,和其对应的是内联元素,都是html规范中的概念,内联元素其中文叫法有多种,如:内联元素、内嵌元素、行内元素、直进式元素等

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

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

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

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

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

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

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

    块级元素(block)特性:总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示;内联元素(inline)特性:和相邻的内联元素在同一行,接下来为大家详细介绍下,感兴趣的朋友可以参考下哈

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

    1. Block-level element: 指能够独立存在, 一般的块级元素之间以换行(如一个段落结束后另起一行)分隔....3. Top-level element: 包括html, body, frameset, 表现如Block-level element, 属于高级块级元素.

    前端日记01_行内元素和块级元素

    从html的角度看标签分为行级元素/内联元素(inline)、块级元素(block)、行级块元素(inline-block)、其他元素。 行级元素: 设置宽高属性无效 与其他行级元素在一行,不设置高度时,默认高度为文字高度 设置margin:...

    html之CSS设计(float定位和position定位详细分析)

    文章目录一、float浮动二、position定位 今天来谈谈网页设计中的...前几篇文章中都提到了块级(block)标签和内联(inline)标签,其实这些标签就是所谓的块级元素和内联元素。常见的都有以下几种, 块级元素有 div、

    HTML开发王

    15.6.1 块级元素和行内级元素的不同 15.6.2 关于div元素和span元素 15.6.3 元素标识(id属性和class属性) 15.7 巩固与自测 第16章 应用表格和框架布局 16.1 使用表格进行网页设计和布局的方法 16.1.1 了解布局模块 ...

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

    为什么它可以设定高度,但又不像 &lt;h1&gt; 这些元素,那种感觉就像它是个“半内联的(内联:inline-level)元素。HTML 4是这样描述的: The following elements may also be considered block-level elements since ...

    基于文档流解读html元素的(css)定位形式

     内联元素也不会独有一行. 简直一切元素(包括块级,内联和列表元素)均可生成子行, 用于摆放子元素。  有三种状况将使得元素离开文档流而存在,分别是浮动、绝对定位、固定定位. 然则在IE中浮动元素也存在于文档流中

    HTML5&CSS3网页制作:元素的类型.pptx

    块级元素总是从新的一行开始并占据可用的全宽度 块状元素 常见的块状元素 — 其中标记是最典型的块状元素。 内联元素 标签在一行内,宽度和高度由内容决定,只有在内容超过HTML的宽度时,才会换行; 表现形式...

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

    块元素一般都从新行开始,它可以容纳内联元素和其他块元素,常见块元素是段落标签’P"。“form"这个块元素比较特殊,它只能用来容纳其他块元素。 .如果没有css的作用,块元素会顺序以每次另起一行的方式一直往下排。...

    企业网站开发技术实验文档

    实验三:CSS --- 基本的颜色表示(英文单词表示、rgb、16进制)、a标签伪类、盒模型、块级元素页面水平居中、行内元素水平居中、行内元素垂直居中 实验四:CSS --- 标准文档流的特性、块级元素和行内元素的特性

    常见的HTML标记错误写法

    罪行1:把块级元素放入了内联元素内 HTML 元素的表现方式不外乎就两种:块级和内联.每一个标签都有默认的表现方式不是块级就是内联.像div和p 就是块级元素,他们用来形成文档结构.内联元素只能在块级元素内.   罪行2:...

    css float属性_动力节点Java学院整理

    HTML页面的标准文档流(默认布局)是:从上到下,从左到右,遇块(块级元素)换行。 浮动层 浮动层:给元素的float属性赋值后,就是脱离文档流,进行左右浮动,紧贴着父元素(默认为body文本区域)的左右边框。而此浮动...

    Web前端基础:HTML5文本标签.pptx

    浏览器会自动地在段落的前后添加空行是块级元素 2 2 &lt;div&gt; 元素是块级(block)元素,它是可用于组合其他HTML元素的容器。 &lt;div&gt; 元素没有特定的含义。除此之外,由于它属于块级元素,浏览器会在其前后换行。 &lt;span&gt; ...

Global site tag (gtag.js) - Google Analytics