html中label宽度设置、非替换元素和替换元素

<label style="float：left;width:100px;"></label>
单独对label设置一个width:100px的属性石不起作用的，和[color=red]float:left或者display：inline-block[/color]配合的话 都可以设置上

参考：[url=http://desert3.iteye.com/admin/blogs/1562782]css position, display, float 内联元素、块级元素[/url]

在 CSS 中，任何元素都可以float浮动。[color=red]浮动元素会生成一个块级框[/color]，而不论它本身是何种元素。如果浮动[color=red]非替换元素[/color]，则要[color=red]指定一个明确的宽度；否则，它们会尽可能地窄[/color]。


元素是文档结构的基础，在css里面，每个元素生成了包含内容的框（box）,大家都叫“盒子”。但是不同的元素显示方式是不同的，有占据一整行的，有水平一个挨着一个的。

[b]替换元素：[/b]替换元素是浏览器根据其[color=red]标签的元素与属性来判断显示具体的内容[/color]。
比如：<input /> type="text" 的是，这是一个文本输入框，换一个其他的时候，浏览器显示就不一样。[color=red](X)HTML中的<img>、<input>、<textarea>、<select>、<object>都是替换元素[/color]，这些元素都没有实际的内容。

替换元素可增加行框高度，但不影响line-height,内容区高度值 = padding-top + padding-bottom + margin-top + margin-bottom + height。
要想替换元素居中，可以设置[color=red]line-height = height， vertral-align = middle[/color]。
（vertical-align:middle,是将元素行内框的垂直中点与父元素基线上0.5ex处的一点对齐。）

[b]非替换元素：[/b](X)HTML 的大多数元素是不可替换元素，他们[color=red]将内容直接告诉浏览器，将其显示出来[/color]。
比如<p>p的内容</p>、<label>label的内容</label>；浏览器将把这段内容直接显示出来。

非替换元素添加padding-top或padding-bottom，不影响行框高度，但内容区高度会变化，margin-top，margin-bottom对行框没有任何影响。添加左右边距会影响非替换元素水平位置。要使非替换元素在父元素框内居中，可以[color=red]设定line-height = 父元素框的高度[/color]。


行内元素框模型：
下面概括了行内布局组成：
（注意：对于行内非替换元素中指代的height，是指字符本身的高度，由font-size决定）
1. 内容区：
对于非替换元素，内容区高度取决于font-size,若有内边距，则内容区高度 = padding-top + padding-bottom + height；

对于替换元素，内容区高度值 = padding-top + padding-bottom + margin-top + margin-bottom + height
2. 行间距：
只应用于非替换元素，其高度值=（|line-height - height|）/2

3. 行内框：
对于非替换元素，其高度值 = line-height

对于替换元素，其高度值 = 内容区高度值 = padding-top + padding-bottom + margin-top + margin-bottom + height
4. 行框：
取决于行内框。行框的上边界要位于最高行内框的上边界，而行框的底边要位于最低行内框的下边界。