問題來源于在segmentfault上看到的一個問題，button改變不了高度，在還沒看代碼之前忙菠，我猜是因為input是行內元素，沒有改變其display：block或display：inline-block的話纺弊，應該不能設置其高度牛欢，但實驗了一下過后，發(fā)現(xiàn)我錯了淆游。都能正常顯示寬度和高度傍睹，查詢了資料過后隔盛，知道了大概。
1. 關于html元素的分類：
? ? ? 其實大多數人都知道拾稳，元素可以分為行內(inline element)元素和塊狀(block element)元素吮炕，其中行內元素設置寬度和高度不起作用，只有水平方向的padding和margin才有效访得，寬度取決于其內容的寬度龙亲，高度可以通過設置line-height來改變。
其實元素還可以分為置換元素(relplaced element)和非置換元素(non-relpalced element)悍抑，他們在w3c的標準如下：
置換元素：
An element whose content is outside the scope of the CSS formatting model, such as an image, embedded document, or applet. For example, the content of the HTML IMG element is often replaced by the image that its "src" attribute designates. Replaced elements often have intrinsic dimensions: an intrinsic width, an intrinsic height, and an intrinsic ratio. For example, a bitmap image has an intrinsic width and an intrinsic height specified in absolute units (from which the intrinsic ratio can obviously be determined). On the other hand, other documents may not have any intrinsic dimensions (for example, a blank HTML document).
大概的意思就是對于置換元素鳄炉，它的內容不再CSS format model內，比如說img搜骡，video拂盯，object，input,textarea,select,button记靡。比如說img元素經常被它的src屬性指向的內容所替換谈竿。置換元素有著固有的尺寸：默認的長，寬和比例摸吠。另一些元素沒有明確的尺寸空凸，比如說空元素。瀏覽器會根據其標簽和屬性的內容來確定顯示的效果寸痢。
非置換元素：
其內容直接表現(xiàn)給用戶劫恒，多數的元素都是非置換元素。
1.關于 行內置換元素
? ? ? ? 行內置換元素的寬度：
對于行內級置換元素來說轿腺，其寬度的設置需遵循以下幾點：
若寬高的計算值都為auto且元素有固有寬度，則width的使用值為該固有寬度丛楚；
典型的例子是：擁有默認寬高的input當寬度的計算值為auto時族壳，則寬度使用值為其默認的固有寬度
若寬度的計算值為auto且元素有固有寬度，則width的使用值為該固有寬度趣些；
例子同上
若寬度的計算值為auto且高度有非auto的計算值仿荆，并且元素有固有寬高比，則width的使用值為高度使用值 * 固有寬高比坏平；
典型的例子：img當只定義了其高度值時拢操，其寬度將會根據固有寬高比進行等比設置
除此之外，當width的計算值為auto時舶替，則寬度的使用值為300px
典型的例子：比如iframe, canvas
其它類型的置換元素令境，其寬度的定義都參照行內置換元素的定義。
2. 關于 行內非置換元素
對于非置換元素顾瞪，直接設置width和height都是無效的舔庶，想要改變抛蚁，
? ?可以通過改變display類型，然后再設置寬度和高度惕橙；
? ? 或者設置line-height改變高度
