标准盒模型和怪异盒模型的区别

标准盒模型和怪异盒模型的区别

盒模型一共有两种模式：标准盒模型和怪异盒模型
1.标准盒模型的组成：宽高（content）+padding+border+margin
宽度实际占有的位置大小：
宽+左右padding+左右border+左右margin。
高度实际占有的位置大小：
高+上下padding+上下border+上下margin 。

width或height是对实际内容的width或height进行设置，内容周围的border和padding另外设置，盒子模型的width（或者height）=内容的宽高+padding+border+margin

2.怪异盒模型的组成：
元素的宽度：width（content+border+padding）+margin
width或height是对实际内容（content）+内边距（padding）+边框（border）之和的width和height进行设置的，盒模型的width（height）=设置的width（height）+外边距margin

注：标准盒模型可以转成怪异盒模型：用属性box-sizing
box-sizing的属性有两个 border-box（怪异盒模型）/content-box（标准盒模型）

box-sizing值为content-box时：宽度和高度分别应用到元素的内容框，在宽度和高度之外绘制元素的内边距和边框。（标准盒模型）

box-sizing值为border-box时：宽度和高度决定了边框，只能在宽度和高度内进行绘制，通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。（怪异盒模型）
3.标准盒模型和怪异盒模型的对比图：
（1）标准盒模型：

盒子的实际大小没有发生变化还是（300x300）

蓝色部分为盒子原来的大小（300x300）绿色的部分为padding的大小（20）深黄色的部分为margin
注意：在标准盒模型下盒子的宽度是不包括margin值的

盒子撑大的60像素变成了（360x360）

（2）怪异盒模型：
盒子的实际大小发生变化，盒子的实际大小变小了（240x240）

盒子没有任何变化还是（300x300）

怪异盒模型，盒子的宽度+内边距padding+边框border宽度=width(或者height)，盒子总宽度/高度=width/height + margin = 内容区宽度/高度 + padding + border + margin。
(标准盒模型和怪异盒模型的区别 盒模型 margin padding width 逆战）