1、首先打开html5编辑器，新建一个html文件，在里面写入一个button按钮，被button按钮设置一个样式，这里给它的class属性设置为btn：
2、在上方引入style标签，在里面设置btn类的样式，这里设置宽度和高度使用width和height属性就可以了，最后在美化一下按钮，设置背景色和字体颜色以及文字橘子效果：
3、最后打开浏览器，即可看到设置好的按钮了。以上就是html5中设置按钮的宽度和高度的方法：
设置html的input框的高度和宽度步骤如下：
1、首先用sublime text2新建一个测试用的html页面。
2、这个时候在网页中添加以个label标签和一个input框。
3、预览一下效果，我们可以知道默认的宽度是10。
4、这里我们通过设置size的属性修改一下宽度。
5、再预览一下效果。是不是宽度减少了。
6、如果是简单改变宽度这就足够了，但是如果修改一下其他的东西。我们需要加上style属性。
7、预览一下最终的效果。可以看到宽度和高度都改变了。
1、在怪异模式下，也就是网页头部不写doctype的时候，body可以作为html元素的根元素，设置它的高度为百分之百的时候（不考虑外边距），可以使的页面的高度和浏览器客户区相同。在标准模式下，也就是网页头部写doctype的时候，body不是html页面的根元素，html才是根元素，如果仅仅设置body的100%，不设置html元素的高度为100%，那么body的高度不会生效，之所以不生效，是因为如果要以百分比设置元素的尺寸，必要以父元素的尺寸作为参考，如果父元素没有设置尺寸，自然不会生效。
2、在标准模式下，由于没有设置html的高度，所以body的高度100%就没有参考高度，于是也就导致div的百分比高度无效，如果将css代码中的第一行设置为:
div的100%是从其上一级div的宽高继承来的，有一点很关键，就是要设置div100%显示，必须设置其上一级div的宽度或高度，否则无效。
前面总得有个容器说明他的高度是多少。这样的话div才能按比例100%继承上一级的高度可惜的是浏览器一般默认解释为内容的高度，而不是100%。
解决方法：只要为html和body设置高度为100%就可以了，html,body{height:100%}，这样之后div会按比例来继承上一级的高度了.仅仅设置的div元素的height属性貌似没有什么效果。
另外，html{height:100%}的高度是相对浏览器高度来说的。
