css盒模型与层模型与定位

css盒模型  注意 每一个元素都可以看作一个盒子
四大部分

盒子壁 ： border

内边距： padding

内容区：content

外边距：margin

改变盒子渲染规则： boxsize：border-box；IE盒模型

W3C盒模型   

盒子可视区域区别于盒模型

可视区域 = border +  padding + content  切记 不计算margin
 

  <!-- 远视图效果盒模型运用 -->
    <div class="wrapper">
        <div class="box">
            <div class="content">
                <div class="content1"></div>
            </div>
        </div>
    </div>

/* 一个div作为另一个的content区。外层div加padding就可以了 */
.content1 {
    width: 10px;
    height: 10px;
    background-color: #fff;
}
.content {
    width: 10px;
    height: 10px;
    background-color: #0f0;
    padding: 10px;
}
.box {
    width: 30px;
    height: 30px;
    background-color: #fff;
    padding: 10px;
}
.wrapper {
    width: 50px;
    height: 50px;
    background-color: #0f0;
    padding: 10px;
}

效果图：

层模型

定位属性  position

1、绝对定位 absolute  此时成为可定位元素、脱离原来的位置定位触发层模型，他原来的位置别人可以过去，每一个absolute都是一个层

    相对于最近的有定位的父级定位，如果所有父级定位都没有，相对于文档定位

top、left 确定位置

2、相对定位  relative 成为可定位元素 同样触发层模型 但是保留原来位置进行定位

relative相对于自己的出生地点定位

使用定位的处理方式

3、fixed   固定定位

总结：relative做参照物、利用absolute来定位。

定位居中的方式

div {
    width: 100px;
    height: 100px;
    background-color: tomato;
    position: fixed;
    left: 50%;
    top: 50%;
    margin-left: -50px;
    margin-top: -50px;
}

五环居中定位

    <div class="wrapper">
        <div class="circle1"></div>
        <div class="circle2"></div>
        <div class="circle3"></div>
        <div class="circle4"></div>
        <div class="circle5"></div>
    </div>

* {
    margin: 0;
    padding: 0;

}
.wrapper {
    /* 在body没有指明高度时relative无法进行垂直定位百分比 */
position: absolute;
border: 5px solid #000;
width: 250px;
height: 180px;
left: 50%;
top: 50%;
margin-top:-90px ;
margin-left: -125px;
}
.circle1,
.circle2,
.circle3,
.circle4,
.circle5 {
    position: absolute;
    width: 100px;
    height: 100px;
    border: 5px solid yellow;
    border-radius: 50%;
}
.circle2 {
    margin-left:70px;
    border-color: red;
}
.circle3 {
    margin-left: 140px;
    border-color: green;

}
.circle4 {
    margin-top: 70px;
    margin-left: 35px;
    border-color: purple;

}
.circle5 {
    margin-top: 70px;
    margin-left: 100px;
    border-color: blue;

}

效果图：