CSSBoxModel和WeirdBoxModel盒子模型（BoxModel）可以用来布局元素，包括padding、border、margin、实际内容。几个部分。标准框模型标准框模型中框的大小指的是：content+border+padding+margin。其中，width是指内容区域中内容的宽度；height是指内容区域中内容的高度。下面用一段代码和一张图来说明一个盒子尺寸的呈现。.box{宽度：100px；高度：100px；填充：10px；边距：10px；边框：10px纯红色；背景色：#606266；/*standardboxmodel*/box-sizing:content-box;}在chrome里面的调试工具样式底部，可以看到一个盒子的长宽、padding、border和margin。将鼠标移到dom上，可以看到盒子的实际长宽分别为140px和140px。这是因为我们的宽度是100px，高度是100px，padding是上下左右各10px，border是上下左右各10px。所以我们看到的盒子的长宽都是140px。由于是块级元素，实际的盒子会占一行，这里的140px不算外边距。在标准模式下，最直观的特点就是width和height的值决定了盒子的内容区域（content）的大小。框的实际大小不一定是你设置的宽高的值。因为有padding、border、margin等影响它。IE怪盒模型怪盒模型中的宽度是指content、border、padding的总宽度（content+border+padding）；height是指内容、边框和填充的总高度。怪异盒子模型下盒子的大小=宽度（内容+边框+填充）+边距。下面用一段代码和一张图来说明一个盒子尺寸的呈现。.box{宽度：100px；高度：100px；填充：10px；边距：10px；边框：10px纯红色；背景色：#606266；/*IE框模型*/box-sizing:border-box;可以看出我们设置的宽高都是100px，所以盒子的实际大小也是100px（这里是宽高的值，没有边距）。然后内容区域（可以放置text和div标签的区域）的大小为width-padding-border=60如何切换盒子模型在html顶部添加一个DOCTYPE声明，大部分浏览器会默认到标准盒模型。从上面的代码也可以看出，可以通过css属性box-sizing改变盒子模型。*{/*IEboxmodel,order和padding计算成width*/box-sizing:border-box;/*padding计算到宽度中，不推荐，很老的浏览器只支持*/box-sizing:padding-box;/*边框和填充不包括在宽度中*/box-sizing:content-box;/*继承父元素*/box-sizing:inherit;}兼容性可以看出现代浏览器都支持这个属性。综上所述，我们可以看出，其实对于以上模型，最终的盒子尺寸是一样的，区别在于盒子宽高的计算方式。个人比较喜欢在网页布局中使用IE盒子模型，因为在这种模式下，IE盒子模型呈现的宽高就是我们设置的长宽，这样就不用减去空格了由（边框和填充）为布局生成。其实我们也可以发现，画一个带边框的三角形也是利用了盒模型的原理，点击查看。学习如逆水行舟。不进则退。前端技术发展迅速。如果你不每天坚持学习，你将无法跟上。我会陪着你，每天推送博文，和你一起进步。我希望你能关注我。第一时间收到最新文章。个人公众号：
