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;
}