web基础（三）：盒模型、层模型

1.盒模型

盒子的组成部分：
盒子壁：border；
内边距：padding；
盒子内容：width+height；
margin（外边距）+border+padding+（width+height）=盒子模型
画一个远视图：

body有一个默认margin值为8像素
所以一般使用通配符将默认属性初始化

2.层模型

定位属性：
position：

2.1 绝对定位

1.脱离原来位置进行定位；
2.相对于最近的有定位的父级进行定位，如果没有，那么相对于文档进行定位；
position：absolute；（脱离原来位置进行定位）
left：100px；
top：100px；

或：right：100px； bottom：400px；（一般不设置底部）

当一个元素定位为绝对定位时，就脱离了原来的层，跑到上一层；

2.2 相对定位

1.保留原来位置进行定位；
2.相对于自己原来的位置进行定位；
position：relative；（保留原来位置进行定位）
left：100px；
top：100px；
参照物使用relative，保证位置不变，移动的物体使用absolute

2.3 固定定位

position：fixed；
left：0px；
top：300px；

固定居中广告位：
margin-left: -197px;
margin-top: -94px;
position: fixed;
left: 50%;
top: 50%;

2.4 示例

页面居中展示五环
html中设置五个div，border-radius: 50%;属性为正圆；css中可增加z-index:0/1/2/3/4/5属性，值越大越在上；

.wuhuan{
	width: 380px;
	height: 180px;
	border: 1px solid #fff;
	margin-left: -190px;
	margin-top: -90px;
	position: fixed;
	left: 50%;
	top: 50%
}

.blue,
.black,
.red,
.yellow,
.green{
	height: 100px;
	width: 100px;
	border: 10px solid #562379;
	border-radius: 50%;
	position: absolute;
}

.blue{
	border-color: blue;
	left: 0;
	top: 0;
}

.black{
	border-color: black;
	left: 130px;
	top: 0;
}
.red{
	border-color: red;
	left: 260px;
	top: 0;
}
.yellow{
	border-color: yellow;
	left: 65px;
	top: 60px;
}
.green{
	border-color: green;
	left: 195px;
	top: 60px;
}