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

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

在正式介绍标准盒模型和怪异盒模型之前，我们先来简单介绍一下什么是盒模型。

所谓的盒模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是盛装内容的容器。每个容器都是由内容（content）、内边距（padding）、外边距（margin）和边框（border）组成。

对于标准盒模型来说，它的width和height定义的是内容（content）的宽高，不包括padding和border,而对于怪异盒模型来说，它的width和height不光包括内容区(content)，还包括内边距（padding）和边框（border）

也就是说

标准盒模型：

	标准盒模型的宽=width(content) + padding + border + margin
	标准盒模型的高=height(height) + padding + border + margin

怪异盒模型：

	怪异盒模型的宽=width(content+padding+border) + margin
	怪异和模型的高=height(content+padding+border) + margin

下面通过实例说明一下
首先，创建一个盒子，并以标准盒模型显示，并定义相关属性如下

			div{
				width: 100px;
				height: 100px;
				padding: 20px;
				margin: 30px;
				background-color: greenyellow;
				border: solid 10px goldenrod;
				box-sizing: content-box;
			}

通过控制台，我们可以清除的看到这个标准盒模型的width和height只包含内容区，并不包含边框和内边距

我们让它以怪异盒模型的方式显示，改变以下属性

box-sizing: border-box;

再次观察控制台，我们可以发现，它的内容区的大小变成了40px x 40px，我们设置的宽高100px，变成了border + padding +content的总的大小

本片文章到此结束，感谢浏览