CSS图文混排之display（块级，内联，行内块）

先简述一下display的几个值：
1，none 看不见啊看不见；
2，block，块级元素；
3，inline，内联元素；
4，inline-block，行内块元素；
5，除了以上的，还有一些 诸如table、inline-table的值，较少用到，本文也不涉及，想知道详情去w3c搜搜便可。链接在此

本文直接仅为经验之谈，就不做详细的原理介绍了，只说特点特征。

块级元素（block）：

可设宽高，宽度默认100%占满一行，若干个块级元素会直接以列排列。
如果想将块级元素并列，可以添加float属性，但要注意总宽度问题。(PS：FLOAT的属性会自动设为块级元素)

  
  
  



  
自动宽度
  
固定宽高1
  
固定宽高2
  
固定宽高3

例子很简单，效果如下：

block 块级元素

下面是并列的例子

  
  
  



![](head.jpg)
  
文字

图文混排float

这里稍微扩展解释下，在布局中，有一个文档流（normal flow）的概念。使用block时，元素处于文档流内，而float时则脱离出了文档流。脱离后，文档流里的其它元素将不认可它占有的布局。嗯..下面截取一些w3c的解释。

css浮动

内联元素（inline）：

偶尔我也会称呼内联元素为“文本流元素”。常见的如< a >，其它类型的元素通过display:inline可以设置为内联元素。
下面的例子，可以对比inline和block的区别，inline布局的结果和float很像，但仍然有很多不同之处。例如下例中的“文字3”，如果文字3是float模式的话，只会另一起一行，而不会如文本流般拆开。

  
  
  



 ![](head.jpg)
  
文字1
 ![](head.jpg)
  
文字2
  ![](head.jpg)
  
文字3

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布局需求了。