盒模型的相关知识

盒模型

一、盒子模型
1、盒子的组成三大部分：a.盒子壁（border） b、盒子内边距（padding） c、盒子内容（width+height）

2、盒子模型的组成四部分：a、盒子壁（border）b、盒子内边距（padding）c、盒子内容（content=width+height）d、盒子外边距（margin）


二、盒模型的计算（可视区域的宽高，真实的大小）
例：求下面盒模型的真实宽度和高度

<div></div> 

div{
	width: 100px;
	height: 100px;
	background-color: red;
	border: 10px solid black;
	padding: 10px 20px 30px;
	margin: 10px 20px;
}

真实宽度=100+10+10+20+20px=160px
真实高度=100+10+10+10+30px=160px
margin不算盒子，所以计算的时候不能算上margin

经典案例：
1）远视图
代码如下：

<div class="wrapper">
		<div class="box">
			<div class="content">
				<div class="content1"></div>
			</div>
		</div>
	</div>

.wrapper{
	width: 50px;
	height: 50px;
	background-color: #000;
	padding: 10px;
}
.content1{
	height: 10px;
	width: 10px;
	background-color: #0f0;
}
.content{
	width: 10px;
	width: 10px;
	padding: 10px;
	background-color: #000;
}
.box{
	width: 30px;
	height: 30px;
	background-color: #0f0;
	padding: 10px;
}

效果如下：

2）通过调整margin，调整距离

<span class="demo">123</span>
<span class="demo2">123</span>

.demo{
	background-color: red;

}
.demo{
	background-color: red;
	margin-right: 60px;
}
.dmeo2{
	margin-left: 40px;
}

三、定位position