先简述一下display的几个值：
1，none 看不见啊看不见；
2，block，块级元素；
3，inline，内联元素；
4，inline-block，行内块元素；
5，除了以上的，还有一些 诸如table、inline-table的值，较少用到，本文也不涉及，想知道详情去w3c搜搜便可。链接在此
本文直接仅为经验之谈，就不做详细的原理介绍了，只说特点特征。
块级元素（block）：
可设宽高，宽度默认100%占满一行，若干个块级元素会直接以列排列。
如果想将块级元素并列，可以添加float属性，但要注意总宽度问题。(PS：FLOAT的属性会自动设为块级元素)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
<style type="text/css">
body {
width: 300px;
}
div {
border: solid 1px black;
}
div:nth-child(1) {
height: 50px;
}
div:nth-child(2) {
height: 60px;
width: 100px;
}
div:nth-child(3) {
height: 70px;
width: 150px;
}
div:nth-child(4) {
height: 80px;
width: 200px;
}
</style>
</head>
<body>
<div>自动宽度</div>
<div>固定宽高1</div>
<div>固定宽高2</div>
<div>固定宽高3</div>
</body>
</html>
例子很简单，效果如下：
block 块级元素
下面是并列的例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
<style type="text/css">
body {
width: 300px;
}
div {
width: 100px;
height: 100px;
border: solid 1px black;
float:left;
line-height: 100px;
text-align: center;
}
img
{
width: 100px;
height: 100px;
float: left;
}
</style>
</head>
<body>
<div>文字</div>
</body>
</html>
图文混排float
这里稍微扩展解释下，在布局中，有一个文档流（normal flow）的概念。使用block时，元素处于文档流内，而float时则脱离出了文档流。脱离后，文档流里的其它元素将不认可它占有的布局。嗯..下面截取一些w3c的解释。
css浮动
内联元素（inline）：
偶尔我也会称呼内联元素为“文本流元素”。常见的如<span>< a >，其它类型的元素通过display:inline可以设置为内联元素。
下面的例子，可以对比inline和block的区别，inline布局的结果和float很像，但仍然有很多不同之处。例如下例中的“文字3”，如果文字3是float模式的话，只会另一起一行，而不会如文本流般拆开。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
<style type="text/css">
body {
width: 300px;
border: solid 1px blue;
}
div {
width: 100px;
height: 100px;
border: solid 1px black;
line-height: 100px;
text-align: center;
}
img
{
width: 100px;
height: 100px;;
}
div:nth-of-type(1),img:nth-of-type(1)
{
display: block;
}
div:nth-of-type(2),img:nth-of-type(2),div:nth-of-type(3),img:nth-of-type(3)
{
display: inline;
}
div:nth-of-type(3)
{
font-size: 30px;
line-height: 50px;
height: 5px;
}
</style>
</head>
<body>
<div>文字1</div>
<div>文字2</div>
<div>文字3</div>
</body>
</html>
inline和block的对比
可能细心的朋友已经发现了，inline元素是不能设置宽高的。内容大小由font-size决定，如果另外要设置高度则需要通过line-height设置。
行内块元素
往日里图文混排，我最喜欢用的其实就是这个属性。行内块元素可以说是综合了内联元素和块级元素的特点，话不多说，直接上例子：
上一个例子30行处做此改变：
div:nth-of-type(2),img:nth-of-type(2),div:nth-of-type(3),img:nth-of-type(3)
{
display: inline-block;
}
行内块元素
聚焦到文字2、3和第二、三个头像，发现他们是并列的，并且宽高属性生效。同时从文字2你头像2，可以很明显看出一个上下的错位。很多初学者无论如何也解决不了这个错位，即便你使用marrgin padding等属性。其实要解决很简单:
在30行下面插入一句：
div:nth-of-type(2),img:nth-of-type(2),div:nth-of-type(3),img:nth-of-type(3)
{
display: inline-block;
vertical-align: top;
}
增加垂直置顶
所以感觉上，行内块就是可设宽高的行内元素，受控制文本的属性影响，如vertical-align、text-align 等。
在body样式下加入text-align:center看效果。
body {
width: 300px;
border: solid 1px blue;
text-align: center;
}
增加文字居中样式
在我看来，灵活掌握这三种元素类型，是初学者CSS的一次小进阶。灵活运用它们基本可以解决大部分的DIV布局需求了。
网友评论