CSS中的盒子模型与定位
目录
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>测试效果：
