CSS核心（二十六）标签类型划分 行元、 行内块元素和块元素
在HTML中，标签从占位角度而言，可以被分为以下三大类：行元素：
不能独占一行，不能设置宽高
代表标签：span a b u i s
块元素：
独占一行，可以设置宽高
代表标签：div p h1 ul li
行内块：
不能独占一行，能设置宽高
代表标签：img input
下面我们看代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>标签类型划分 行元、 行内块元素和块元素</title>
</head>
<style>
div,span,img{
width:100px;
height:100px;
background:#abcdef;
}
</style>
<body>
<div>这是盒子</div>
<div>这是盒子</div>
<span>这是文字</span>
<span>这是文字</span>
<img src="./img/1.png">
</body>
</html>
显示结果如下：
解释一下：
前面两个都是div盒子，它们可以独占一行，即使第一个div并没有占满一行，第二个div依然显示在下一行中。
下面的两个span和img标签都是行内元素，不同的是：span不能设置宽高，而img可以设置宽高。
下面我们接着看如何转换元素类型
主要有两种种转化需求，转换后的元素都可以设置宽高:
1、转为块元素。display:block;例如：转换后可以让两个span显示在两行中。
2、转为行内块元素。display:inline-block; 例如：转换后两个div在一行显示。
请看代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>标签类型划分 行元素、行内块元素和块元素</title>
</head>
<style>
span{
width:200px;
height:200px;
background:#f00;
/* 模式转换：转为块元素 */
display:inline-block;
}
div{
width:200px;
height:200px;
background:#0f0;
/* 转为行内元素 */
display:inline-block;
}
</style>
<body>
<span>这是文字</span>
<span>这是文字</span>
<div>这是盒子</div>
</body>
</html>
以上代码中，我们将div和span全部转为行内块，最终的结果是div和span都显示在一行中，并且span可以设置宽高。
再看代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>标签类型划分 行元素、行内块元素和块元素</title>
</head>
<style>
span{
width:200px;
height:200px;
background:#f00;
/* 模式转换：转为块元素 */
display:block;
}
div{
width:200px;
height:200px;
background:#0f0;
/* 转为行内元素 */
display:inline-block;
}
</style>
<body>
<span>这是文字</span>
<span>这是文字</span>
<div>这是盒子</div>
</body>
</html>
以上代码中，我们将span转为块元素，实现结果为，两个span标签分两行显示，且可以设置宽高。
韧性和毅力。 看了这篇文章我的感触很深啊，有很多人都是表面说说，而做的有多少人啊！用一些华丽的东西去炫耀自己的知识，而忘了用一些简单的方法去解决这个问题！！以后我会用心的学习变成知识，争取为心目中的理想而奋斗，争取做一名好的程序员，为中国的软件业贡献自己的一份力量。 经典,也给我们清醒了一下! 不错哟首先祝贺你！~我是一个新手，我喜欢VB，我更希望自己能成为一个优秀的程序！~我想我没有机会了，我读的是专科！~~不过，我很有自信，我相信会有这么一天的！~ 看来以前所做的努力都和这上面说的错太远了啊。我将来也得走程序员的路，我知道它很苦．至少现在刚开始接触程序的我就已经焦头烂额了，而自己还不知急，整天怨天尤人．读了这篇文章使我收益非浅．让我真正的认清自己．我想起了编程老师为让我们抓紧学习，给我们讲中国软件在世界的地位，美国可以占９０％，１０％是欧洲的，１３亿人口的中国却占不上位置．为什么会这样，我不敢评论，因为自己没资格．我们寝室的同学可能略见一斑，打游戏，每天必修，老师留了个万年历的分组完成程序，我们组十一在学校玩了７天，愣是一个也没有去做的，我自己电脑不能装ＶＣ那是借口，我知即使我装上了ＶＣ我也做不出来，我自己也是１天到晚的游戏啊！自己还想学好Ｃ，这样又怎么学好啊！没毅力，没韧性．坐享天成又怎么可能呢？谢谢您的教导让我如梦初醒！楼主的文章对我启发很大，我也是一个学计算机的本科生，谢谢楼主。 路漫漫其修远兮，吾将上下而求索 不错不错 其实每行每业都是一个道理 ！ 让暴风雨来的更猛烈些！努力！