Form表单与块级元素/行内元素宽高问题

再用HTML5+CSS3根据教程做了个表单，做个总结。原文地址：http://line25.com/tutorials/create-a-stylish-contact-form-with-html5-css3

效果如如下

：

将表单放置在一个容器div元素中，这样方便我们将表单居中。每个label元素的for属性都引用了相应对应的input属性的id（<label for="name">Name:</label><input type="text" id="name" placeholder="Enter your full name" />）这样改善了表单的可访问性。

而主要CSS部分呢，首先重置了浏览器的默认属性。给容器div指定宽高，然后将其居中。然后呢使用css3给body设置了一个渐进的蓝色背景。

input指定宽高，和内外边距，背景色，圆角效果等。

在这个练习中遇到了给行内元素设置宽高的问题，总结如下：

在行内非替换元素设置宽高是不起作用的，只有块级元素和行内替换元素才有width,height属性。

如果想给一个行内非替换元素应用指定宽高可以通过如下方式：

1，浮动该行内非替换元素。float就是隐形的把内联元素转化为块级元素。float会隐形地把改内联元素转化为块级元素，但是他不会占据一行。相当于display:inline-block

2,display:inline-block,将该行内非替换元素设置为行内块元素。