学习记录：css盒子模型

CSS 基础框盒模型介绍

可以把 html 里的元素都看成一个盒子，盒子包括 content 内容，padding 内边距，border 边框，margin 外边距四个部分。

盒子模型的模式可以通过 css 样式属性 box-sizing 进行设置。

box-sizing: border-box || content-box || inherit;

一般盒子模型有两种模式：标准模式（W3C）和怪异模式（IE）

• 标准的盒子模型：width = content，height = content。css 属性为 box-sizing：content-box；
• 怪异的盒子模型：width = content + padding + border，height = content + padding + border。css 属性为 box-sizing：border-box；

在 css 中给定样式如下，在不同模式下会得到不同大小的盒子。

div {
    
    
	width: 200px;
	height: 100px;
	padding: 10px;
	border: 1px solid #ff0000;
	margin: 20px;
}

怪异盒子模型：box-sizing：border-box;

标准盒子模型：box-sizing：content-box;