css篇——display

上一篇整理了下css中举足轻重的margin，今天再整理另一个网页中必不可少的属性——display

什么是display

display，英文直译，展览，显示，顾名思义，它就是元素在页面上显示的方式

display怎么用

display: none;                                     //不显示

display: inline;                                     //按行内元素显示

display: block;                                      //按块元素显示

display: inline-block;                          //置换元素，即按行内元素显示又有块元素属性

行内元素(内联元素)和块级元素

行内元素有以下几个特点：

1，和其他元素都在一行上

2，宽度只与内容有关

3，高、行高及上下内外边距不可改变

4，行内元素只能容纳文本和其他行内元素

比如：a，img，input，label，strong，span等元素

块级元素有以下特点：

1，总是在新行上开始

2，宽度可设置，在没有设置的时候，是它的容器的100%

3，高、行高及上下内外边距都可控制

4，块级元素里可容纳块级元素、文本和其他行内元素

比如：div，form，h1，h2，ul，ol，p，table等元素

上面将元素类型分为了行内元素和块级元素，但是这种分类也不是绝对的，可以利用css中的display将行内元素转变为块级元素，也可将块级元素转变为行内元素。另外，从元素本身的特点来说，元素还有一种分类方式，就是替换（置换）和非替换（非置换）元素。

替换（置换）和非替换（非置换）元素

替换（置换）元素就是在(x)html中看不到实际内容，浏览器会根据元素的标签和属性来决定元素的具体显示内容

比如：<img>在(x)html中看不到图片的实际内容，但浏览器会根据<img>标签的src属性来读取图片信息并显示出来

input、select、textarea、object等都是替换元素，大多数的替换元素都是行内元素，但是拥有块级元素的属性，可以设置宽高等

非替换(非置换)元素就是将其内容直接表现给用户端(例如浏览器)，(x)html的大多数元素都是非替换(非置换)元素。段落<p>是一个非替换元素，段落内容全被显示在<x>html中。

display:inline-block

其他都容易理解和使用，这里重点介绍下display: inline-block;

display:inline-block是将对象呈递为内联对象，但是对象的内容作为块对象呈递，简单点说就是又有行内元素的特点又有块级元素的特点

什么时候用display:inline-block

很多时候我们需要将几个块元素在一行显示，很多时候我们第一想到的是用float，但是float有很多的隐患和bug，比如：在IE下会出现margin边距加倍的bug、必须清除浮动、限高等问题，所以这时候我们就可以使用display:inline-block

IE下块元素如何实现display:inline-block效果

虽然大多数浏览器都已实现了display:inline-block属性，但是在IE6和IE7不能支持，使用display:inline-block在这两个浏览器会触发layout，使得块元素此时虽然是行布局，却不会呈递为内联对象

两种方法：

1，先用display: inline-block触发块元素，再用display: inline呈递为内联对象(display:inline-block和display:inline需写在两个不同的css)

div {display: inline-block;}

div {display: inline;}

2，先用display:inline直接将块元素设置为内联对象呈递，再用zoom:1触发layout

div {display: inline: zoom:1;}