盒模型和怪异盒模型

盒模型

盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都可以拥有像盒子一样的外形和平面空间.盒模型的组成：内容区、补白/填充、边框、边界/外边距。

PADDING
padding用法:
1:padding是在盒子里面，在盒子与内容之间。
2：padding的作用：控制子元素在父元素里面的位置关系。
3：padding会把盒子撑大。
4：如果想让盒子保持原有的大小：在宽高基础上减掉。
（如果一个元素是被内容撑开的，没有设置固定的宽高，padding直接撑开。不用减掉）
5:如果给单一方向添加padding
padding-top/bottom/left/right
6:padding的设置特点：
padding:30px; 四周
padding:10px 30px; 上下 左右
padding:10px 30px 50px 上 左右 下
padding:10px 30px 50px 100px 上右下左
7:padding不会对背景图的位置造成影响。
MARGIN
margin用法
（外边距、边界）
1:margin在元素外围，不会撑大元素的大小
2:作用:控制元素与元素之间的间距。
3：给单一方向添加margin
margin-left/right/top/bottom
margin用法
（外边距、边界）
4 :margin设置方法：
margin:30px; 四周
margin:10px 30px; 上下 左右
margin:10px 30px 50px 上 左右 下
margin:10px 30px 50px 100px 上右下左
5:margin:0 auto;
让当前元素在父元素里面左右居中。
6:margin常出现的bug
a:两个相邻元素上下的margin值 不会叠加 按照较大值设置。
b:如果父元素和第一个子元素没有浮动的情况下，给第一个子元素添加margintop,会错误放在父元素上面。

怪异盒

box-sizing
content-box
这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。
在标准模式下，一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)

在怪异模式下，一个块的总宽度= width + margin(左右)（即width已经包含了padding和border值）
标准盒子(黄色)和怪异盒子（红色）的对比：

<style>
		.box1{
			height: 100px;
			width: 100px;
			background: yellow;
			padding: 20px;
			margin: 20px;
			border: 10px black solid;
		}
		.box2{
			height: 100px;
			width: 100px;
			background: red;
			padding: 20px;
			margin: 20px;
			border: 10px black solid;
			box-sizing: border-box;
		}
	</style>
可看出怪异盒不会被border和padding的值影响原本的整体盒子的大小