栋栋晓05：详解css布局中的display属性（行内元素和块级元素）

display属性是我们写css代码，做css布局经常会用到的属性，把display用熟练了，写起css布局得心应手。

首先，所有主流浏览器都支持 display 属性。其次，我们都知道display 属性规定元素应该生成的框的类型。默认值：inline

我们常用的display属性值有：

inline

block

inline-block

none

下面我就详细讲讲有关display的知识点：

NO.1： display:none和visibility:hidden的区别

CSS display:none;
使用该属性后，HTML元素（对象）的宽度、高度等各种属性值都将“丢失”;
visibility:hidden;
使用该属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在，也即是说它仍具有高度、宽度等属性值。

NO.2:display:inline、display:block和display:inline-block有什么区别呢?

inline特性

　常用的inline就是文字和图片，而且给它设置属性height和width是没有用的，

inline

不单独占一行，其它元素会紧跟其后。“`

如何把inline元素转换成“块”元素？可用display:block，这样就可以添加宽高了。（display:table也可以使其变成块元素）

block特性

块对象

block

是可以设置宽高的，

block

要单独占一行。

然而，当我们即需要div有宽高，又不希望它独占一行怎么办？往下看。

inline-block特性

这个时候我们就需要使用inline-block了，

inline-block既具有block的宽高特性又具有inline的同行元素特性。

也就是说，当我们想要让一个元素既不独占一行，又可以设置其宽高属性的时候，我们就可以选择inline-block了。

在IE6/7下padding对inline的宽高是对其没影响的。

总结：

行内元素特点

1、和其他元素都在一行上；

2、元素的高度、宽度、行高及顶部和底部边距不可设置；

3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

块级元素特点

1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）

2、元素的高度、宽度、行高以及顶和底边距都可设置。

3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

常见的块状元素有：

<div>,<p>,<h1>...<h6>,<ol>,<ul>,<dl>,<table>,
<address>,<blockquote>,<form>

常见的内联元素有：

<a>,<span>,<i>,<em>,<strong>,<label>,<q>,<var>,<cite>,<code>,
<img>,<input>,<select>,<textarea>,<button>

以下来源于别人的博客总结：

常用display

1、div{display:block} 有换行作用。

案例：图片做背景，隐藏图片上文字http://www.divcss5.com/jiqiao/j55.shtml

2、div{display:None } 隐藏对象及对象内容。

案例：CSS隐藏HTML内容 http://www.divcss5.com/jiqiao/j55.shtml

3、div{display:Inline } 在一排显示。

代表案例，对li列表默认一排显示li{display:Inline }