盒模型包括哪些属性
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
这是为什么！！！！！
