css案例学习之div与span的区别

代码：

<html>
<head>
<title>div 标记范例</title>
<style type="text/css">
div.widthstyle{font-size:18px;                        /* 字号大小 */font-weight:bold;                    /* 字体粗细 */font-family:Arial;                    /* 字体 */color:#FFFF00;                        /* 颜色 */background-color:#0000FF;            /* 背景颜色 */text-align:center;                    /* 对齐方式 *//*width:300px;*/                        /* 块宽度 默认宽度为一行，两边有点距离*/height:100px;                        /* 块高度 */margin-top: 10px;
}span{font-size:18px;                        /* 字号大小 */font-weight:bold;                    /* 字体粗细 */font-family:Arial;                    /* 字体 */color:#FFFFFF;                        /* 颜色 */background-color:#0000FF;            /* 背景颜色 */text-align:center;                    /* 对齐方式 */width:300px;                        /* 块宽度 span没有宽度的概念 */height:100px;                        /* 块高度 span没有高度的概念*/padding-left:10px;margin-left:10px;
}
</style>
</head>
<body><div class="widthstyle">这是一个div标记1</div><div class="widthstyle">这是一个div标记2</div><div class="widthstyle">这是一个div标记3</div><span>这是一个span标记1</span><span>这是一个span标记2</span><span>这是一个span标记3</span><div><span>这是一个div中的span标记1</span><span>这是一个div中的span标记2</span><span>这是一个div中的span标记3</span></div><div><span>这是一个单独div中的span标记1</span></div><div><span>这是一个单独div中的span标记2</span></div><div><span>这是一个单独div中的span标记3</span></div>
</body>
</html>

说明：div默认占据一行，两边有所空隙。可以设置宽度、高度，即使是设置宽度了，div还是占据一行，只是盒子的内容空间小了。

span是行内元素，没有宽度和高度的概念。放在一个单独的div中，才会独自占据一行位置，这个位置也是div争取回来的。

css案例学习之div与span的区别相关推荐

css案例学习之div ul li a 实现导航效果
效果代码 <html> <head> <title>无需表格的菜单</title> <style>body{background-colo ...
html并集选择器怎么写,css案例学习之并集选择器
代码并集选择器 h1, h2, h3, h4, h5, p{ /*并集选择器*/ color:purple; /* 文字颜色 */ font-size:15px; /* 字体大小 */ } h2.s ...
HTML中div与span的区别,在HTML的网页布局里div与span有什么区别
很多刚入行的朋友不是很懂这俩个标签的区别,可能大家认为SPAN也是一块,DIV也是一块,同样的作用为啥有俩个标签呢?本篇文章就给大家解答这个疑惑. DIV与SPAN的区别与特点以下是在没有对开发网页 ...
HTML中DIV与SPAN的区别
DIV 和 SPAN元素最大的特点是默认都没有对元素内的对象进行任何格式化渲染.主要用于应用样式表.两者最明显的区别在于DIV是块元素,而SPAN是行内元素(也译作内嵌元素). 具体步骤: 1.所谓块 ...
无意义”的标签div和span的区别
HTML只是赋予内容的手段,大部分HTML标签都有其意义(例如,标签p创建段落,h1标签创建标题等等)的,然而div和span标签似乎没有任何内容上的意义,听起来就像一个泡沫做成的锤子一样无用.但实际 ...
css案例学习之span边框实现的特殊效果
bottom left bottom right top left top right 配合颜色来使用,实现一些神奇的效果 #menu a span{height:0;width:0;/*border ...
css案例学习之继承关系
代码 <html> <head><title>继承关系</title><style> body{color:blue; /* 颜色 */te ...
css案例学习之relative与absolute
代码 <!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.or ...
css案例学习之全局声明*{} 与body{}的区别
代码 <html> <head> <title>全局声明</title> <style type="text/css"> ...

css案例学习之div与span的区别

css案例学习之div与span的区别相关推荐

最新文章

热门文章