display属性、盒模型

//确实应该对html中的每个元素标签都要了解一遍，这样才能恰到好处的使用它们

//这里做个初步的整理，细节实践中纠正

一、display属性的三个值：inline，inline-block，block

它们改变元素的特性，将元素重新分类成：内联元素，行内块元素，块元素。

inline元素：设置width、height对它的自身的高度没影响，其高度由font-size撑起，如span、a、strong、em等。

一般来说设置padding、margin改变的是inline元素作为盒模型的内外边距，并不会挤动本行的基线。

<strong style=“border 2px red; padding-top:10px;”>内联1</strong><span>内联2</span>

inline-block元素：应用了该特性的元素本身变成了内联的，而该元素的内容却变成了块级的——inline-block字面翻译行内块嘛~

由于内部的块元素可设置width、height，起到支撑作用，而inline-block特性又具有一种收缩力，能将元素压缩。它们两相作用，意味深长~~

block元素：默认首尾都带上了换行符。块元素可为内容区设置width、height，其内容区的与内容非紧密依存关系。

<div style=“border: 10px solid red;height: 4px;”>我们</div>  //font-size是默认的12px; 效果如下：

二、 替换元素、不可替换元素

<img>、<input>、<textarea>、<select>、<object>这些标签在写html是个占位标签，但是呈现时浏览器会把它翻译成一些框框、区域等形状——这就是替换元素。strong，span等都不是可替换元素，但它们都是inline家族的。所不同的是：

<img>、<input>等这些可替换的inline元素设置margin、padding能够起作用，width、height也能设置。可以想象img就是一个资源容器，这个容器是inline的，与文字共用基线。（精确的尺寸还得折腾一番，留着）

<img src="http://www.w3c.../i/ct_1px.gif" width="200px" height="30px" />

w3c上的一粒，用1像素的图片描出一个矩形。