[链接](https://www.nowcoder.com/ta/front-end-interview) [链接](https://fecommunity.github.io/front-end-interview/index.html) https://zhuanlan.zhihu.com/p/139983258 元素按照盒模型的规则在页面中进行布局，它是由`content+ margin + border + padding`组成 * IE盒模型（怪异盒模型） * width = border + padding + content * 一个块的宽度 = width + margin * W3C盒模型（标准盒模型） * width = content * 一个块的宽度 = width + padding + border + margin  如果遇到一个属性想知道兼容性，在哪查看? [Can I use](https://link.jianshu.com/?t=http://caniuse.com/) Css中默认的盒模型是W3C盒模型，两者间的转换可以通过设置属性`box-sizing`来转换 ``` box-sizing: content-box; // W3C盒模型标准 box-sizing: border-box; // IE盒模型标准 ``` 对于div等非替换元素来看，其`content`就是`div`内部的元素。而对于替换元素，其`content`就是可替换的部分 ``` content 常在伪元素中出现,作用是在css中直接生成可在网页中显示的内容 <h1>I am Title！</h1> h1:after { content:'I am content！'; } <!-- 将会渲染出 I am Title！I am content！ --> ``` margin | padding 分别适用于什么场合？ * 何时使用margin：在border外侧需要留空 * 何时使用padding：在border内侧需要留空 ❗ 浏览器兼容性问题：在IE5.X,IE6中，为float的盒子指定margin时，左侧margin可能会变成两倍的宽度，通过改用padding或者指定盒子为display:inline就可以解决