1 CSS中的定位
1.1绝对定位:
absolute :定位离开之后释放的之前的位置 基于外层父级标签来说
1.2 相对定位：
relative: 定位离开之后之前的位置没有释放 基于之前的位置来说
1.3 固定定位：
fixed ：始终是基于浏览器的左上角定位 适合做
广告
1.4 默认定位：
static：初始的定位的操作，就是放上去什么样就是什么样
测试代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .div_1{ width: 200px; height: 200px; background-color: red; /*绝对定位*/ /*position: absolute;*/ /*固定定位*/ position: absolute; top: 150px; left: 150px; /*置于底层位置*/ z-index: -1; } .div_2{ width: 200px; height: 200px; background-color: green; /*相对定位*/ /*position: relative; top: 300px; left: 300px;*/ } </style> </head> <body> <div class="div_1"></div> <div class="div_2"></div> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> </body> </html>
测试效果：
2 盒子模型
2.1 生活中的盒模型
盒子模型的介绍示意图
3 个属性都可以同时或者分别设置 4 个方向属性值
2.2 内边距：div和border之间的距离
margin：1px，2px，3px，4px;(顺时针放向：上右下左4个方向)
margin：1px，2px;
margin：1px;
margin：0px auto ;//块元素会自动居中
margin-left:1px;
2.3 外边距 ：给盒子进行定位
margin: 50px;
margin-left: 80px;
margin-top: 70px;
外边距 垂直的方向回去较大的值
margin-bottom: 40px;
外边距 水平方向会合并
margin-right: 40px;
测试代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> /*清除浏览器的留白*/ body,html{margin: 0px;padding: 0px;} .div_1{ width: 200px; height: 200px; background-color: red; /*内边距 是div和border之间的距离*/ /*padding: 50px;*/ /* 上下的距离 左右的距离*/ /*padding: 30px 50px;*/ /* 上 右 下 左*/ /*padding: 10px 20px 30px 40px;*/ /*padding-top: 30px;*/ /*外边距 给盒子进行定位*/ /*margin: 50px;*/ /*margin-left: 80px; margin-top: 70px;*/ /*外边距 垂直的方向回去较大的值*/ margin-bottom: 40px; /*外边距 水平方向会合并*/ margin-right: 40px; } .div_2{ width: 200px; height: 200px; background-color: green; /*margin-top: 70px;*/ margin-left: 50px; } div{ float: left; } </style> </head> <body> <div class="div_1"></div> <div class="div_2"></div> </body> </html>
