标签：显示 行内元素 char ... pad isp 宽度 -- back
div与span有什么区别
div单独占一行，span不会单独占一行
div是容器级的标签，而span是一个文本级的标签
容器级的标签有：div , h , ul , ol , dl , li ...
文本级的标签有：span , p , buis , del , em , ins ...
容器级的标签中可以嵌套其它所有标签
文本级的标签中只能嵌套文字/图片/超链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML5+CSS3</title>
<style>
* {
margin:0;
padding:0;
font-family: "Microsoft YaHei";
}
div {
display:inline;
}
span {
display:block;
background:green;
width:100px;
height:100px;
}
.cc {
background:blue;
width:200px;
height:200px;
display:inline-block;
}
</style>
</head>
<body>
<!--
在HTML中所有的标签分为两类：容器级与文本级
在CSS中将所有标签分为两类：块级元素与行内元素
1：什么是块级元素，什么是行内元素？
块级元素独占一行：div , h , ul , ol , dl , li , dt , dd , p
块级元素如果没有设置宽度就和父级元素一样宽；如果设置了宽高就和设置的一样宽高
行内元素不会独占一行：span , buis , strong , em , ins , del
行内元素如果没有设置宽度默认就和内容一样宽
行内元素是不可以设置宽度和高度的
2：行内块级元素
为了能够让元素既能够不独占一行，又可以设置宽度和高度，就出现了行内块级元素
3：显示模式的互相转换
设置元素的display属性：block 块级, inline 行内, inline-block 行内块级
-->
<div>这是DIV</div>
<div>这是DIV</div>
<span>这是SPAN</span>
<span>这是SPAN</span>
<p class="cc">这是P</p>
<b class="cc">这是B</b>
</body>
</html>
标签：显示 行内元素 char ... pad isp 宽度 -- back
原文地址：http://www.cnblogs.com/ginvip/p/7899203.html
