什么是盒模型，如何进行不同盒模型的切换

标签：box padding 模型 content 如何 切换 border 怪异

1、什么是盒子模型

具备内容（content）、内边距（padding）、边框（border）、外边距（margin）这些属性

2、盒模型有两种

1. 标准盒模型（W3C标准的盒子模型，大部分浏览器支持）
2. 怪异盒模型(主要表现在IE内核的浏览器)

3、标准盒模型与怪异盒模型的表现效果的区别之处：

1. 标准盒模型中width指的是内容区域content的宽度；height指的是内容区域content的高度。  标准盒模型下盒子（元素）的大小 = content + border + padding + margin
2. 怪异盒模型中的width指的是内容、边框、内边距总的宽度（content + border + padding）；height指的是内容、边框、内边距总的高度。怪异盒模型下盒子（元素）的大小=width（content + border + padding） + margin

4、css3新增属性box-sizing 

默认值：box-sizing: content-box|border-box|inherit:

值	说明
content-box	默认值。标准盒模型。
border-box	怪异盒模型。

标签：box,padding,模型,content,如何,切换,border,怪异
From： https://www.cnblogs.com/abby-lrwei/p/16641415.html