問題來源于在segmentfault上看到的一個問題，button改變不了高度，在還沒看代碼之前，我猜是因為input是行內元素，沒有改變其display：block或display：inline-block的話，應該不能設置其高度，但實驗了一下過后，發現我錯了。都能正常顯示寬度和高度，查詢了資料過后，知道了大概。
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屬性指向的內容所替換。置換元素有著固有的尺寸：默認的長，寬和比例。另一些元素沒有明確的尺寸，比如說空元素。瀏覽器會根據其標簽和屬性的內容來確定顯示的效果。
非置換元素：
其內容直接表現給用戶，多數的元素都是非置換元素。
1.關于 行內置換元素
? ? ? ? 行內置換元素的寬度：
對于行內級置換元素來說，其寬度的設置需遵循以下幾點：
若寬高的計算值都為auto且元素有固有寬度，則width的使用值為該固有寬度；
典型的例子是：擁有默認寬高的input當寬度的計算值為auto時，則寬度使用值為其默認的固有寬度
若寬度的計算值為auto且元素有固有寬度，則width的使用值為該固有寬度；
例子同上
若寬度的計算值為auto且高度有非auto的計算值，并且元素有固有寬高比，則width的使用值為高度使用值 * 固有寬高比；
典型的例子：img當只定義了其高度值時，其寬度將會根據固有寬高比進行等比設置
除此之外，當width的計算值為auto時，則寬度的使用值為300px
典型的例子：比如iframe, canvas
其它類型的置換元素，其寬度的定義都參照行內置換元素的定義。
2. 關于 行內非置換元素
對于非置換元素，直接設置width和height都是無效的，想要改變，
? ?可以通過改變display類型，然后再設置寬度和高度；
? ? 或者設置line-height改變高度
