css中的display属性(行内元素和块级元素)

我们常用的display属性值有：

inline
block
inline-block
none

把 display 设置成 none 不会保留元素本该显示的空间，但是 visibility: hidden 还会保留。

我们最关心的还是display:inline、display:block和display:inline-block的区别：

inline特性
内联对象inline给它设置属性height和width是没有用的，致使它变宽变大的
原因是：
它实际宽度为：内部元素的宽+2*(padding+border+margin)。
inline对象不单独占一行。

block特性
而块对象block是可以设置宽高的，但是它的实际宽高是：width+2*(padding+border+margin)。
block元素单独占一行。

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

inline-block特性
这个时候我们就需要使用inline-block了：
因为inline-block既具有block的宽高特性又具有inline的同行元素特性。

行内元素特点

1、和其他元素都在一行上；
2、元素的高度、宽度、行高及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

块级元素特点

1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%，除非设定一个宽度。

元素分类(关于这点我还有些问题，暂且放上来，慢慢修改，非常欢迎纠正)

HTML中的标签元素大体被分为三种不同类型：块状元素，内联元素和内联块状元素

常见的块状元素有：

<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>

有类特殊的元素：如img|input|select|textarea|button|label等，他们被称为可置换元素（Replaced element）。他们区别一般inline元素（相对而言，称non-replaced element）是：这些元素拥有内在尺寸(intrinsic dimensions),他们可以设置width/height属性。他们的性质同设置了display:inline-block的元素一致。

margin在块级元素下，他的性能可以完全体现，上下左右任你设定。

margin也能用于内联元素，这是规范所允许的，但是margin-top和margin-bottom对内联元素（对行）的高度没有影响，并且由于边界效果(margin效果)是透明的，他也没有任何的视觉影响。