盒模型包括哪些屬性
marginpadding
border
content
width
height
text-align: center的作用是什么，作用在什么元素上？能讓什么元素水平居中
text-align:center可以讓模塊內的行內元素居中，作用在塊級元素上，能讓行內元素水平居中
如果遇到一個屬性想知道兼容性，在哪查看?
caniuse.com
IE 盒模型和W3C盒模型有什么區別?
IE678在怪異模式下使用IE盒模型。即寬度=邊框+內邊距+內容
chrome，ie9+，ie678（嚴格模式）使用W3C盒模型，即寬度=內容寬度
以下代碼的作用？兼容性？
對頁面內所有標簽進行渲染，將所有盒模型都設置為IE盒模型，寬度=邊框+內邊距+內容
寫一個 btn 的class， 任何 a，span,div,button 添加此class后后變成如下按鈕的樣式(鼠標hover背景色#c14d21, 鼠標按下背景色#e25f31)
代碼
這里遇到了一個問題，如果不對頁面進行設置border：none設置，button會有自己默認的狀態
此時button的盒模型為
而其他元素的盒模型為
也就是button自己多了一個border：2px
這個時候即使在btn類中手動設置邊框
盒模型邊框仍舊為0px，2px不變，無法對其進行修改。
解決辦法就是設置border：none，但是不理解其中的原理，一開始出現這種情況的時候，以為解決問題的辦法是，如何取消button標簽的默認樣式，在參考他人代碼后，發現大家用到了樣式重置，不過也是border為none，并不理解其中的出現的問題：1.即為什么不能手動更改border大小，2.button的邊框添加了明暗效果所以產生了按鈕的效果，去掉邊框后，按鈕效果消失，是這樣嗎？3.想要達到圓角效果需要使用border-radius，但是該屬性不能單獨使用，需要存在border屬性，并且不是border:none，所以我這樣進行了設置，達到了目的
即設置了一個空的border，但是感覺略麻煩，不知道有沒有更好的方法。
最后一個問題，border:none出現的順序不同時，會產生不同的效果，不是很理解。
在最上方時，一切正常，達到效果
但是稍微下移一點，就出問題了，
只是移動到了字體下面，還在其他border上面，就壞掉了。。。。。。。。不是很懂他們屬性。。。。
————————————————我是新問題的分割線————————————————
同樣的代碼，在設置字體微軟雅黑之后的效果，注意最后的button字體
IE Edge
chrome
這是為什么！！！！！
