CSS的display属性

display属性时CSS在layout布局上一个最重要的属性。

根据元素的种类不同，display属性的值也会不同，一般默认的属性值为block和inline。

暂时先将常用的、容易不被理解的属性值含义做以下说明。

block

display默认值为block的代表元素是div，具体的表现形式如下图：

也就是说，block属性的元素在页面中将独占一个区域，它的宽度将随着其父元素的大小而变化。

HTML的元素p和form也是block属性的元素，HTML5中新追加的header、footer、section等元素也属于block属性的元素。

display默认值为inline的代表元素是span，具体的表现形式如下图：

也就是说，inline属性会被作为文字列的一部分显示在其中，不会像block属性的元素那样，破坏原文的结构。

HTML中的a元素也属于inline属性的元素。

再看一下inline的复杂用法，源代码如下图：

其页面的表现结果为：

inline区域对其内容总是“不离不弃”！即使一行显示不下来发生折行，inline区域重视包围着其内容。

另外需要注意的是：inline属性的元素没有左右间距的概念，单有上下间距的概念，正好与下面的inline-block相反！

该属性值同其字面表达一样，具备了inline和block双重属性的叠加样式，首先看一下改样式在页面中的表现。

首先，源代码为以下：

页面表现形式为以下：

也就是说，能在一行表示时，则在同一行表示；如果在同一行表示不下时，对于一般的文本来说，会自动这行，但对于inline-block属性的元素，则会选择新起一行表示。具备了inline和block双重属性的叠加结果。

另外需要注意一点，inline-block属性的元素有左右间距的概念，但没有上下间距的概念。

还有很多更有意思的display值，比如：list-item和table、flex等，暂且不表！