Learn HTML&CSS the hard way V

盒模型包括哪些属性

---

margin

padding

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

这是为什么！！！！！