一、基本概念
什么是盒模型:盒模型包括内容(content)、外边距(margin)、边框(border)、内边距(padding)
![](https://img.haomeiwen.com/i11579292/ab166727f1f491a5.png)
二、标准模型与IE模型区别
两者宽度不一样
标准模型宽度
![](https://img.haomeiwen.com/i11579292/8a24c36d607c5d6a.png)
width= border+padding+content 没有margin
![](https://img.haomeiwen.com/i11579292/1abec79eb7c1a006.png)
width = content 没有padding、border、margin
两者的高度计算一样
三、盒模型切换
css3新属性
box-sizing: border-box;ie模式
![](https://img.haomeiwen.com/i11579292/b35f370dac442f71.png)
计算宽度 刚好等于100px
box-sizing: border-box;标准模式
![](https://img.haomeiwen.com/i11579292/87ac2fcf381923f7.png)
网友评论