Css span div
SPAN元素和DIV元素有什么区别
解决思路：
最明显的区别是：DIV是块元素，SPAN是内嵌元素。块元素相当于内嵌元素在前后各加一个<br>换行。其实，块元素和行内元素也不是一成不变的，只要给块元素定义display:inline，块元素就成了内嵌元素，同样地，给内嵌元素定义了display:block就成了块元素了。
具体步骤：
代码示例：
<style>
div,span{border:1px solid #000;margin:2}
</style>
<div>div1</div><div>div2</div>
<span>span1</span><span>span2</span>
<br>
<div style="display:inline">div3</div>
<div style="display:inline">div4</div>
<span style="display:block">span3</span>
<span style="display:block">span4</span>
技巧：有些朋友会说DIV是层标签，其实HTML里是没有层这个说法的，只不过是为了易于理解，Dreamweaver里才这样写的，每个对象都可以成为“层”，只需要给对象定义position属性(值为absolute或relavite)。例如，要让图片成为“层”，可以这样写代码：
<img src="demo.gif" style="posibion:absolute;left:20;top:20">
特别提示
本例代码运行效果如图2.1.6.3所示，为了更能说明问题，这里给块元素和内嵌元素都加了1像素宽的黑色实线边框，从图中可以看到，DIV默认为块元素，定义display属性值为inline后以内嵌元素显示，而SPAN默认为内嵌元素，定义display属性值为block后则以块元素显示。
＝＝＝＝＝＝＝＝
div>和<span>的区别
span:允许网页制作者给出一个样式表,但无须加在HTML元素之上,也就是说span是独立于HTML元素的.span在样式表做是做为一个标识符使用,而且也接受style class 和ID属性如<span class="xx">.....</span>
span是一个内联元素,它纯粹是为了应用样式表面成立的,所以当样式表无效时,它的存在也就没有意义了
DIV:基本上与span相似,或者说具有SPAN所有的功能,此外还具有SPAN不及的特色.DIV是一个块,也就是所谓的"容器",它具有自己独立的段落,独立的标题,独立的表格,就如<html>.....</html>一样包括了一切.如:
<div class="mydiv">
<h1>独立的标题</h1>
<p>独立的段落</p>
<table>......</table>
...................
</div>而这些SPAN是没有的!
SPAN 和 DIV 的区别在于，DIV(division)是一个块级元素，可以包含段落、标题、表格，乃至诸如章节、摘要和备注等。而SPAN 是行内元
素，SPAN 的前后是不会换行的，它没有结构的意义，纯粹是应用样式，当其他行内元素都不合适时，可以使用SPAN。 下面以一个实例
来说明这两个属性的区别。 代码： ＜span＞SPAN标记有一个重要而实用的特性，即它什么事也不会做，它的唯一目的就是围绕你的
HTML代码中的其它元素，这样你就可以为它们指定样式了。在此例中，＜span＞标识符允许你将一个段落分成不同的部分。 还有一个
标识符具有类似的功能，＜div＞DIV也被用来在HTML文件中建立逻辑部分。但与＜div＞SPAN不同，＜div＞工作于文本块一级，它在它所包
含的HTML元素的前面及后面都引入了行分隔。 效果： SPAN标记有一个重要而实用的特性，即它什么事也不会做，它的唯一目的就是
围绕你的HTML代码中的其它元素，这样你就可以为它们指定样式了。在此例中，标识符允许你将一个段落分成不同的部分。 还有一个
标识符具有类似的功能，
DIV也被用来在HTML文件中建立逻辑部分。但与
SPAN不同，
工作于文本块一级，它在它所包含的HTML元素的前面及后面都引入了行分隔。
Css span div的更多相关文章
- CSS之div和span标签
div和span是非常重要的标签,div的语义是division"分割": span的语义就是span"范围.跨度". 这两个东西,都是最最重要的"盒 ...
- 【HTML】Intermediate1：Span&Div
1.HTML is all bout applying meaning to content. The span & div tags apply no meaning at all=mean ...
- css span宽度和css span高度成功设置经验篇
我们介绍两种情况下的对span宽度高度样式成功设置. 为了观察和实践CSS SPAN宽度和span高度成功设置,DIVCSS5新建一个css命名为“.divcss5”的盒子,设置css宽度为150px ...
- css实现div内凹角样式
平常的开发中我们一般使用到圆角都是外凸的,即border-radius属性.而如果有内凹角的情况,我们一般的考虑实现方法有2种.一种是直接使用背景图片,一种是使用css. 用到的属性则是backgro ...
- css居中div的几种常用方法
在开发过程中,很多需求需要我们居中一个div,比如html文档流当中的一块div,比如弹出层内容部分这种脱离了文档流等.不同的情况有不同的居中方式,接下来就分享下一下几种常用的居中方式. 1.text ...
- css实现div的高度填满剩余空间
css实现div的高度填满剩余空间 .top{ width: 100%; height: 70px;} .bottom{background-color: #cc85d9;width: 100%;po ...
- html中css、div命名规范
html中css.div命名规范 1.类class的命名规范示例 头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column ...
- CSS实现Div透明，而显示在上面的文字不透明，但也可看到显示在下面的图片内容
CSS实现Div透明,而显示在上面的文字不透明,但也可看到显示在下面的图片内容,DiV透明其实挺简单,主要是为background定义opacity属性,一般这个是最大值是1,数值越接近1,则越不透明 ...
- CSS实现div居中
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
随机推荐
- CocoaPods安装、卸载、使用说明(Mac ox 10.11+)
一.全新安装前,先检查是否有安装残留 由于Mac 10.11更改了安全机制,所以cocoapods得安装和卸载命令也有所改变, 1.如果之前装过cocopods,最好先卸载掉,卸载命令: $ sudo ...
- RF常用技巧随笔
合并xml输出文件: pybot --outputdir d:\test --log log1.html --report report1.html --output output1.xml -T d ...
- Entity Framework技巧系列之十四 - Tip 56
提示56. 使用反射提供程序编写一个OData Service 在TechEd我收到一大堆有关将数据作为OData暴露的问题. 到目前为止你大概知道可以使用数据服务与Entity Framework将 ...
- .htaccess文件url重写小记
.htaccess文件url重写 当上一条规则匹配 并转换后 符合下一条规则的 继续下一条的匹配转换 RewriteRule ^shangpin-([0-9a-zA-Z]+)/category-([0 ...
- Qt 5简介
Qt 5简介 Qt 5概要介绍 在Qt 5这个版本中,Qt Quick成为了Qt的核心.但是Qt 5也继续提供了本地C++强大的功能来完成更好的用户体验,也提供了对OpenGL/OpenGL ES图形 ...
- iptables基础知识
iptables防火墙可以用于创建过滤(filter)与NAT规则.所有Linux发行版都能使用iptables,因此理解如何配置 iptables将会帮助你更有效地管理Linux防火墙.如果你是第一 ...
- git 创建分支，删除分支，管理分支
参考 http://blog.csdn.net/dijason/article/details/9042425 查看分支: 1 查看本地分支: $ git branch 2 查看远程分支 $ g ...
- Android BuildConfig.DEBUG的妙用
在Android开发中,我们使用android.util.Log来打印日志,方便我们的开发调试.但是这些代码不想在发布后执行,我们并不想在软件发布后调试日志被其他开发者看到,现在我的方法是设置一个全局 ...
- Openlayers 3 图层探查功能
<body> <div id="map"></div> <script> var map=new ol.Map({ target:& ...
- LightOJ 1282 Leading and Trailing 数论
题目大意:求n^k的前三位数 和 后三位数. 题目思路:后三位数直接用快速幂取模就行了,前三位则有些小技巧: 对任意正数都有n=10^T(T可为小数),设T=x+y,则n=10^(x+y)=10^x* ...