span元素和div元素的区别

span元素和div元素的区别:
本章节简单介绍一下span元素和div元素的区别,因为这两个元素在布局中非常的常用,可以说几乎没有任何页面不适用这两个元素,下面就简单介绍一下它们两者的主要区别。
一.元素的性质:
span元素内联元素,而div元素是块级元素。
关于两种类型元素的区别可以参阅什么是块级元素和内联元素一章节。 
二.元素的使用方式:
div元素主要是用作大的框架布局,而span元素则是主要用于对内容的修饰,比如颜色字体大小。
代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
span{
  color:red;
  font-weight:bold;
}
</style>
</head>
<body>
<div id="top">蚂蚁部落顶部</div>
<div dir="content">蚂蚁部落欢迎您,只有努力<span>奋斗</span>才会有美好的明天</div>
</body>
</html>

上面代码是简单的演示而已,也就是说div负责大的布局,而span元素则注重于细节的修饰。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=13064

更多内容可以参阅:http://www.softwhy.com/divcss/

时间: 2024-10-10 09:23:58

span元素和div元素的区别的相关文章

html5 div 与span html块级元素

HTML <div> 和 <span> HTML 列表 HTML 类 可以通过 <div> 和 <span> 将 HTML 元素组合起来. HTML 块元素 大多数 HTML 元素被定义为块级元素或内联元素. 编者注:"块级元素"译为 block level element,"内联元素"译为 inline element. 块级元素在浏览器显示时,通常会以新行来开始(和结束). 例子:<h1>, <p

html5 区块与内联div 与span html块级元素

html5 区块与内联div 与span html块级元素 HTML <div> 和 <span> HTML 列表 HTML 类 可以通过 <div> 和 <span> 将 HTML 元素组合起来. HTML 块元素 大多数 HTML 元素被定义为块级元素或内联元素. 编者注:"块级元素"译为 block level element,"内联元素"译为 inline element. 块级元素在浏览器显示时,通常会以新行

css总结17:HTML块级元素&amp;行内元素之分: &lt;div&gt; 和&lt;span&gt;

1 HTML 区块元素: 大多数 HTML 元素被定义为块级元素或内联元素. 1.1 块级元素实例: <div> <h1>, <p>, <ul>, <table> 块级元素的特点: 独占一行,可设置宽高 1.2 行级元素实例 :<span> <a> 行级元素特点:一行可排布多个,不可设置宽高. 1.3 行内块元素:使用的最多:<input> <img> 行级元素特点:一行可排布多个,也可设置宽高.

行内元素与块元素的区别,及常用块元素和常用行内元素

一.行内元素(内联元素)与块元素的区别 1.块元素独占一行,宽度默认100% 行内元素宽度都是它内容的的宽度 2.块元素默认情况可以设置宽度和高度 行内元素默认去.情况不能设置 3.块元素margin.padding上下左右都可以 行内元素只能margin.padding左右,不能上下 二.常用块元素和常用行内元素 1.常用块元素:div.p.form.ul.ol.li,h1,table等, 2.常见行内元素:a,span,em,strong,input,img等

html中内联元素和块元素的区别、用法以及联系

昨天用asp.net的BulletedList做一个导航栏,最终该控件形成的html代码是ul列表和a超链接,具体代码如下: <ul id="BulletedList1" style="width:300px;"> <li><a href="javascript:__doPostBack('BulletedList1','0')">课程更新</a></li><li><a

HTML5之article元素与section元素之间的区别?

在HTML5中,为了使文档的结构更加清晰明确,追加了几个与页眉.页脚.内容区块等文档结构相关联的结构元素.内容区块是指将HTML页面按逻辑分割后 的单位.例如对于书籍来说,章.节可以称为内容区块:对于博客网站来说,导航菜单.文章正文.文章的评论等每一个部分都可称为内容区块.       在HTML5中新增的主体结构元素中有两个元素分别article元素与section元素,这两个元素是什么意思?通常用于哪些内容区块?何时用article元素?何时用section元素?两者之间的区别是什么?   

一句话让你明白伪元素和伪类的区别

伪类的效果可以通过添加一个实际的类来达到,而伪元素的效果则需要通过添加一个实际的元素才能达到. 下面就这句话给出例子 伪类 :first-child <div> <p>我是一个段落</p> <p>我是一个段落</p> <p>我是一个段落</p> <p>我是一个段落</p> <p>我是一个段落</p> <div> 使用伪类选出第一个段落 div p:first-ch

HTML 块级元素行内元素的区别

HTML标签 一.块级元素和行内元素是布局中常见的两种基本元素 常见块级元素:div  p  form ul ol li 常见的行内元素:span stronh em; 二.块级元素特性 1.默认独占一行 2.没有宽高时默认撑开一排 3.支持所有css属性 三.内联元素的特性 1.同排可以继续跟同类的标签 2.内容撑开宽度 3.不支持宽高 4.不支持上下的margin和padding 5.代码换行被解析 四.块级元素内联元素相互转换 css        display:block;  块级元素

HTML的display属性将行内元素、块状元素、行内块状元素互相转换以及三者的区别

1.行内元素 (1)设置宽高无效 (2)对margin仅设置左右方向有效,上下无效:padding设置上下左右都有效,即会撑大空间 (3)不会自动进行换行 <html> <head> <meta charset="utf-8" /> <title>行内元素</title> <style type="text/css"> span { width: 120px; /*设置宽高无效*/ height