div与span
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>111</title>
<style>
div{
background-color: #CC99CC;
color: blue;
width: 400px;
}
span{
background-color: #CC99CC;
color: blue;
width: 400px;
}
</style>
</head>
<body>
<div>div</div>
<div>div</div>
<span>span</span>
<span>span</span>
</body>
</html>
另外，在html页面中，无法直接设置span的高度和宽度，如果需要改变其宽高，就需要将其转变为块体元素（block）或行内块体元素（inline-block）：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>111</title>
<style>
.class1{
background-color: #CC99CC;
color: blue;
width: 400px;
height: 50px;
}
.class2{
background-color: #CC99CC;
color: blue;
width: 400px;
height: 50px;
display:block;
}
</style>
</head>
<body>
<span class="class1">示例</span>
<span class="class2">示例</span> </body>
</html>
div与span的更多相关文章
- CSS之div和span标签
div和span是非常重要的标签,div的语义是division"分割": span的语义就是span"范围.跨度". 这两个东西,都是最最重要的"盒 ...
- Div和Span标签显示与隐藏
本实例中,学习jQuery的知识,显示与隐藏网页上的div或是span标签. 实际环境中,也许是根据某些条件进行,符合条件时,对某个或是某个div或是span标签时行显示与隐藏. 主要是学习jQuer ...
- [转]div与span区别及用法
DIV与SPAN区别及div与san用法篇 接下来了解在div+css开发的时候在html网页制作,特别是标签运用中div和span的区别及用法.新手在使用web标准(div css)开发网页的时候, ...
- DIV与SPAN的区别
DIV 和 SPAN 元素最大的特点是默认都没有对元素内的对象进行任何格式化渲染.主要用于应用样式表(共同点). 两者最明显的区别在于DIV是块元素,而SPAN是行内元素(也译作内嵌元素). 详解:1 ...
- HTML 的 <div> 和 <span> 标签
这篇文章里会涉及到两个术语,这里先明确一下: 块级元素,block level element 内联元素(或者叫行内元素),inline element 大多数 HTML 元素被定义为块级元素和内联元 ...
- "无意义"的div和span标签
HTML <div> 元素是块级元素,它是可用于组合其他 HTML 元素的容器.<div>元素没有特定的含义.除此之外,由于它属于块级元素,浏览器会在其前后显示折行.如果与 C ...
- HTML <div> 和 <span>
可以通过 <div> 和 <span> 将 HTML 元素组合起来. HTML 块元素 大多数 HTML 元素被定义为块级元素或内联元素. 编者注:“块级元素”译为 block ...
- div和span的区别
<div>是一个块级元素,我们可以把它比喻成盒子,它没什么实际语义能用到很多地方,独占一行不能和其它元素在一行,它还能把<div>和<span>”装在盒子里”,主要 ...
- CSS文字超出div或者span时显示省略号
我们常常需要在文本过长时显示,将超出显示成省略号: 思想为: 首先设置宽度,然后让超出的部分隐藏如果有超出则在最后显示省略号让文本不换行 具体css代码为: .title{ width:200px;o ...
随机推荐
- 如何通过Request.ServerVariables["HTTP_USER_AGENT"]获取客户端操作系统信息
http://www.useragentstring.com/pages/api.php
- [转]使用wireshark分析TCP/IP协议中TCP包头的格式
本文简单介绍了TCP面向连接理论知识,详细讲述了TCP报文各个字段含义,并从Wireshark俘获分组中选取TCP连接建立相关报文段进行分析. 一.概述 TCP是面向连接的可靠传输协议,两个进程互发数 ...
- php设计模式2策略模式
<?php /** ****************************************************** * 策略模式:策略模式针对一组算法,将每一个算法封装到具有共同接 ...
- Python一路走来 - python基础 数据类型
对于Python,一切事物都是对象,对象基于类创建 Python数据类型 python主要的数据类型主要包括以下几种类型: (1) 数字型 (2) 字符串 (3) 列表 (4) 元组 (5) 字典 ( ...
- MD5 加密 代码
/*! 获取MD5 加密串 */ +(NSString *)getAuthorization:(NSString *)type Date:(NSDate *)date UserSecret:(NSSt ...
- 转：VmWare下安装CentOS6图文安装教程
文章来自于:http://www.cnblogs.com/seesea125/archive/2012/02/25/2368255.html 查看文章索引请通过http://www.cnblogs.c ...
- 转：Raspberry Pi（树莓派）试用小记
近期入手一树莓派卡片机,体验了一下它的强大,写篇报告,推广一下哈! 机器截图: 基础参数: CPU:700 MHz, ARM11 内存:512M(还有一种是256M的) 支持GPU加速(高清视频无压力 ...
- ASP.NET Web.Config 读资料 (学习笔记)
refer : http://www.cnblogs.com/fish-li/archive/2011/12/18/2292037.html 上面这篇写很好了. 在做项目时,我们经常会遇到一些资料,我 ...
- java.io.FileNotFoundException: /exapp/hadoop/name/current/VERSION (Permission denied)
http://blog.csdn.net/blackiez/article/details/8570395
- 用Doxygen生成文档
我是生成C/C++的文档,输出html格式的文档.就不做成CHM了. 注释要这种写:(当然,有数种注释风格,选择任意你喜欢的就行) /** * * 一系列的doxygen的 command * * * ...