DIV+CSS布局属性的基础的学习笔记！
程序员文章站
2022-04-01 12:09:05
...
DIV+CSS布局属性
div和span
盒模型：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒模型</title>
<style type="text/css">
*{margin: 0;}
.d1{
width:500px;
height: 500px;
background: #666;
margin: 100px;
border: red;
padding: 40px;
}
</style>
</head>
<body>
<div class="d1">
<img src="timg.jpg" width="300" height="400"/></div>
</body>
</html>
运行结果：
布局相关的属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒模型</title>
<style type="text/css">
.img1{position: absolute;
left: 100px;
top:160px;
border: red solid 2px;
z-index: 2;
display: none;}
.img2{position: absolute;
left: 100px;
top:160px;
border: yellow solid 2px;
z-index: 1;
display: block;
float: right;
}
</style>
</head>
<body>
<img src="timg.jpg" width="300" height="400"class="img1"/>
<img src="timg.jpg" width="300" height="400"class="img2"/>
<h1 style="position: absolute;left: 0; top:0;z-index: 1;color: red;">好好学习，天天向上</h1>
<h1 style="position: absolute;left: 2px; top:2px;z-index: 2;color: blue;">好好学习，天天向上</h1>
<h1 style="position: absolute;left: 4px; top:4px;z-index: 3;color: purple;">好好学习，天天向上</h1>
<h1 style="position: absolute;left: 6px; top:6px;z-index: 4;color: gold;">好好学习，天天向上</h1>
<h1 style="position: absolute;left: 8px; top:8px;z-index: 5;color: green;">好好学习，天天向上</h1>
</body>
</html>
DIV+CSS布局属性
DIV+CSS布局属性